{"_id":"@ai-render-lab/ai2render-vue","_rev":"2-511cf5c2fef461a8ea963289c1174e3f","name":"@ai-render-lab/ai2render-vue","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ai-render-lab/ai2render-vue","version":"1.0.0","author":{"name":"joeeeoo"},"license":"ISC","_id":"@ai-render-lab/ai2render-vue@1.0.0","maintainers":[{"name":"joeeeoo","email":"lxyndy@163.com"}],"dist":{"shasum":"8af97d6a60ae23eceed6feb1df5b389ec8515c74","tarball":"https://registry.npmjs.org/@ai-render-lab/ai2render-vue/-/ai2render-vue-1.0.0.tgz","fileCount":1,"integrity":"sha512-24Xpru51TjpDFgFlJnr7qgqlyE3cW8XdtBkB4KY6jCLurvS3zXcue5g2ahL0o8+2BbuXT+CmjKlwiJFJNU6Jxg==","signatures":[{"sig":"MEUCIQDKEmGQ1quCVPeo9ATtA2PpiC+RbvSo144uKOa42JncWAIgE2nS3pjZL/w3Ij9i4JMjMbm9BB7821XQyX6uIK06iCA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":352},"main":"index.js","type":"modules","scripts":{"test":"test:ui"},"_npmUser":{"name":"joeeeoo","email":"lxyndy@163.com"},"repository":{"url":"https://registry.npmjs.org/","type":"git"},"_npmVersion":"11.6.2","description":"test","directories":{},"_nodeVersion":"25.2.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ai2render-vue_1.0.0_1774598895778_0.6055572488314671","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ai-render-lab/ai2render-vue","version":"1.0.1","description":"Vue 3 renderer for Google A2UI protocol — render agent-generated UI components with Tailwind CSS","type":"module","main":"./dist/a2ui-vue.umd.cjs","module":"./dist/a2ui-vue.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/a2ui-vue.js","require":"./dist/a2ui-vue.umd.cjs","types":"./dist/index.d.ts"}},"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview"},"peerDependencies":{"vue":"^3.4.0","tailwindcss":"^3.4.0 || ^4.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.0","typescript":"^5.7.0","vite":"^6.0.0","vite-plugin-dts":"^4.5.0","vue":"^3.5.0","vue-tsc":"^2.2.0"},"keywords":["a2ui","vue","vue3","agent-ui","generative-ui","ag-ui","tailwindcss","ai-agent","google-a2ui"],"license":"MIT","repository":{"type":"git","url":"https://registry.npmjs.org/"},"gitHead":"40b3eb6102e2d49963c7c33b65c7cca48e6ec845","_id":"@ai-render-lab/ai2render-vue@1.0.1","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-UU0A7+5GJQYfWN0TLhJdULBkctc0XR3tDfTCAJ5ZRj1AYB/VVlr2BBHgim0vz9L7Z2t/2LJiQhWZwj9cweUbAA==","shasum":"dd2941f3b6521cdc5ee29baef0055b59d949e51d","tarball":"https://registry.npmjs.org/@ai-render-lab/ai2render-vue/-/ai2render-vue-1.0.1.tgz","fileCount":40,"unpackedSize":202519,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF4OpaV5KBn/ttlgX5TF6unQ+2G6/Zqo2+1wIMBmXukYAiA7X/RIkUn0ARONS2IeBf/kwOTkb0boJ1w5/wNWPcUHrQ=="}]},"_npmUser":{"name":"joeeeoo","email":"lxyndy@163.com"},"directories":{},"maintainers":[{"name":"joeeeoo","email":"lxyndy@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai2render-vue_1.0.1_1774600628775_0.9502970192083426"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-27T08:08:15.636Z","modified":"2026-03-27T08:37:09.315Z","1.0.0":"2026-03-27T08:08:15.967Z","1.0.1":"2026-03-27T08:37:08.994Z"},"license":"MIT","repository":{"type":"git","url":"https://registry.npmjs.org/"},"description":"Vue 3 renderer for Google A2UI protocol — render agent-generated UI components with Tailwind CSS","maintainers":[{"name":"joeeeoo","email":"lxyndy@163.com"}],"readme":"<p align=\"center\">\n  <strong style=\"font-size:2rem\">A2 <span style=\"color:#7c3aed\">UI</span> Vue</strong>\n</p>\n\n<h1 align=\"center\">A2UI Vue</h1>\n\n<p align=\"center\">\n  A Vue 3 renderer and composer for the <a href=\"https://google.github.io/A2UI/\">Google A2UI protocol</a> — stream structured UI from AI agents to your Vue/Nuxt app in real time.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@vkdevfolio/a2ui-vue\"><img src=\"https://img.shields.io/npm/v/@vkdevfolio/a2ui-vue?color=7c3aed&label=@vkdevfolio/a2ui-vue\" alt=\"npm version\" /></a>\n  <a href=\"https://vuejs.org/\"><img src=\"https://img.shields.io/badge/Vue-3.4%2B-42b883?logo=vue.js\" alt=\"Vue 3\" /></a>\n  <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"MIT License\" /></a>\n  <a href=\"CONTRIBUTING.md\"><img src=\"https://img.shields.io/badge/PRs-welcome-brightgreen\" alt=\"PRs Welcome\" /></a>\n</p>\n\n<p align=\"center\">\n  <a href=\"#-quick-start\">Quick Start</a> ·\n  <a href=\"#-components\">Components</a> ·\n  <a href=\"#-protocol\">Protocol</a> ·\n  <a href=\"#-examples\">Examples</a> ·\n  <a href=\"CONTRIBUTING.md\">Contributing</a>\n</p>\n\n---\n\n## What is A2UI?\n\n[Google's A2UI protocol](https://google.github.io/A2UI/) lets AI agents stream rich, interactive UI to a frontend application — without the frontend knowing anything about the AI. The agent produces structured JSON describing a widget tree; the renderer turns it into real Vue components.\n\n**A2UI Vue** is the first open-source Vue 3 implementation of this protocol. It ships:\n\n- 🎨 **`<A2StaticRenderer>`** — render any A2UI JSON without an agent (perfect for galleries and prototyping)\n- ⚡ **`<A2Surface>`** — live SSE connection to an A2UI-speaking agent; components stream in and update reactively\n- 🧩 **24 components** — layout, content, input, navigation — all Apple-quality polished\n- 🌗 **Dark & light mode** — seamless CSS-variable-based theming\n- 🔌 **LLM-agnostic** — works with OpenAI, Anthropic, Gemini — any backend that speaks A2UI\n\n---\n\n## Screenshots\n\n### Gallery — Light Mode\n\n![Gallery light mode](docs/screenshots/gallery-light.png)\n\n### Gallery — Dark Mode\n\n![Gallery dark mode](docs/screenshots/gallery-dark.png)\n\n### Component Reference\n\n![Components page](docs/screenshots/components.png)\n\n### Icons Browser (316 Material Icons)\n\n![Icons page](docs/screenshots/icons.png)\n\n### AI Designer — JSON Editor + Live Preview\n\n![Designer page](docs/screenshots/designer.png)\n\n> **Add screenshots:** Drop PNG/JPG files into `docs/screenshots/` with the names above, or replace the paths with your own hosted image URLs.\n\n---\n\n## ✨ Features\n\n| Feature | Details |\n|---|---|\n| **A2UI v0.8 + v0.10** | Supports both protocol versions simultaneously |\n| **Streaming SSE** | Components render and update token-by-token as the agent streams |\n| **Reactive data model** | JSON Pointer paths (`/user/name`) bind live to any component |\n| **Static rendering** | `<A2StaticRenderer>` for galleries, demos, and testing |\n| **24 components** | Row, Column, List, Card, Tabs, Modal, Text, Image, Icon, Video, AudioPlayer, Badge, Progress, Rating, Avatar, Alert, Stat, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput, Button, Divider |\n| **Custom media players** | Full custom video and audio player UIs (no browser defaults) |\n| **Glassmorphism** | `backdrop-filter: blur()` cards, modals, and overlays |\n| **316 Material Icons** | Searchable icon browser built-in |\n| **Python backend example** | FastAPI + LangGraph + multi-LLM factory |\n\n---\n\n## 🚀 Quick Start\n\n### 1. Install\n\n```bash\nnpm install @vkdevfolio/a2ui-vue\n# or\npnpm add @vkdevfolio/a2ui-vue\n```\n\n### 2. Register the plugin\n\n```ts\n// main.ts\nimport { createApp } from 'vue'\nimport { A2UIPlugin } from '@vkdevfolio/a2ui-vue'\nimport '@vkdevfolio/a2ui-vue/style.css'\nimport App from './App.vue'\n\ncreateApp(App)\n  .use(A2UIPlugin)\n  .mount('#app')\n```\n\n### 3. Render a static widget\n\n```vue\n<template>\n  <A2StaticRenderer :components=\"widgetJson\" />\n</template>\n\n<script setup>\nimport { A2StaticRenderer } from '@vkdevfolio/a2ui-vue'\n\nconst widgetJson = [\n  {\n    id: 'root',\n    component: {\n      Card: { child: 'col', padding: 20 }\n    }\n  },\n  {\n    id: 'col',\n    component: {\n      Column: {\n        children: { explicitList: ['title', 'body'] }\n      }\n    }\n  },\n  {\n    id: 'title',\n    component: { Text: { text: 'Hello A2UI!', variant: 'h2' } }\n  },\n  {\n    id: 'body',\n    component: { Text: { text: 'Rendered from JSON in Vue 3.' } }\n  }\n]\n</script>\n```\n\n### 4. Connect to a live agent\n\n```vue\n<template>\n  <A2Surface agent-url=\"http://localhost:8000/a2ui\" />\n</template>\n\n<script setup>\nimport { A2Surface } from '@vkdevfolio/a2ui-vue'\n</script>\n```\n\n---\n\n## 🧩 Components\n\n### Layout\n\n| Component | Description |\n|---|---|\n| `Row` | Horizontal flex container with alignment/distribution |\n| `Column` | Vertical flex container |\n| `List` | Repeating list with template children |\n| `Card` | Glassmorphic card with optional background color |\n| `Tabs` | Tab bar with sliding indicator |\n| `Modal` | Overlay dialog with blur backdrop and spring animation |\n| `Divider` | Horizontal or vertical separator |\n\n### Content\n\n| Component | Description |\n|---|---|\n| `Text` | Typography scale: h1–h5, body, caption, label + inline markdown |\n| `Image` | Lazy-loading image with shimmer skeleton; variants: avatar, icon, smallFeature, mediumFeature, largeFeature, header, cover, banner |\n| `Icon` | Material Icons by name with size and color props |\n| `Video` | Full custom HTML5 video player: seek bar, buffered track, volume, fullscreen, auto-hide controls |\n| `AudioPlayer` | Custom audio player: spinning cover disc, ±10s skip, progress bar, volume popup |\n| `Badge` | Pill label — success / warning / error / info / neutral |\n| `Progress` | Animated linear or circular progress bar |\n| `Rating` | Interactive star rating (0–5) with half stars |\n| `Avatar` | Image or initials avatar with status dot |\n| `Alert` | Severity-colored alert — info / success / warning / error; dismissible |\n| `Stat` | Large stat value + label + trend direction badge |\n\n### Input\n\n| Component | Description |\n|---|---|\n| `TextField` | Floating-label text / number / password / textarea with focus ring |\n| `CheckBox` | Custom animated checkbox with gradient fill |\n| `ChoicePicker` | Chips, radio, or checkbox picker with optional search |\n| `Slider` | Custom range slider with value tooltip |\n| `DateTimeInput` | Date / time / datetime picker with floating label |\n\n### Navigation\n\n| Component | Description |\n|---|---|\n| `Button` | Primary (gradient), default (border), or borderless — with press animation |\n\n---\n\n## 📡 Protocol\n\nA2UI Vue supports both **v0.8** and **v0.10** of the A2UI protocol simultaneously.\n\n### Server → Client messages\n\n| v0.10 | v0.8 | Description |\n|---|---|---|\n| `createSurface` | `beginRendering` | Start a new widget surface |\n| `updateComponents` | `surfaceUpdate` | Add/update component definitions |\n| `updateDataModel` | `dataModelUpdate` | Update reactive data bound to components |\n| `deleteSurface` | — | Remove a surface |\n\n### Dynamic values\n\nComponents accept static strings or dynamic references:\n\n```json\n{ \"text\": \"Hello\" }\n{ \"text\": { \"path\": \"/user/name\" } }\n{ \"text\": { \"literalString\": \"World\" } }\n```\n\n### Actions\n\nUser interactions post back to the agent:\n\n```json\n{\n  \"action\": \"button-click\",\n  \"surfaceId\": \"my-surface\",\n  \"componentId\": \"submit-btn\",\n  \"payload\": {}\n}\n```\n\n---\n\n## 🐍 Python Backend Example\n\nThe `example-python/` directory contains a FastAPI + LangGraph backend:\n\n- **Multi-LLM factory** — switch between OpenAI, Anthropic, and Gemini via `LLM_PROVIDER` env var\n- **Designer sub-agent** — generates valid A2UI JSON from natural language descriptions\n- **Built-in tools** — weather card, user profile, task manager, login form, stats dashboard\n\n```bash\ncd example-python\npip install -r requirements.txt\ncp .env.example .env   # add your API key\npython server.py\n```\n\n```env\nLLM_PROVIDER=openai   # openai | anthropic | google\nOPENAI_API_KEY=sk-...\n# ANTHROPIC_API_KEY=sk-ant-...\n# GOOGLE_API_KEY=...\n```\n\n---\n\n## 🖥️ Nuxt Example App\n\nThe `example-nuxt/` directory is a full Composer experience:\n\n| Page | Description |\n|---|---|\n| **Create** | Describe a widget in chat — the agent streams it live |\n| **Gallery** | 20+ pre-built widgets rendered from static A2UI JSON |\n| **Designer** | JSON editor + live preview + AI assistant |\n| **Components** | Full component reference with props tables and live previews |\n| **Icons** | Searchable grid of 316 Material Icons |\n\n```bash\ncd example-nuxt\npnpm install\npnpm dev\n# open http://localhost:3000\n```\n\n> **Note:** Requires Node.js 18+. The `dev` script includes `--max-old-space-size=4096` for larger builds.\n\n---\n\n## 🏗️ Repository Structure\n\n```\na2ui-vue/\n├── src/                    # NPM package source\n│   ├── components/\n│   │   ├── layout/         # Row, Column, List, Card, Tabs, Modal, Divider\n│   │   ├── content/        # Text, Image, Icon, Video, AudioPlayer, Badge…\n│   │   ├── input/          # TextField, CheckBox, ChoicePicker, Slider…\n│   │   └── navigation/     # Button\n│   ├── composables/        # useA2UI, useSurface, useDataModel\n│   ├── protocol/           # SSE parser + action emitter\n│   ├── functions/          # Built-in validation & formatting functions\n│   └── theme/              # CSS variable tokens (dark/light)\n├── example-nuxt/           # Nuxt 3 Composer app\n├── example-python/         # FastAPI + LangGraph backend\n└── docs/                   # Documentation assets & screenshots\n```\n\n---\n\n## 🎨 Theming\n\nAll components use CSS custom properties. Override in your app:\n\n```css\n:root {\n  --a2ui-primary: #7c3aed;\n  --a2ui-bg-surface: #ffffff;\n  --a2ui-text: #111113;\n  --a2ui-card-bg: rgba(255, 255, 255, 0.72);\n  --a2ui-card-border: rgba(0, 0, 0, 0.08);\n}\n\n.dark {\n  --a2ui-bg-surface: #14141f;\n  --a2ui-text: #e8e8f0;\n  --a2ui-card-bg: rgba(37, 37, 64, 0.8);\n}\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are very welcome! This project is in active development.\n\n### Ways to contribute\n\n- 🐛 **Bug reports** — open an issue with reproduction steps\n- 💡 **Feature requests** — describe your use case in an issue\n- 🧩 **New components** — follow the component pattern in `src/components/`\n- 📝 **Documentation** — improve examples, fix typos, add usage notes\n- 🔌 **Backend integrations** — add TypeScript/Node.js, Go, or other backends\n- 🎨 **Gallery widgets** — add new pre-built widget examples\n\n### Development setup\n\n```bash\n# Clone\ngit clone https://github.com/your-org/a2ui-vue.git\ncd a2ui-vue\n\n# Install + build package\npnpm install\npnpm build\n\n# Run example app\ncd example-nuxt\npnpm install\npnpm dev\n```\n\n### Adding a component\n\n1. Create `src/components/<category>/A2YourComponent.vue`\n2. Register in `src/components/A2Renderer.vue`\n3. Export from `src/index.ts`\n4. Add a TypeScript interface in `src/types.ts`\n5. Add a preview in `example-nuxt/pages/components.vue`\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide, code style, and PR checklist.\n\n---\n\n## 📄 License\n\nMIT — see [LICENSE](LICENSE) for details.\n\n---\n\n## 🙏 Acknowledgements\n\n- [Google A2UI](https://google.github.io/A2UI/) — the protocol\n- [CopilotKit](https://copilotkit.ai/) — inspiration from their React A2UI Composer\n- [Material Icons](https://fonts.google.com/icons) — icon set\n- [Big Buck Bunny](https://peach.blender.org/) — Blender Foundation (CC), used in demos\n\n---\n\n<p align=\"center\">Built with ❤️ &nbsp;·&nbsp; <a href=\"https://github.com/your-org/a2ui-vue/stargazers\">Star it if you find it useful ⭐</a></p>\n","readmeFilename":"README.md","keywords":["a2ui","vue","vue3","agent-ui","generative-ui","ag-ui","tailwindcss","ai-agent","google-a2ui"]}