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. See Studio for other creation flows and availability.
• 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, sub-agent handoffs, token usage and timing; conversations render ECharts and Mermaid charts (with source-code switching and zoom), image zoom, video and audio playback, file previews, and long-running task progress; 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.
• Stop generation: while an agent is replying, the composer’s send button becomes a stop button; clicking it cancels only the active response, preserves any content already received, and immediately enables the next turn in the same session. This applies to both the veadk frontend and veadk studio conversation pages, including sandbox conversations.
• Context usage meter: a context usage indicator beside the Send button shows the current model’s context window occupancy. Hovering or focusing it expands a 100-cell usage map that breaks down the context into system and tool overhead (estimated), input and history, output and reasoning, and remaining capacity. System and tool usage is an estimate because the model’s usage metadata does not report it separately. The context window size is determined by the cloud provider and model name. This applies to both the veadk frontend and veadk studio agent conversation pages.
• 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.
• Export conversation: export all inputs and outputs up to an assistant reply as a PNG image or PDF file, with download or copy-to-clipboard support (copy is available only for PNG). This applies to both the veadk frontend and veadk studio conversation pages.
• Tracing: view the call flame graph for the current session.
• Login: SSO or a local username.

​

Complete tool OAuth authorization

​

Running

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

​

Dev mode (hot reload)

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

​

Component preview

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

​

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 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>;
}