@ai-gui/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Liang Li
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @ai-gui/vue
+
+Vue adapter for [AIGUI](../../README.md) — renders a streaming LLM response into Vue, with app-defined cards and plugins.
+
+## Install
+
+```sh
+pnpm add @ai-gui/core @ai-gui/vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { CardRegistry } from "@ai-gui/core"
+import { AIRenderer } from "@ai-gui/vue"
+
+const registry = new CardRegistry()
+// A card render component receives props `data` and emits `action`.
+registry.register({ type: "weather", description: "Weather summary", render: WeatherCard })
+
+const r = ref<InstanceType<typeof AIRenderer>>()
+
+async function ask() {
+  const res = await fetch("/api/chat")
+  r.value?.reset()
+  await r.value?.feed(res.body!) // also: r.value?.push(chunk)
+}
+</script>
+
+<template>
+  <AIRenderer ref="r" :registry="registry" @card-action="(a) => {/* app makes the real request */}" />
+</template>
+```
+
+## Exports
+
+- `<AIRenderer :registry :plugins :sanitize @card-action />` — a render-function component; imperative `push` / `feed` / `reset` via a template ref (exposed).
+- `useAIRenderer()` — composable returning `{ nodes, push, feed, reset }`.
+
+Card component contract: props `data`, `emits: ['action']`. See the [root README](../../README.md) for cards, plugins, and `buildSystemPrompt`.

package/dist/index.cjs

