VeADK Frontend

​

功能一览

• 创建智能体：当前可通过自定义配置创建智能体，产出可运行的 VeADK 项目（agent.py、requirements.txt 等），并可在线预览、编辑与下载。其他创建方式及其可用范围见 Studio。
• 多模态消息：上传图片、TXT、Markdown、PDF 和视频；用户附件与模型返回的媒体均可预览并随历史会话重新加载。
• 对话与调试：与智能体多轮对话，展示思考过程、工具调用、子智能体移交、Token 与用时；对话支持渲染 ECharts 与 Mermaid 图表（含源码切换和放大查看）、图片放大、视频与音频播放、文件预览和长时任务进度；内置工具（网页搜索、图像生成、视频生成、长期记忆检索、知识库检索）在执行时显示专属图标与运行状态；对话中还会渲染智能体返回的 A2UI 富界面卡片。
• 停止生成：智能体回复过程中，输入框的发送按钮变为停止按钮，点击后中断当前回复。已接收的内容保留在对话中，停止后可立即在同一会话中发送下一条消息。该能力在 veadk frontend 与 veadk studio 的对话页面（含沙箱会话）均生效。
• 上下文用量指示器：输入框发送按钮旁显示当前模型的上下文窗口用量。悬停或聚焦时展开 100 格用量构成图，将上下文占用分为系统与工具（估算）、输入与历史、输出与思考、剩余容量四部分。系统与工具占用为估算值，因为模型使用量统计未单独报告该部分。上下文窗口大小按云服务商和模型名称确定。该能力在 veadk frontend 与 veadk studio 的智能体对话页面均生效。
• 智能体选择器：左上角切换智能体；悬停可查看该智能体的模型与挂载的工具。
• 智能体信息栏：发送第一条消息后，对话右侧工作区展示当前智能体的描述、模型、工具、技能以及可选的多智能体协作拓扑；屏幕较窄时改为从标题栏按钮打开的抽屉，避免遮挡对话内容。
• 技能与子智能体：输入 / 选择当前智能体挂载的技能，输入 @ 把本轮任务交给可选的子智能体。
• 技能中心：从 Skill Hub、本地上传或 AgentKit SkillSpace 选择技能，供创建智能体时使用。
• 历史会话：自动保存、按时间排序，可重新打开或删除。
• 智能搜索：「会话」源检索当前智能体的历史消息；「网页」源调用已挂载的联网搜索工具；「知识库」与「长期记忆」源通过智能体已配置的后端执行语义检索。界面根据智能体实际挂载的能力启用来源，并在结果中标注索引或来源名称及后端类型。
• 消息反馈回流：连接云端 AgentKit Runtime 时，回答下方的赞/踩按钮会将当前问题、回答和反馈状态写入 AgentKit 评测集。每个智能体自动维护 {agent_name}_good_case 与 {agent_name}_bad_case 两个评测集，切换或取消反馈会幂等更新对应样本。反馈按 Runtime 实际的 app 名称关联评测集，并在首选地域查询失败时自动回退到另一个地域。赞/踩按钮旁提供「查看评测案例」入口，可直接跳转到该智能体的评测案例列表并预览当前消息对应的样本。如果标准名称已被云端占用但不可见，Studio 会改用带稳定短后缀的备用名称并在后续反馈中复用；Runtime 不支持 Session 状态更新时，浏览器会保留兼容性缓存。
• 添加 AgentKit 智能体：填入访问地址与 API Key，按 ADK 协议接入远程智能体，接入后出现在选择器中。
• Studio 部署：在同一工作台中检查生成代码，配置地域、消息渠道、网络与环境变量，然后部署到 AgentKit 并查看任务状态。
• 导出会话：每条助手回复旁可将截至该轮的全部输入与输出导出为 PNG 图片或 PDF 文件，支持下载或复制到剪贴板（复制仅在 PNG 格式下可用）。该能力在 veadk frontend 与 veadk studio 的对话页面均生效。
• Tracing 观测：查看本次会话的调用火焰图。
• 登录：支持 SSO 或本地用户名。

​

完成工具 OAuth 授权

​

运行

veadk frontend --dev --agents-dir ./agents --open

​

开发模式（热更新）

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

​

组件预览

cd frontend
npm install
npm run dev:components
# 打开 http://127.0.0.1:5186/components-preview/

​

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

​

前端服务安全限制

• 调试运行会执行生成的项目；仅测试可信内容，并按 Studio 的测试范围限制模型地址和外部资源。
• 远程 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 values = ctx.resolve(node.series);
  const series = Array.isArray(values) ? values.filter(
    (value): value is number => typeof value === "number"
  ) : [];
  return <ol>{series.map((value, index) => (
    <li key={index}>{value.toLocaleString()}</li>
  ))}</ol>;
}