VeADK Frontend

​

功能一览

• 创建智能体：当前可通过自定义配置创建智能体，产出可运行的 VeADK 项目（agent.py、requirements.txt 等），并可在线预览、编辑与下载。智能模式、模板和工作流入口显示为「敬请期待」，暂不可用。
• 多模态消息：上传图片、TXT、Markdown、PDF 和视频；用户附件与模型返回的媒体均可预览并随历史会话重新加载。
• 对话与调试：与智能体多轮对话，展示思考过程、工具调用、Token 与用时；内置工具（网页搜索、图像生成、视频生成、长期记忆检索、知识库检索）在执行时显示专属图标与运行状态；对话中还会渲染智能体返回的 A2UI 富界面卡片。
• 智能体选择器：左上角切换智能体；悬停可查看该智能体的模型与挂载的工具。
• 智能体信息栏：发送第一条消息后，对话右侧工作区展示当前智能体的描述、模型、工具、技能以及可选的多智能体协作拓扑；屏幕较窄时改为从标题栏按钮打开的抽屉，避免遮挡对话内容。
• 技能与子智能体：输入 / 选择当前智能体挂载的技能，输入 @ 把本轮任务交给可选的子智能体。
• 技能中心：从 Skill Hub、本地上传或 AgentKit SkillSpace 选择技能，供创建智能体时使用。
• 历史会话：自动保存、按时间排序，可重新打开或删除。
• 智能搜索：「会话」源检索当前智能体的历史消息；「网页」源调用已挂载的联网搜索工具；「知识库」与「长期记忆」源通过智能体已配置的后端执行语义检索。界面根据智能体实际挂载的能力启用来源，并在结果中标注索引或来源名称及后端类型。
• 消息反馈回流：连接云端 AgentKit Runtime 时，回答下方的赞/踩按钮会将当前问题、回答和反馈状态写入 AgentKit 评测集。每个智能体自动维护 {agent_name}_good_case 与 {agent_name}_bad_case 两个评测集，切换或取消反馈会幂等更新对应样本。如果标准名称已被云端占用但不可见，Studio 会改用带稳定短后缀的备用名称并在后续反馈中复用；Runtime 不支持 Session 状态更新时，浏览器会保留兼容性缓存。
• 添加 AgentKit 智能体：填入访问地址与 API Key，按 ADK 协议接入远程智能体，接入后出现在选择器中。
• Studio 部署：在同一工作台中检查生成代码，配置地域、消息渠道、网络与环境变量，然后部署到 AgentKit 并查看任务状态。
• Tracing 观测：查看本次会话的调用火焰图。
• 登录：支持 SSO 或本地用户名。

​

完成工具 OAuth 授权

​

运行

cd frontend && npm install && npm run build

veadk frontend --agents-dir examples
# 打开 http://127.0.0.1:8000

​

开发模式（热更新）

veadk frontend --dev --vite --agents-dir examples   # 仅 API，为 Vite 放行 CORS
cd frontend && npm run dev                    # http://localhost:5173，代理 API

​

veadk frontend 命令

​

多模态附件与存储

export VEADK_MEDIA_STORAGE=tos
export DATABASE_TOS_BUCKET="your-bucket"
export DATABASE_TOS_REGION=cn-beijing
export VOLCENGINE_ACCESS_KEY="your-access-key"
export VOLCENGINE_SECRET_KEY="your-secret-key"
veadk frontend --agents-dir examples

​

使用技能与子智能体

​

使用 Studio 部署

veadk studio --host 127.0.0.1 --port 8000

​

认证

veadk frontend --agents-dir examples \
  --oauth2-user-pool "your-user-pool-name" \
  --oauth2-user-pool-client "your-user-pool-client-name"
# 或用 UID，读环境变量 OAUTH2_USER_POOL_ID / OAUTH2_USER_POOL_CLIENT_ID
# --oauth2-user-pool-uid <id> --oauth2-user-pool-client-uid <id>

export OAUTH2_PROVIDER=github
export OAUTH2_CLIENT_ID="your-github-oauth-client-id"
export OAUTH2_CLIENT_SECRET="your-github-oauth-client-secret"
export OAUTH2_REDIRECT_URI=http://127.0.0.1:8000/oauth2/callback
veadk frontend --agents-dir examples

​

前端服务安全限制

• 在线创建项目不直接执行浏览器提交的代码；部署前测试应在受控的本地环境中完成。
• 远程 AgentKit 代理要求提供 API Key，并只接受 HTTPS 的 volceapi.com 域名。
• AgentKit 部署文件必须位于本次项目目录内，绝对路径和跳出目录的相对路径会被拒绝。
• 静态文件只允许从已构建的界面目录读取，不能通过路径跳转读取主机上的其他文件。

​

渲染流程

​

添加企业自定义组件

src/a2ui/components/RevenueChart/
├── RevenueChart.tsx
└── index.ts

import { register } from "../../registry";
import { RevenueChart } from "./RevenueChart";
register("RevenueChart", RevenueChart);

import type { ComponentRendererProps } from "../../registry";

export function RevenueChart({ node, ctx }: ComponentRendererProps) {
  const series = ctx.resolve(node.series as any);
  return <div className="corp-chart">{/* 渲染 series */}</div>;
}