VeADK Frontend

​

What it can do

• Create agents: custom configuration is the available project-creation flow, producing a runnable VeADK project (agent.py, requirements.txt, and so on) that you can preview, edit, and download. Intelligent, template, and workflow entries are marked as coming soon and cannot be selected.
• Multimodal messages: upload images, TXT, Markdown, PDF, and video; both user attachments and model-returned media can be previewed and restored from history.
• Chat and debug: multi-turn conversations showing thinking, tool calls, token usage and timing; built-in tools (web search, image generation, video generation, memory retrieval, knowledge-base retrieval) display dedicated icons and running status while executing; conversations also render the A2UI rich-UI cards an agent returns.
• Agent picker: switch agents from the top-left; hover an agent to see its model and mounted tools.
• Agent information rail: after the first message, the conversation’s right workspace shows the current agent’s description, model, tools, skills, and an optional multi-agent topology. On narrower screens it opens from a title-bar button as a drawer so the transcript is not overlapped.
• Skills and sub-agents: type / to select a mounted skill or @ to delegate the turn to an eligible sub-agent.
• Skill center: select skills from Skill Hub, a local upload, or an AgentKit SkillSpace while creating an agent.
• Session history: auto-saved, time-sorted, reopen or delete.
• Smart search: Session searches the current agent’s message history, Web calls its mounted web-search tool, and Knowledge and Memory perform semantic retrieval through the configured backends. The interface enables only sources available to the agent and labels results with the index or source name and backend type.
• Message feedback: when connected to a cloud AgentKit Runtime, the like/dislike controls below each answer write the current question, answer, and feedback state to AgentKit evaluation sets. Each agent gets stable {agent_name}_good_case and {agent_name}_bad_case sets; changing or cancelling a rating updates the item idempotently. Feedback is associated with the Runtime’s actual app name and automatically falls back to the alternate region when the primary region query fails. A “View evaluation cases” button next to the like/dislike controls opens the agent’s evaluation case list and previews the sample for the current message. If the standard name is reserved but hidden by the service, Studio uses and reuses a deterministic suffixed name. If a Runtime does not expose Session state updates, the browser keeps a compatibility cache.
• Add an AgentKit agent: paste a URL and API key to connect a remote agent over the ADK protocol; it then appears in the picker.
• Studio deployment: inspect generated code, configure the region, channel, network, and environment variables, deploy to AgentKit, and monitor the task from the same workbench.
• Tracing: view the call flame graph for the current session.
• Login: SSO or a local username.

​

Complete tool OAuth authorization

​

Run

cd frontend && npm install && npm run build

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

​

Dev mode (hot reload)

veadk frontend --dev --vite --agents-dir examples   # API only, CORS for Vite
cd frontend && npm run dev                    # http://localhost:5173, proxies API

​

The veadk frontend command

​

Multimodal attachments and storage

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

​

Use skills and sub-agents

​

Deploy with Studio

veadk studio --host 127.0.0.1 --port 8000

​

Authentication

veadk frontend --agents-dir examples \
  --oauth2-user-pool "your-user-pool-name" \
  --oauth2-user-pool-client "your-user-pool-client-name"
# or by UID (env 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

​

Frontend security restrictions

• The project-creation flow does not execute code submitted by the browser. Test generated code in a controlled local environment before deployment.
• The remote AgentKit proxy requires an API key and accepts only HTTPS volceapi.com hosts.
• AgentKit deployment files must remain inside the current project directory. Absolute paths and relative paths that escape it are rejected.
• Static files can be read only from the built UI directory; path traversal cannot read other host files.

​

Rendering flow

​

Adding a custom (enterprise) component

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">{/* render series */}</div>;
}