@ctgh/a2ui-vue

@ctgh/a2ui-vue

Vue 3 renderer and wrapper library for A2UI v0.9.

完整使用说明见仓库 docs/usage.md。
发版流程见 docs/publishing.md。

What it exports

• A2uiSurface — renders an A2UI SurfaceModel
• basicCatalog — Vue implementations for the A2UI basic catalog (18 components)
• A2uiPlugin / createA2uiPlugin — Vue plugin helpers
• createA2uiComponent — helper for building custom Vue A2UI components
• Core A2UI types and models re-exported from @ctgh/a2ui-web-core (MessageProcessor, Catalog, etc.)

Installation

Install the Vue wrapper and Vue runtime in one step:

npm install @ctgh/a2ui-vue vue

That is the only install step for normal apps; @ctgh/a2ui-web-core comes in transitively through @ctgh/a2ui-vue.

Requirements: Node.js ≥ 20, Vue ^3.5.39

Quick start

import { MessageProcessor, basicCatalog } from '@ctgh/a2ui-vue';

const processor = new MessageProcessor([basicCatalog]);
processor.processMessages([{/* A2UI messages */}]);

<template>
  <A2uiSurface :surface="surface" />
</template>

<script setup lang="ts">
import { A2uiSurface } from '@ctgh/a2ui-vue';
import type { SurfaceModel } from '@ctgh/a2ui-vue';

defineProps<{
  surface: SurfaceModel;
}>();
</script>

Global plugin

import { createApp } from 'vue';
import App from './App.vue';
import { A2uiPlugin } from '@ctgh/a2ui-vue';

createApp(App).use(A2uiPlugin).mount('#app');

The plugin registers A2uiSurface, basic catalog components, and injects default styles.

Extending the catalog

import { createA2uiComponent, TextApi, Catalog, BASIC_FUNCTIONS } from '@ctgh/a2ui-vue';

export const MyText = createA2uiComponent(TextApi, ({ props }) => props.text);

const catalog = new Catalog('https://example.com/my-catalog.json', [MyText], BASIC_FUNCTIONS);

Playground

A runnable demo lives in packages/examples/playground (monorepo only, not published).

License

MIT (@ctgh/a2ui-vue). Depends on @ctgh/a2ui-web-core (Apache-2.0).