a2ui-vue is a community Vue 3 renderer for the A2UI (Agent-to-UI) open protocol, fully supporting the official A2UI v0.9 specification.
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 · 🌐 中文说明

• Product: Vue 3 renderer for the A2UI (Agent-to-UI) protocol
• Input: structured A2UI JSON messages generated by AI agents or backend services
• Output: rich, interactive Vue user interfaces
• Best for: generative UI, agent UX, AI copilots, tool-driven workflows, structured frontend rendering
• Stack: Vue 3, TypeScript, Composition API, extensible component catalog
• Compatibility: Fully supports the official A2UI v0.9 specification (Surface management, component rendering, DataModel binding, function calls, and more). v0.8 specs are included in the repository for reference
• Version mapping: Use a2ui-vue@0.8.x for A2UI v0.8 specification; use a2ui-vue@0.9.x for A2UI v0.9 specification

• Why a2ui-vue?
• What is A2UI?
• Installation
• Quick Start
• Use Cases
• Documentation Map
• FAQ
• Monorepo Structure
• Available Scripts
• Demo Applications

• Decouples agent logic from frontend implementation details
• Lets AI agents describe interface intent with structured JSON instead of raw HTML
• Gives Vue teams a native renderer with TypeScript, theming, and component reuse
• Makes agent-generated UI more deterministic, inspectable, and maintainable

A2UI (Agent-to-UI) is an open protocol that defines how AI agents communicate UI intent to a frontend renderer. Instead of generating raw HTML/CSS, an agent emits typed JSON messages ("show a card with title X and a list of Y"). The renderer translates those messages into real visual components.

AI Agent  ──(A2UI JSON)──►  a2ui-vue Renderer  ──►  User Interface

a2ui-vue is the community Vue 3 implementation of this protocol:

• 20+ built-in components (layout, content, media, inputs)
• Composables: provideA2UI, useMessageProcessor, useA2UIConfig
• Extensible component Catalog & theme system
• Full TypeScript support, ESM + CJS dual build
• Compatible with Google's official Angular and Lit A2UI renderers

npm install a2ui-vue
# or
pnpm add a2ui-vue

Requirements: Vue 3.4+, Node.js 18+

// 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')

<!-- App.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import { A2UISurface, useMessageProcessor } from 'a2ui-vue'

const processor = useMessageProcessor()

// Feed agent messages and render
processor.processMessages(messages)

const surfaces = computed(() => Array.from(processor.getSurfaces()))
</script>

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

• AI chat applications that need structured cards, lists, forms, and media blocks
• Internal copilots that generate task-oriented workflow UIs from tool outputs
• Agent platforms that need a protocol-first generative UI renderer for Vue 3
• Systems that want consistent rendering across model providers and agent implementations

a2ui-vue is a Vue 3 renderer for the A2UI open protocol. It turns structured JSON messages from AI agents into real, interactive Vue components.

A2UI stands for Agent-to-UI. It is a protocol for describing UI intent in a structured, renderer-agnostic format.

The agent produces structured UI data rather than raw markup. The renderer owns presentation, theming, and component behavior, which improves consistency and maintainability.

Yes. Any model or agent system that can produce A2UI-compliant JSON can work with a2ui-vue.

Yes. You can extend the default catalog and inject your own components through the configuration layer.

a2ui-vue/
├── packages/
│   ├── vue-renderer/       # a2ui-vue — Vue 3 renderer (main package)
│   └── web_core/           # @a2ui/web_core — protocol core & types
├── node-a2ui/
│   ├── agent_sdks/         # @a2ui/agent-sdks — Node.js agent toolkit
│   └── a2a_agents/         # Agent implementation samples
├── samples/
│   ├── agent/              # Server-side agent samples
│   │   ├── component_gallery/
│   │   ├── contact_lookup/
│   │   └── restaurant_finder/
│   └── client/             # Vue frontend client samples
│       ├── gallery/
│       ├── contact/
│       └── restaurant/
├── specification/          # A2UI protocol spec (v0.8 ~ v0.10)
└── docs/                   # VitePress documentation site

MIT