ADK Dev Console
The Dev Console is a local app served at port 3001 (by default, but can be customized) during adk dev. It gives developers real-time visibility into their agent's behavior — conversations, execution traces, data, integrations, and configuration.
The Dev Console is a singleton shared dashboard: one UI server per user, with multiple adk dev agents registering and deregistering dynamically. Developers can switch between running agents in the sidebar, toggle between dev and prod targets, and connect to deployed Cloud bots — all from the same browser tab.
When to Use This Skill
Activate when users ask about:
- UI concepts — "What are Agent Steps?", "What does the Observe tab show?", "What is a turn?", "What is the component registry?", "What is the Agent Map?"
- Agent(0) UI — "What are the Tasks under Agent(0)?", "Where did the todo list come from?", "Why is Agent(0) showing task progress?"
- Dev Console navigation — "What tabs are available?", "Where do I find traces?", "How do I test RAG?"
- Reading execution data — "What do the steps mean?", "Why is my step red?", "What's the cost shown?"
- Component registry — "Where do I find custom components?", "How do I install a component?", "What components are available?"
- Multi-agent dashboard — "How do I switch between agents?", "How do I run multiple agents?", "What does the agent selector show?", "How do I see which agents are running?"
- Console modes and targets — "What's the difference between dev and prod?", "How do I connect to a Cloud bot?", "What is Cloud Dev Console?"
- Agent management CLI — "How do I list running agents?", "How do I stop an agent?", "What does
adk psshow?", "How do I open the dashboard?" - Specific pages — "How do I use the evals page?", "Where do I configure integrations?", "How do I search knowledge?"
- Comparing UI vs CLI — "Should I use the Dev Console or CLI for debugging?"
- Mentions of
localhost:3001, "dev console", "Dev Console", "component registry", "agent selector", "agent picker", "agent map", "Cloud Dev Console", or specific tab names (Chat, Build, Components, Data, Test, Observe, Config)
Available Documentation
How to Answer
Match depth to the question:
- "What is X?" (e.g., "What are Agent Steps?") → One sentence definition + what the user sees. Don't dump the full data model.
- "Where do I find X?" → Name the tab group and page, give the URL path.
- "How do I read X?" → Explain the visual hierarchy and what each element means.
- "What does this mean?" (pointing at something in the UI) → Identify the component, explain its meaning.
Quick Reference
Tab Groups
Agent(0) Task Dock
When Agent(0) uses its todo tool, the panel shows a compact Tasks dock with completed/total count, the active task, and an expandable task list. Status icons map to pending, in progress, completed, and cancelled; priorities are shown as low/medium/high chips.
Multi-Agent Sidebar
The sidebar header shows the currently selected agent with a status indicator and mode pill (dev/prod/cloud). Clicking it opens the Agent Selector dropdown:
- Active agents — all running local agents with status dot, name, project path, and a close button
- Cloud Dev Console — switch to a deployed Botpress Cloud bot (workspace + bot picker)
- Recent projects — previously opened projects not currently running
- Footer actions — Create new project, Open existing, Switch environment (dev↔prod), About
Agent Steps (Chat Page)
The right panel of the Chat page shows Agent Steps — a real-time visualization of what the agent did to process each message.
Hierarchy: Turn → Iterations → Tools / Messages / State Mutations
- Turn = one conversation exchange (user message → agent processing → response)
- Iteration = one loop of the autonomous agent (think → decide → act)
- Tool = a tool call within an iteration (violet card)
- Message = a bot message sent (blue card)
- State Mutation = a state change (teal card, shows before/after)
Status indicators: ✓ green = ok, ✗ red = error, ⟳ blue spinning = running
AI metrics per iteration: model name, input/output tokens, cost (USD)
