Quick Start

Installation

Install a2ui-vue in your Vue 3 project:

npm

npm install a2ui-vue

pnpm

pnpm add a2ui-vue

yarn

yarn add a2ui-vue

Prerequisites: Vue 3.4+, Node.js 18+

Basic Usage

1. Provide Configuration (provideA2UI)

Call provideA2UI in your root component (typically App.vue) to inject the Catalog and theme:

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

// Use built-in default configuration
provideA2UI({
  catalog: DEFAULT_CATALOG,
  theme: defaultTheme,
})
</script>

<template>
  <RouterView />
</template>

2. Process Agent Messages (useMessageProcessor)

useMessageProcessor receives the raw message stream from the Agent, parses it, and produces a renderable list of Surfaces:

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

const processor = useMessageProcessor()

// Simulate receiving messages pushed by the Agent (typically from A2A/SSE stream)
function onAgentMessage(rawPayload: unknown) {
  processor.processMessages(rawPayload)
}

// Get all Surfaces (reactive Map)
const surfaces = processor.getSurfaces()
</script>

3. Render Surfaces (A2UISurface)

Pass each entry from surfaces to <A2UISurface> for rendering:

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

Complete Example

Next Steps

• Dive deeper into Vue Renderer Core Concepts
• Browse all Built-in Components
• Check out real-running Sample Demos