Web UI

Four small browser pages, all cross-linked, share one look (adapters/dev-ui-styles.ts), and never need a build step — each is a self-contained HTML string served straight out of adapters/http.ts.

Page	URL	What it's for
Agents list	/agents	Every registered agent, with links into the playground and Agent config.
Agent config	/agents/config	Edit one agent — prompt, model, tools, permission rules, env vars — live.
Global config	/config	Account-wide: which model providers are set up, and Composio's auth status.
Dev playground	/playground	Chat with one agent and watch its loop-step event stream live.

Agents list

Open http://localhost:8787/agents in a browser (the same route returns plain {agents: [...]} JSON to a non-browser client — content-negotiated on the Accept header, so nothing that already calls it as an API needs to change) to see every registered agent, with links into the playground and Agent config below.

Agent config

Open http://localhost:8787/agents/config (optionally ?agent=<name>) — a live, editable view of every registered agent, no code changes or redeploy needed for most of it:

Tab	What you can do
Overview	System prompt, model, every tool (with its JSON schema and parallel-safety), and a read-only view of the rules that would actually apply.
Skills	Create, edit, and delete SKILL.md files for this agent directly in the browser — write the body, preview the rendered markdown, save.
Tools	Local hand-written tools, gateway-sourced tools (e.g. Composio), and subagents-as-tools, in one place. Connect a new external gateway source or add/remove a tool without touching a file.
ActAuth	Add, edit, and delete permission rules — scope, tool, condition, decision — and change default_decision, live.
Environment	Every env var an ability (see Ability System) declared it needs, across everything installed for this agent — which ones are set, which are missing, and a form to set one. A value is never echoed back once set.

Every tab is backed by a real API (GET /agents/:name/config, .../actauth, .../env, ...) that reuses the exact same resolution runAgent() itself uses — so what you see here can't drift out of sync with what a real request actually gets, and never returns a model API key.

Global config

Open http://localhost:8787/config — the account-wide counterpart to the Agent config page's per-agent view, deliberately kept separate rather than folded in as a fifth tab there:

Section	What it shows
Models	Every model provider (anthropic, openai, ...) — whether its API key is actually set in the environment, and which of your agents are configured to use it.
Gateways	Whether this machine's Composio CLI session is authenticated (connected, and which email/org), so a missing connection shows up here rather than as a confusing failure in the Agent config page's Tools tab.

An "Agents" link on the page's own sidebar goes straight to /agents/config — the global page intentionally doesn't duplicate or embed the per-agent picture, so there's exactly one place that owns it.

Dev playground

Open http://localhost:8787/playground (optionally ?agent=<name> to preselect one) — pick an agent, chat with it, and watch the loop-step event stream render live instead of reading raw SSE frames. Same /messages/stream route underneath.

Building your own client instead? The playground is one UI on top of a typed event protocol, not the only way to consume a turn — see Protocol for the full LoopEvent catalog, the SSE/ plain-HTTP/CLI transport bindings, and a JSON Schema (protocol/loop-event.schema.json) any language can validate against. core/client.ts and the examples/chatbox/react/examples/chatbox/vue hooks are reference implementations of it.