AI Agent Components

@varo-ui/ai provides events, streaming control, and Markdown contracts. Registry installs editable UI source.

Install

pnpm add @varo-ui/ai
pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
pnpm dlx @varo-ui/cli add --target weapp components/agent-ui

# Blocks
pnpm dlx @varo-ui/cli add --target h5 blocks/agent-chat
pnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat
pnpm dlx @varo-ui/cli add --target h5 blocks/agent-workspace
pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace

Imports

Use named exports from @/components/agent-ui on H5. Mini programs import the matching .vue file.

Demo

CHAT

Chat

idle

VVaro Agent

V

Varo AgentDocs

我是 Varo Agent UI 文档演示。下面的回答由真实增量事件流渲染。

RAG

RAG

LIVE

检索增强生成

流程已完成

2.9 s

1. 理解问题380 ms已完成

   确认本次查询与来源范围

   How can we make signup failures recoverable?

2. 向量编码650 ms已完成

   将问题转换为检索表示
3. 检索来源540 ms已完成

   查找与问题相关的片段
4. 组装上下文580 ms已完成

   将来源片段组织为上下文

   1. 1来源 1：客服工单
   2. 2来源 2：会话回放
5. 引用回答720 ms已完成

   生成可追溯到来源的回答

   验证链接过期后应提供新链接。 会话回放也显示缺少恢复入口。

RAG boundary

AgentRagPipeline only renders controlled state and emits run, cancel, and selectSource. Product code owns retrieval, model requests, and source authorization.

Blocks

• AgentChat: conversation, streaming, tools, approvals, and input.
• AgentWorkspace: sources, retrieval, tasks, versions, and layout.

Platforms

H5 uses RAF scheduling; mini programs use timed frames. Both consume the same safe Markdown AST.