外观

AI Agent 组件 ​

@varo-ui/ai 提供事件、流式控制和 Markdown 协议；UI 通过 Registry 安装为可编辑源码。

安装 ​

bash
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

导入

H5 从 @/components/agent-ui 命名导入；小程序从对应 .vue 文件导入。

演示 ​

CHAT

Chat 模式

idle
Varo Agent
Varo Agent

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

RAG

RAG 模式

LIVE

检索增强生成

流程已完成
2.9 s
  1. 理解问题380 ms已完成

    确认本次查询与来源范围

    如何让注册失败的用户顺利恢复流程？

  2. 向量编码650 ms已完成

    将问题转换为检索表示

  3. 检索来源540 ms已完成

    查找与问题相关的片段

  4. 组装上下文580 ms已完成

    将来源片段组织为上下文

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

    生成可追溯到来源的回答

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

RAG 边界

AgentRagPipeline 只渲染受控状态并触发 run、cancel、selectSource；检索、模型请求和来源授权由业务层实现。

Blocks ​

  • AgentChat：对话、流式回答、工具、审批和输入。
  • AgentWorkspace：来源、检索、任务、版本和多种布局。

平台

H5 使用 RAF 调度；小程序使用定时帧调度。两端共用安全 Markdown AST。