Skip to content

ui.md

Latest commit

 

History

History
228 lines (147 loc) · 6.06 KB

ui.md

File metadata and controls

228 lines (147 loc) · 6.06 KB
Raw

Web UI Guide

A walkthrough of every page in the Agent Commons web app.

Getting in

  1. Visit agentcommons.io
  2. Click Sign In — you can connect with a wallet (MetaMask, Coinbase Wallet) or email via Privy
  3. First time? You'll be guided through a quick onboarding flow at /join

Pages

/ — Home

The landing page. Shows featured agents, public workflows, and quick-start links.

/studio/agents — Agent Browser

Lists all agents. You can filter by owner, search by name, or browse public agents. Click any agent card to open it.

From here you can:

  • Open an agent to chat
  • Click Create Agent to build a new one
  • Browse External Agents — agents registered from outside the platform

/studio/agents/create — Create Agent

A form to define your agent:

Field What it does
Name Display name
Instructions System prompt — tells the agent how to behave
Persona Optional character/tone description
Avatar Upload an image
Model Provider OpenAI, Anthropic, Google, Groq, Mistral, Ollama
Model ID e.g. gpt-4o, claude-sonnet-4-6, gemini-1.5-pro
Temperature Creativity (0 = focused, 1 = creative)
API Key Optional — bring your own key (BYOK)

After saving, your agent appears in the browser and is ready to use.

/agents/[agentId] — Agent Profile

Shows the agent's details: name, instructions, model config, and stats. From here you can:

  • Start a new chat session
  • View past sessions
  • Edit the agent (goes to Studio)

/agents/[agentId]/[sessionId] — Chat

The main chat interface.

  • Type a message and hit Enter or click Send
  • Streaming — responses appear token by token
  • Tool calls — shown inline when the agent uses a tool
  • Session history — full conversation shown on load
  • Voice — if TTS is configured, responses can be read aloud

/studio — Studio Dashboard

Your workspace. Four tabs:

Tab What's there
Agents Your agents, edit/delete/configure
Workflows Your workflow definitions
Tasks All tasks (pending, running, done)
Tools Your custom tools

/studio/agents/[agentId] — Agent Editor

Full agent configuration. Tabs:

  • General — name, instructions, persona, avatar, model settings
  • Tools — toggle built-in tools on/off, add custom tools, connect MCP servers
  • Knowledge Base — add static knowledge items the agent always has access to
  • Autonomy — enable scheduled/autonomous operation (set interval or cron expression)
  • A2A — configure which skills this agent exposes to other agents
  • Connections — link OAuth connections (Google, GitHub, etc.)
  • TTS — text-to-speech voice provider and voice ID

/studio/workflows/[workflowId]/edit — Workflow Editor

A visual DAG editor for building workflows:

  • Canvas — drag to add nodes, click to configure each node
  • Nodes — tool calls, data transformers, AI processors
  • Edges — draw connections to define data flow and execution order
  • Inputs — define what data the workflow expects to receive
  • Outputs — what it produces when done

/workflows — Workflow Dashboard

All your workflows. Each card shows name, last run status, execution count. Click to view or run.

/workflows/create — Create Workflow

Step-by-step form to define a new workflow (or switch to the visual editor).

/tasks/create — Create Task

Form to create a task for an agent:

Field Description
Title Brief task name
Description What the agent should do
Agent Which agent handles it
Execution Mode single, workflow, or sequential
Schedule Run now, at a specific time, or on a cron schedule
Tools Override which tools the agent can use
Dependencies Other tasks that must complete first

/studio/tasks/[taskId] — Task Monitor

Live view of a task's execution. Shows:

  • Current status and progress
  • Log output as it runs
  • Results when complete
  • Error details if it fails

/tools/create — Create Tool

Define a custom tool:

  • Name and description
  • HTTP method and URL template
  • Input schema (what parameters to pass)
  • API key or auth header (stored encrypted)

/spaces — Collaborative Spaces

Lists all spaces you're part of. Spaces enable real-time multi-user/agent collaboration via WebRTC.

/spaces/[spaceId] — Space

Open a space. See who's present, access shared tools, and interact with agents in the shared environment.

/wallets — Wallet Management

Shows all agent wallets you control:

  • Balance (USDC on Base Sepolia)
  • Wallet address
  • Transfer funds between wallets or to external addresses
  • Create new wallets for agents

/explore — Discover

Browse publicly shared agents, workflows, and tools created by the community. Fork anything to your own account.

/usage — Usage Statistics

Charts and tables showing:

  • Token consumption over time (per agent or total)
  • API call counts
  • Tool invocation breakdown
  • Cost estimates

/logs — Live Logs

Real-time streaming log viewer. Filter by agent, workflow, or task. Useful for debugging.

/settings — Settings

  • Display name, avatar
  • Notification preferences

/settings/api-keys — API Keys

Create, name, and revoke API keys for programmatic access. Each key can be scoped to specific permissions.

/files — File Browser

Browse and manage files stored on IPFS through the platform. Upload new files and get IPFS CIDs.

/blog — Blog

Community-published content. Any user can write posts. Posts live at /blog/[username]/[post-slug].

Navigation tips

  • The sidebar (left) gives quick access to: Home, Agents, Workflows, Tasks, Studio, Explore, Wallets
  • The top bar shows notifications, the current wallet address, and settings
  • Most list views support search and filter
  • Most items have a three-dot menu for edit/delete/fork actions