快速上手

安装

在你的 Vue 3 项目中安装 a2ui-vue：

npm

npm install a2ui-vue

pnpm

pnpm add a2ui-vue

yarn

yarn add a2ui-vue

前置要求：Vue 3.4+，Node.js 18+

基础用法

1. 提供配置（provideA2UI）

在应用根组件（通常是 App.vue）中调用 provideA2UI，注入 Catalog 和主题：

<script setup lang="ts">
import { provideA2UI, DEFAULT_CATALOG,defaultTheme } from 'a2ui-vue'
import 'a2ui-vue/dist/a2ui-vue.css'

// 使用内置默认配置
provideA2UI({
  catalog: DEFAULT_CATALOG,
  theme: defaultTheme,
})
</script>

<template>
  <RouterView />
</template>

2. 处理 Agent 消息（useMessageProcessor）

useMessageProcessor 接收来自 Agent 的原始消息流，解析后产出可渲染的 Surface 列表：

<script setup lang="ts">
import { useMessageProcessor } from 'a2ui-vue'

const processor = useMessageProcessor()

// 模拟接收 Agent 推送的消息（通常来自 A2A/SSE 流）
function onAgentMessage(rawPayload: unknown) {
  processor.processMessages(rawPayload)
}

// 获取所有 Surface（响应式 Map）
const surfaces = processor.getSurfaces()
</script>

3. 渲染 Surface（A2UISurface）

将 surfaces 中的每个条目交给 <A2UISurface> 渲染：

<template>
  <A2UISurface
    v-for="[surfaceId, surface] in surfaces"
    :key="surfaceId"
    :surface-id="surfaceId"
    :surface="surface"
  />
</template>

完整示例

下一步

• 深入了解 Vue Renderer 核心概念
• 浏览所有 内置组件
• 查看真实运行的 示例 Demo