@@ -0,0 +1,210 @@
+"use strict";
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const vue = __toESM(require("vue"));
+const __ai_gui_core = __toESM(require("@ai-gui/core"));
+
+//#region src/use-ai-renderer.ts
+function useAIRenderer(options = {}) {
+	const nodes = (0, vue.shallowRef)([]);
+	const renderer = new __ai_gui_core.Renderer({
+		...options,
+		plugins: options.plugins,
+		onPatch: (_patches, snapshot) => {
+			nodes.value = snapshot;
+		}
+	});
+	return {
+		nodes,
+		push: (c) => renderer.push(c),
+		feed: (s) => renderer.feed(s),
+		reset: () => {
+			renderer.reset();
+			nodes.value = [];
+		}
+	};
+}
+
+//#endregion
+//#region src/render-output.ts
+/** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
+const MountHost = (0, vue.defineComponent)({
+	name: "MountHost",
+	props: { mount: {
+		type: Function,
+		required: true
+	} },
+	setup(props) {
+		const elRef = (0, vue.ref)(null);
+		let cleanup;
+		(0, vue.onMounted)(() => {
+			if (elRef.value) cleanup = props.mount(elRef.value);
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			if (typeof cleanup === "function") cleanup();
+		});
+		return () => (0, vue.h)("div", {
+			ref: elRef,
+			"data-aigui-mount": ""
+		});
+	}
+});
+/** Translate a framework-neutral RenderOutput into a Vue VNode. */
+function renderOutput(out) {
+	switch (out.kind) {
+		case "html": return (0, vue.h)("div", { innerHTML: (0, __ai_gui_core.sanitizeHtml)(out.html) });
+		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "mount": return (0, vue.h)(MountHost, { mount: out.mount });
+		case "card": return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(out.data, null, 2))]);
+	}
+}
+/** Await an async RenderOutput, rendering a placeholder until it resolves. */
+const AsyncOutput = (0, vue.defineComponent)({
+	name: "AsyncOutput",
+	props: { promise: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const resolved = (0, vue.ref)(null);
+		props.promise.then((v) => {
+			resolved.value = v;
+		});
+		return () => resolved.value ? renderOutput(resolved.value) : (0, vue.h)("span", { "data-aigui-async-pending": "" });
+	}
+});
+
+//#endregion
+//#region src/render-node.ts
+function renderNode(node, ctx) {
+	const r = (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins)[node.type];
+	if (r) {
+		const out = r(node);
+		if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
+			key: node.key,
+			promise: out
+		});
+		return renderOutput(out);
+	}
+	switch (node.type) {
+		case "heading": return (0, vue.h)(node.tag ?? "h1", {
+			key: node.key,
+			innerHTML: node.html ?? ""
+		});
+		case "paragraph": return (0, vue.h)("p", {
+			key: node.key,
+			innerHTML: node.html ?? ""
+		});
+		case "code": return (0, vue.h)("pre", {
+			key: node.key,
+			"data-lang": node.attrs?.lang
+		}, [(0, vue.h)("code", node.content ?? "")]);
+		case "hr": return (0, vue.h)("hr", { key: node.key });
+		case "html": return (0, vue.h)("div", {
+			key: node.key,
+			innerHTML: node.content ?? ""
+		});
+		case "card": return renderCard(node, ctx);
+		default: return (0, vue.h)("div", {
+			key: node.key,
+			innerHTML: node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "")
+		});
+	}
+}
+function renderCard(node, ctx) {
+	const card = node.card;
+	if (!card) return (0, vue.h)("div", { key: node.key });
+	if (!card.complete) return (0, vue.h)("div", {
+		key: node.key,
+		"data-aigui-card-loading": "",
+		"data-card-type": card.type
+	});
+	if (!card.valid) return (0, vue.h)("pre", {
+		key: node.key,
+		"data-aigui-card-invalid": ""
+	}, [(0, vue.h)("code", JSON.stringify(card.data, null, 2))]);
+	const Comp = ctx.registry?.getRender(card.type);
+	if (!Comp) return (0, vue.h)("pre", {
+		key: node.key,
+		"data-aigui-card-fallback": ""
+	}, [(0, vue.h)("code", JSON.stringify(card.data, null, 2))]);
+	return (0, vue.h)(Comp, {
+		key: node.key,
+		data: card.data,
+		onAction: (a) => ctx.onCardAction?.({
+			...a,
+			cardType: card.type
+		})
+	});
+}
+
+//#endregion
+//#region src/ai-renderer.ts
+const AIRenderer = (0, vue.defineComponent)({
+	name: "AIRenderer",
+	props: {
+		registry: {
+			type: Object,
+			default: void 0
+		},
+		plugins: {
+			type: Array,
+			default: void 0
+		},
+		sanitize: {
+			type: Boolean,
+			default: void 0
+		},
+		onCardAction: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { expose }) {
+		const { nodes, push, feed, reset } = useAIRenderer({
+			registry: props.registry,
+			sanitize: props.sanitize,
+			plugins: props.plugins
+		});
+		expose({
+			push,
+			feed,
+			reset
+		});
+		return () => {
+			const ctx = {
+				registry: props.registry,
+				plugins: props.plugins,
+				onCardAction: props.onCardAction
+			};
+			return (0, vue.h)("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+		};
+	}
+});
+
+//#endregion
+exports.AIRenderer = AIRenderer
+exports.renderNode = renderNode
+exports.renderOutput = renderOutput
+exports.useAIRenderer = useAIRenderer

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import { ShallowRef, VNode } from "vue";
+import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+
+//#region src/use-ai-renderer.d.ts
+interface UseAIRendererResult {
+  nodes: ShallowRef<ASTNode[]>;
+  push: (chunk: string) => void;
+  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  reset: () => void;
+}
+declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
+
+//#endregion
+//#region src/ai-renderer.d.ts
+declare const AIRenderer: any;
+
+//#endregion
+//#region src/render-node.d.ts
+interface RenderContext {
+  registry?: CardRegistry;
+  plugins?: AIGuiPlugin[];
+  onCardAction?: (action: {
+    type: string;
+    params?: unknown;
+    cardType: string;
+  }) => void;
+}
+declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
+
+//#endregion
+//#region src/render-output.d.ts
+/** Translate a framework-neutral RenderOutput into a Vue VNode. */
+declare function renderOutput(out: RenderOutput): VNode;
+
+//#endregion
+/** Await an async RenderOutput, rendering a placeholder until it resolves. */
+
+export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import { ShallowRef, VNode } from "vue";
+import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+
+//#region src/use-ai-renderer.d.ts
+interface UseAIRendererResult {
+  nodes: ShallowRef<ASTNode[]>;
+  push: (chunk: string) => void;
+  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  reset: () => void;
+}
+declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
+
+//#endregion
+//#region src/ai-renderer.d.ts
+declare const AIRenderer: any;
+
+//#endregion
+//#region src/render-node.d.ts
+interface RenderContext {
+  registry?: CardRegistry;
+  plugins?: AIGuiPlugin[];
+  onCardAction?: (action: {
+    type: string;
+    params?: unknown;
+    cardType: string;
+  }) => void;
+}
+declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
+
+//#endregion
+//#region src/render-output.d.ts
+/** Translate a framework-neutral RenderOutput into a Vue VNode. */
+declare function renderOutput(out: RenderOutput): VNode;
+
+//#endregion
+/** Await an async RenderOutput, rendering a placeholder until it resolves. */
+
+export { AIRenderer, RenderContext, UseAIRendererResult, renderNode, renderOutput, useAIRenderer };

package/dist/index.js

@@ -0,0 +1,183 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
+
+//#region src/use-ai-renderer.ts
+function useAIRenderer(options = {}) {
+	const nodes = shallowRef([]);
+	const renderer = new Renderer({
+		...options,
+		plugins: options.plugins,
+		onPatch: (_patches, snapshot) => {
+			nodes.value = snapshot;
+		}
+	});
+	return {
+		nodes,
+		push: (c) => renderer.push(c),
+		feed: (s) => renderer.feed(s),
+		reset: () => {
+			renderer.reset();
+			nodes.value = [];
+		}
+	};
+}
+
+//#endregion
+//#region src/render-output.ts
+/** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
+const MountHost = defineComponent({
+	name: "MountHost",
+	props: { mount: {
+		type: Function,
+		required: true
+	} },
+	setup(props) {
+		const elRef = ref(null);
+		let cleanup;
+		onMounted(() => {
+			if (elRef.value) cleanup = props.mount(elRef.value);
+		});
+		onBeforeUnmount(() => {
+			if (typeof cleanup === "function") cleanup();
+		});
+		return () => h("div", {
+			ref: elRef,
+			"data-aigui-mount": ""
+		});
+	}
+});
+/** Translate a framework-neutral RenderOutput into a Vue VNode. */
+function renderOutput(out) {
+	switch (out.kind) {
+		case "html": return h("div", { innerHTML: sanitizeHtml(out.html) });
+		case "element": return h(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "mount": return h(MountHost, { mount: out.mount });
+		case "card": return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(out.data, null, 2))]);
+	}
+}
+/** Await an async RenderOutput, rendering a placeholder until it resolves. */
+const AsyncOutput = defineComponent({
+	name: "AsyncOutput",
+	props: { promise: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const resolved = ref(null);
+		props.promise.then((v) => {
+			resolved.value = v;
+		});
+		return () => resolved.value ? renderOutput(resolved.value) : h("span", { "data-aigui-async-pending": "" });
+	}
+});
+
+//#endregion
+//#region src/render-node.ts
+function renderNode(node, ctx) {
+	const r = collectNodeRenderers(ctx.plugins)[node.type];
+	if (r) {
+		const out = r(node);
+		if (out && typeof out.then === "function") return h(AsyncOutput, {
+			key: node.key,
+			promise: out
+		});
+		return renderOutput(out);
+	}
+	switch (node.type) {
+		case "heading": return h(node.tag ?? "h1", {
+			key: node.key,
+			innerHTML: node.html ?? ""
+		});
+		case "paragraph": return h("p", {
+			key: node.key,
+			innerHTML: node.html ?? ""
+		});
+		case "code": return h("pre", {
+			key: node.key,
+			"data-lang": node.attrs?.lang
+		}, [h("code", node.content ?? "")]);
+		case "hr": return h("hr", { key: node.key });
+		case "html": return h("div", {
+			key: node.key,
+			innerHTML: node.content ?? ""
+		});
+		case "card": return renderCard(node, ctx);
+		default: return h("div", {
+			key: node.key,
+			innerHTML: node.html ?? sanitizeHtml(node.content ?? "")
+		});
+	}
+}
+function renderCard(node, ctx) {
+	const card = node.card;
+	if (!card) return h("div", { key: node.key });
+	if (!card.complete) return h("div", {
+		key: node.key,
+		"data-aigui-card-loading": "",
+		"data-card-type": card.type
+	});
+	if (!card.valid) return h("pre", {
+		key: node.key,
+		"data-aigui-card-invalid": ""
+	}, [h("code", JSON.stringify(card.data, null, 2))]);
+	const Comp = ctx.registry?.getRender(card.type);
+	if (!Comp) return h("pre", {
+		key: node.key,
+		"data-aigui-card-fallback": ""
+	}, [h("code", JSON.stringify(card.data, null, 2))]);
+	return h(Comp, {
+		key: node.key,
+		data: card.data,
+		onAction: (a) => ctx.onCardAction?.({
+			...a,
+			cardType: card.type
+		})
+	});
+}
+
+//#endregion
+//#region src/ai-renderer.ts
+const AIRenderer = defineComponent({
+	name: "AIRenderer",
+	props: {
+		registry: {
+			type: Object,
+			default: void 0
+		},
+		plugins: {
+			type: Array,
+			default: void 0
+		},
+		sanitize: {
+			type: Boolean,
+			default: void 0
+		},
+		onCardAction: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { expose }) {
+		const { nodes, push, feed, reset } = useAIRenderer({
+			registry: props.registry,
+			sanitize: props.sanitize,
+			plugins: props.plugins
+		});
+		expose({
+			push,
+			feed,
+			reset
+		});
+		return () => {
+			const ctx = {
+				registry: props.registry,
+				plugins: props.plugins,
+				onCardAction: props.onCardAction
+			};
+			return h("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+		};
+	}
+});
+
+//#endregion
+export { AIRenderer, renderNode, renderOutput, useAIRenderer };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ai-gui/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
+  "keywords": [
+    "llm",
+    "ai",
+    "streaming",
+    "markdown",
+    "vue",
+    "vue3",
+    "components",
+    "cards",
+    "aigui"
+  ],
+  "license": "MIT",
+  "author": "Liang Li <ll_faw@hotmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liliang-cn/aigui.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/liliang-cn/aigui#readme",
+  "bugs": "https://github.com/liliang-cn/aigui/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ai-gui/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3"
+  },
+  "devDependencies": {
+    "vue": "^3.5.12",
+    "@vue/test-utils": "^2.4.6"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}