The built-in developer Web UI for Google Agent Development Kit (ADK), providing agent interaction, state debugging, execution tracing, and performance evaluation capabilities.
Overview#
ADK Web is an agent developer tool introduced by Google as part of the Agent Development Kit (ADK) ecosystem, designed to address debugging and evaluation pain points in AI Agent building. The project is explicitly provided "as is" and is limited to development and debugging — not suitable for production deployment.
Core Capabilities#
- Chat Interaction: Real-time in-browser conversation with Agents
- Session Management: Create and switch between multiple sessions
- State Inspection: View and modify session state during development
- Event History: Full retrospective of all events generated during Agent execution
- Tracing Visualization: Graphical display of Agent execution traces and decision flows
- Artifacts Viewer: Inspect artifacts generated by Agents
- Evaluations: Built-in performance assessment module for benchmarking
- Agent Builder & Assistant: Assisted visual Agent configuration building
- Auto-reload: Automatic hot-reload on code changes
Frontend Implementation#
- Built on Angular 21 with Angular Material and CDK
- Integrates CodeMirror 6 (with Python language support) as code editor
- Uses @viz-js/viz (Graphviz rendering) and ngx-vflow (flowcharts) for graph and trace visualization
- ngx-markdown for Markdown rendering
- ngx-json-viewer and vanilla-jsoneditor for JSON structured data display and editing
- yaml ^2.8.0 for configuration parsing
- Karma + Jasmine as frontend testing framework
Frontend-Backend Communication#
The frontend dynamically injects the backend API address via build scripts set-backend.js / clean-backend.js. The backend relies on a separate adk api_server process, requiring explicit CORS configuration (--allow_origins) during frontend development.
Installation & Startup#
Prerequisites: Node.js & npm, Angular CLI, google-adk (Python or Java)
Option 1: ADK CLI one-command launch
adk web
Option 2: Manual separate launch
git clone https://github.com/google/adk-web.git
cd adk-web
sudo npm install
npm run serve --backend=http://localhost:8000
# In another terminal
adk api_server --allow_origins=http://localhost:4200 --host=0.0.0.0
CLI Configuration Options#
| Option | Description | Default |
|---|---|---|
--port | Service port | 8000 |
--host | Host bind address | 127.0.0.1 |
--session_service_uri | Custom session storage URI | In-memory |
--artifact_service_uri | Custom artifact storage URI | Local .adk/artifacts |
--reload/--no-reload | Auto-reload on code changes | true |
Example: adk web --port 3000 --session_service_uri "sqlite:///sessions.db"
Ecosystem Integration#
ADK Web serves as a unified frontend console, seamlessly connecting to ADK's multi-language backend ecosystem: Python SDK (google/adk-python), TypeScript SDK (google/adk-js), Go SDK (google/adk-go), and Java SDK (google/adk-java).
Known Limitations#
- Marked as Pre-GA with no formal Release as of research time;
package.jsonversion is0.0.0 - Browser compatibility requirements not explicitly listed in README or official docs
- The coupling relationship between the
adk-webrepository as a standalone frontend project and ADK CLI internal integration needs further confirmation