Google ADK 的内置开发者 Web UI，提供 Agent 交互、状态调试、轨迹追踪与性能评估能力。
项目概述#
ADK Web 是 Google 推出的 Agent 开发者工具，隶属于 Google Agent Development Kit (ADK) 生态，旨在解决 AI Agent 构建过程中的调试与评估痛点。该项目明确标注为 "as is" 提供，仅适用于开发与调试阶段，不适合生产环境部署。
核心能力#
- Chat 交互：浏览器内与 Agent 实时对话，发送消息并查看响应
- Session 管理：创建和切换多个会话
- State 检查：开发过程中查看和修改会话状态，辅助排查问题
- Event 历史：全面回溯 Agent 执行期间生成的所有事件
- Tracing 可视化：图形化展示 Agent 执行轨迹与决策流
- Artifacts 查看：查看 Agent 生成的工件
- Evaluations 评估：内置性能评估模块，支持基准测试
- Agent Builder & Assistant：辅助可视化构建 Agent 配置
- Auto-reload：代码变更时自动热重载
前端实现细节#
- 基于 Angular 21 构建，结合 Angular Material 与 CDK
- 集成 CodeMirror 6（含 Python 语言支持）作为代码编辑器
- 引入 @viz-js/viz（Graphviz 渲染）与 ngx-vflow（流程图）实现图与轨迹可视化
- 使用 ngx-markdown 处理 Markdown 渲染
- 通过 ngx-json-viewer 与 vanilla-jsoneditor 处理 JSON 结构化数据展示与编辑
- 引入 yaml ^2.8.0 处理配置解析
- 采用 Karma + Jasmine 作为前端测试框架
前后端通信#
前端通过构建脚本 set-backend.js / clean-backend.js 动态注入后端 API 地址；后端依赖独立的 adk api_server 进程，前端开发时需显式配置 CORS（--allow_origins）以允许跨域请求。
安装与启动#
前置条件：Node.js & npm、Angular CLI、google-adk（Python 或 Java）
方式一：ADK CLI 一键启动
adk web
方式二：手动分离启动
git clone https://github.com/google/adk-web.git
cd adk-web
sudo npm install
npm run serve --backend=http://localhost:8000
# 另一终端
adk api_server --allow_origins=http://localhost:4200 --host=0.0.0.0
CLI 配置选项#
| 选项 | 描述 | 默认值 |
|---|---|---|
--port | 服务端口 | 8000 |
--host | 主机绑定地址 | 127.0.0.1 |
--session_service_uri | 自定义会话存储 URI | 内存 |
--artifact_service_uri | 自定义工件存储 URI | 本地 .adk/artifacts |
--reload/--no-reload | 代码变更自动重载 | true |
配置示例：adk web --port 3000 --session_service_uri "sqlite:///sessions.db"
生态集成#
ADK Web 作为统一的前端控制台，可无缝连接 ADK 多语言后端体系：Python SDK (google/adk-python)、TypeScript SDK (google/adk-js)、Go SDK (google/adk-go)、Java SDK (google/adk-java)。
已知限制#
- 仓库标记为 Pre-GA，截至调研时无正式 Release，
package.json版本号为0.0.0 - README 与官方文档均未明确列出浏览器兼容性要求
adk-web仓库作为独立前端工程与 ADK CLI 内部集成的耦合关系待进一步确认