a2ui-vue

a2ui-vue

A Vue 3 renderer for A2UI (Agent-to-UI) protocol.

a2ui-vue is a community Vue 3 renderer for the A2UI (Agent-to-UI) open protocol.
It enables AI agents to express UI intent as structured JSON and have it rendered as rich, interactive components inside any Vue 3 application — with no HTML/CSS knowledge required by the agent.

📖 Documentation · ⚡ Quick Start · 🌐 中文说明

Usage

npm install a2ui-vue

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { provideA2UI, DEFAULT_CATALOG, defaultTheme } from 'a2ui-vue'
import 'a2ui-vue/dist/a2ui-vue.css'

const app = createApp(App)

provideA2UI({
  app,
  catalog: DEFAULT_CATALOG,
  theme: defaultTheme,
})

app.mount('#app')

<script setup lang="ts">
import { A2UISurface, useMessageProcessor} from 'a2ui-vue';
import 'a2ui-vue/dist/vue.css';


const processor = useMessageProcessor();

// Process messages from your agent
processor.processMessages(messages);

// Get surfaces to render
const surfaces = processor.getSurfaces();
</script>

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

Components

The library provides the following components:

• A2UISurface - The main surface component
• A2UIRenderer - Dynamic component renderer
• Layout: A2UIRow, A2UIColumn, A2UICard, A2UIList
• Content: A2UIText, A2UIImage, A2UIIcon, A2UIVideo, A2UIAudio
• Input: A2UIButton, A2UITextField, A2UICheckbox, A2UISlider, A2UIMultipleChoice, A2UIDateTimeInput
• Navigation: A2UITabs, A2UIModal
• Utility: A2UIDivider

Development & Examples

To view interactive examples of all components:

# Install dependencies
pnpm  install

# Start development server with examples
pnpm run dev

Building

# Build the library
npm run build