@ai-gui/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Liang Li
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,49 @@
1
+ # @ai-gui/react
2
+
3
+ React adapter for [AIGUI](../../README.md) — renders a streaming LLM response into React, with app-defined cards and plugins.
4
+
5
+ ## Install
6
+
7
+ ```sh
8
+ pnpm add @ai-gui/core @ai-gui/react
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```tsx
14
+ import { CardRegistry } from "@ai-gui/core"
15
+ import { AIRenderer } from "@ai-gui/react"
16
+ import { useRef } from "react"
17
+
18
+ const registry = new CardRegistry()
19
+ registry.register({
20
+ type: "weather",
21
+ description: "Weather summary",
22
+ // card render = a React component receiving { data, onAction }
23
+ render: ({ data, onAction }: { data: any; onAction: (a: any) => void }) => (
24
+ <div>
25
+ {data.city} — {data.tempC}°C
26
+ <button onClick={() => onAction({ type: "refresh", params: { city: data.city } })}>Refresh</button>
27
+ </div>
28
+ ),
29
+ })
30
+
31
+ function Chat() {
32
+ const ref = useRef<React.ComponentRef<typeof AIRenderer>>(null)
33
+ // ref.current?.push(chunk) / feed(source) / reset()
34
+ return (
35
+ <AIRenderer
36
+ ref={ref}
37
+ registry={registry}
38
+ onCardAction={({ type, params, cardType }) => {/* app makes the real request */}}
39
+ />
40
+ )
41
+ }
42
+ ```
43
+
44
+ ## Exports
45
+
46
+ - `<AIRenderer ref registry plugins sanitize onCardAction />` — imperative `ref.current.push/feed/reset`.
47
+ - `useAIRenderer(options)` → `{ nodes, push, feed, reset }` — the hook form when you want to render `nodes` yourself.
48
+
49
+ See the [root README](../../README.md) for cards, plugins, and `buildSystemPrompt`.
package/dist/index.cjs ADDED
@@ -0,0 +1,207 @@
1
+ "use strict";
2
+ //#region rolldown:runtime
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
11
+ key = keys[i];
12
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
13
+ get: ((k) => from[k]).bind(null, key),
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
20
+ value: mod,
21
+ enumerable: true
22
+ }) : target, mod));
23
+
24
+ //#endregion
25
+ const react = __toESM(require("react"));
26
+ const __ai_gui_core = __toESM(require("@ai-gui/core"));
27
+ const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
28
+
29
+ //#region src/use-ai-renderer.ts
30
+ function useAIRenderer(options = {}) {
31
+ const [nodes, setNodes] = (0, react.useState)([]);
32
+ const renderer = (0, react.useMemo)(() => {
33
+ return new __ai_gui_core.Renderer({
34
+ ...options,
35
+ onPatch: (_patches, nextNodes) => setNodes(nextNodes)
36
+ });
37
+ }, [
38
+ options.registry,
39
+ options.sanitize,
40
+ options.plugins
41
+ ]);
42
+ const push = (0, react.useCallback)((chunk) => renderer.push(chunk), [renderer]);
43
+ const feed = (0, react.useCallback)((source) => renderer.feed(source), [renderer]);
44
+ const reset = (0, react.useCallback)(() => {
45
+ renderer.reset();
46
+ setNodes([]);
47
+ }, [renderer]);
48
+ return {
49
+ nodes,
50
+ push,
51
+ feed,
52
+ reset
53
+ };
54
+ }
55
+
56
+ //#endregion
57
+ //#region src/render-output.tsx
58
+ /** Translate a framework-neutral RenderOutput into React nodes. */
59
+ function renderOutput(out, key) {
60
+ switch (out.kind) {
61
+ case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: (0, __ai_gui_core.sanitizeHtml)(out.html) } }, key);
62
+ case "element": return (0, react.createElement)(out.tag, {
63
+ key,
64
+ ...out.props
65
+ }, (out.children ?? []).map((c, i) => renderOutput(c, String(i))));
66
+ case "card": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
67
+ "data-aigui-card-fallback": true,
68
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(out.data, null, 2) })
69
+ }, key);
70
+ case "mount": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MountHost, { mount: out.mount }, key);
71
+ }
72
+ }
73
+ /** Host a framework-neutral imperative mount into a managed DOM element. */
74
+ function MountHost({ mount }) {
75
+ const ref = (0, react.useRef)(null);
76
+ (0, react.useEffect)(() => {
77
+ if (!ref.current) return;
78
+ const cleanup = mount(ref.current);
79
+ return () => {
80
+ if (typeof cleanup === "function") cleanup();
81
+ };
82
+ }, []);
83
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
84
+ ref,
85
+ "data-aigui-mount": true
86
+ });
87
+ }
88
+ /** Await an async RenderOutput, rendering a placeholder until it resolves. */
89
+ function AsyncOutput({ promise }) {
90
+ const [resolved, setResolved] = (0, react.useState)(null);
91
+ (0, react.useEffect)(() => {
92
+ let cancelled = false;
93
+ promise.then((out) => {
94
+ if (!cancelled) setResolved(out);
95
+ });
96
+ return () => {
97
+ cancelled = true;
98
+ };
99
+ }, [promise]);
100
+ if (resolved === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-pending": true });
101
+ return renderOutput(resolved);
102
+ }
103
+
104
+ //#endregion
105
+ //#region src/render-node.tsx
106
+ function renderNode(node, ctx) {
107
+ const r = (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins)[node.type];
108
+ if (r) {
109
+ const out = r(node);
110
+ if (out && typeof out.then === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AsyncOutput, { promise: out }, node.key);
111
+ return renderOutput(out, node.key);
112
+ }
113
+ switch (node.type) {
114
+ case "heading": return (0, react.createElement)(node.tag ?? "h1", {
115
+ key: node.key,
116
+ dangerouslySetInnerHTML: { __html: node.html ?? "" }
117
+ });
118
+ case "paragraph": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { dangerouslySetInnerHTML: { __html: node.html ?? "" } }, node.key);
119
+ case "code": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
120
+ "data-lang": node.attrs?.lang,
121
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: node.content })
122
+ }, node.key);
123
+ case "hr": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {}, node.key);
124
+ case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: node.content ?? "" } }, node.key);
125
+ case "card": return renderCard(node, ctx);
126
+ default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "") } }, node.key);
127
+ }
128
+ }
129
+ function renderCard(node, ctx) {
130
+ const card = node.card;
131
+ if (!card) return null;
132
+ if (!card.complete) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
133
+ "data-aigui-card-loading": true,
134
+ "data-card-type": card.type
135
+ }, node.key);
136
+ if (!card.valid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
137
+ "data-aigui-card-invalid": true,
138
+ "data-card-type": card.type,
139
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(card.data, null, 2) })
140
+ }, node.key);
141
+ const Comp = getCardComponent(ctx.registry, card.type);
142
+ if (!Comp) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
143
+ "data-aigui-card-fallback": true,
144
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(card.data, null, 2) })
145
+ }, node.key);
146
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
147
+ data: card.data,
148
+ onAction: (a) => ctx.onCardAction?.({
149
+ ...a,
150
+ cardType: card.type
151
+ })
152
+ }, node.key);
153
+ }
154
+ function getCardComponent(registry, type) {
155
+ if (!registry) return void 0;
156
+ return registry.getRender(type);
157
+ }
158
+
159
+ //#endregion
160
+ //#region src/ai-renderer.tsx
161
+ const AIRenderer = (0, react.forwardRef)(function AIRenderer$1(props, ref) {
162
+ const { registry, sanitize, plugins, onCardAction, className } = props;
163
+ const opts = {
164
+ registry,
165
+ sanitize,
166
+ plugins
167
+ };
168
+ const { nodes, push, feed, reset } = useAIRenderer(opts);
169
+ (0, react.useImperativeHandle)(ref, () => ({
170
+ push,
171
+ feed,
172
+ reset
173
+ }), [
174
+ push,
175
+ feed,
176
+ reset
177
+ ]);
178
+ const ctx = {
179
+ registry,
180
+ plugins,
181
+ onCardAction
182
+ };
183
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
184
+ className,
185
+ "data-aigui-renderer": true,
186
+ children: nodes.map((n) => renderNode(n, ctx))
187
+ });
188
+ });
189
+
190
+ //#endregion
191
+ //#region src/apply-patches.ts
192
+ function applyPatches(nodes, patches) {
193
+ let out = nodes.slice();
194
+ for (const p of patches) if (p.op === "insert") out.splice(p.index, 0, p.node);
195
+ else if (p.op === "update") {
196
+ const i = out.findIndex((n) => n.key === p.key);
197
+ if (i >= 0) out[i] = p.node;
198
+ } else if (p.op === "remove") out = out.filter((n) => n.key !== p.key);
199
+ return out;
200
+ }
201
+
202
+ //#endregion
203
+ exports.AIRenderer = AIRenderer
204
+ exports.applyPatches = applyPatches
205
+ exports.renderNode = renderNode
206
+ exports.renderOutput = renderOutput
207
+ exports.useAIRenderer = useAIRenderer
@@ -0,0 +1,54 @@
1
+ import { AIGuiPlugin, ASTNode, CardRegistry, Patch, RenderOutput, RendererOptions } from "@ai-gui/core";
2
+ import * as react0 from "react";
3
+ import * as react1 from "react";
4
+ import { ReactNode } from "react";
5
+
6
+ //#region src/use-ai-renderer.d.ts
7
+ interface UseAIRendererResult {
8
+ nodes: ASTNode[];
9
+ push: (chunk: string) => void;
10
+ feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
11
+ reset: () => void;
12
+ }
13
+ declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
14
+
15
+ //#endregion
16
+ //#region src/render-node.d.ts
17
+ interface RenderContext {
18
+ registry?: CardRegistry;
19
+ plugins?: AIGuiPlugin[];
20
+ onCardAction?: (action: {
21
+ type: string;
22
+ params?: unknown;
23
+ cardType: string;
24
+ }) => void;
25
+ }
26
+ declare function renderNode(node: ASTNode, ctx: RenderContext): ReactNode;
27
+
28
+ //#endregion
29
+ //#region src/ai-renderer.d.ts
30
+ interface AIRendererHandle {
31
+ push: (chunk: string) => void;
32
+ feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
33
+ reset: () => void;
34
+ }
35
+ interface AIRendererProps {
36
+ registry?: CardRegistry;
37
+ sanitize?: boolean;
38
+ plugins?: AIGuiPlugin[];
39
+ onCardAction?: RenderContext["onCardAction"];
40
+ className?: string;
41
+ }
42
+ declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & react0.RefAttributes<AIRendererHandle>>;
43
+
44
+ //#endregion
45
+ //#region src/render-output.d.ts
46
+ /** Translate a framework-neutral RenderOutput into React nodes. */
47
+ declare function renderOutput(out: RenderOutput, key?: string): ReactNode;
48
+
49
+ //#endregion
50
+ //#region src/apply-patches.d.ts
51
+ declare function applyPatches(nodes: ASTNode[], patches: Patch[]): ASTNode[];
52
+
53
+ //#endregion
54
+ export { AIRenderer, AIRendererHandle, AIRendererProps, RenderContext, UseAIRendererResult, applyPatches, renderNode, renderOutput, useAIRenderer };
@@ -0,0 +1,54 @@
1
+ import * as react0 from "react";
2
+ import * as react1 from "react";
3
+ import { ReactNode } from "react";
4
+ import { AIGuiPlugin, ASTNode, CardRegistry, Patch, RenderOutput, RendererOptions } from "@ai-gui/core";
5
+
6
+ //#region src/use-ai-renderer.d.ts
7
+ interface UseAIRendererResult {
8
+ nodes: ASTNode[];
9
+ push: (chunk: string) => void;
10
+ feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
11
+ reset: () => void;
12
+ }
13
+ declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
14
+
15
+ //#endregion
16
+ //#region src/render-node.d.ts
17
+ interface RenderContext {
18
+ registry?: CardRegistry;
19
+ plugins?: AIGuiPlugin[];
20
+ onCardAction?: (action: {
21
+ type: string;
22
+ params?: unknown;
23
+ cardType: string;
24
+ }) => void;
25
+ }
26
+ declare function renderNode(node: ASTNode, ctx: RenderContext): ReactNode;
27
+
28
+ //#endregion
29
+ //#region src/ai-renderer.d.ts
30
+ interface AIRendererHandle {
31
+ push: (chunk: string) => void;
32
+ feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
33
+ reset: () => void;
34
+ }
35
+ interface AIRendererProps {
36
+ registry?: CardRegistry;
37
+ sanitize?: boolean;
38
+ plugins?: AIGuiPlugin[];
39
+ onCardAction?: RenderContext["onCardAction"];
40
+ className?: string;
41
+ }
42
+ declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & react0.RefAttributes<AIRendererHandle>>;
43
+
44
+ //#endregion
45
+ //#region src/render-output.d.ts
46
+ /** Translate a framework-neutral RenderOutput into React nodes. */
47
+ declare function renderOutput(out: RenderOutput, key?: string): ReactNode;
48
+
49
+ //#endregion
50
+ //#region src/apply-patches.d.ts
51
+ declare function applyPatches(nodes: ASTNode[], patches: Patch[]): ASTNode[];
52
+
53
+ //#endregion
54
+ export { AIRenderer, AIRendererHandle, AIRendererProps, RenderContext, UseAIRendererResult, applyPatches, renderNode, renderOutput, useAIRenderer };
package/dist/index.js ADDED
@@ -0,0 +1,179 @@
1
+ import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
2
+ import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
3
+ import { jsx } from "react/jsx-runtime";
4
+
5
+ //#region src/use-ai-renderer.ts
6
+ function useAIRenderer(options = {}) {
7
+ const [nodes, setNodes] = useState([]);
8
+ const renderer = useMemo(() => {
9
+ return new Renderer({
10
+ ...options,
11
+ onPatch: (_patches, nextNodes) => setNodes(nextNodes)
12
+ });
13
+ }, [
14
+ options.registry,
15
+ options.sanitize,
16
+ options.plugins
17
+ ]);
18
+ const push = useCallback((chunk) => renderer.push(chunk), [renderer]);
19
+ const feed = useCallback((source) => renderer.feed(source), [renderer]);
20
+ const reset = useCallback(() => {
21
+ renderer.reset();
22
+ setNodes([]);
23
+ }, [renderer]);
24
+ return {
25
+ nodes,
26
+ push,
27
+ feed,
28
+ reset
29
+ };
30
+ }
31
+
32
+ //#endregion
33
+ //#region src/render-output.tsx
34
+ /** Translate a framework-neutral RenderOutput into React nodes. */
35
+ function renderOutput(out, key) {
36
+ switch (out.kind) {
37
+ case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeHtml(out.html) } }, key);
38
+ case "element": return createElement(out.tag, {
39
+ key,
40
+ ...out.props
41
+ }, (out.children ?? []).map((c, i) => renderOutput(c, String(i))));
42
+ case "card": return /* @__PURE__ */ jsx("pre", {
43
+ "data-aigui-card-fallback": true,
44
+ children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(out.data, null, 2) })
45
+ }, key);
46
+ case "mount": return /* @__PURE__ */ jsx(MountHost, { mount: out.mount }, key);
47
+ }
48
+ }
49
+ /** Host a framework-neutral imperative mount into a managed DOM element. */
50
+ function MountHost({ mount }) {
51
+ const ref = useRef(null);
52
+ useEffect(() => {
53
+ if (!ref.current) return;
54
+ const cleanup = mount(ref.current);
55
+ return () => {
56
+ if (typeof cleanup === "function") cleanup();
57
+ };
58
+ }, []);
59
+ return /* @__PURE__ */ jsx("div", {
60
+ ref,
61
+ "data-aigui-mount": true
62
+ });
63
+ }
64
+ /** Await an async RenderOutput, rendering a placeholder until it resolves. */
65
+ function AsyncOutput({ promise }) {
66
+ const [resolved, setResolved] = useState(null);
67
+ useEffect(() => {
68
+ let cancelled = false;
69
+ promise.then((out) => {
70
+ if (!cancelled) setResolved(out);
71
+ });
72
+ return () => {
73
+ cancelled = true;
74
+ };
75
+ }, [promise]);
76
+ if (resolved === null) return /* @__PURE__ */ jsx("span", { "data-aigui-async-pending": true });
77
+ return renderOutput(resolved);
78
+ }
79
+
80
+ //#endregion
81
+ //#region src/render-node.tsx
82
+ function renderNode(node, ctx) {
83
+ const r = collectNodeRenderers(ctx.plugins)[node.type];
84
+ if (r) {
85
+ const out = r(node);
86
+ if (out && typeof out.then === "function") return /* @__PURE__ */ jsx(AsyncOutput, { promise: out }, node.key);
87
+ return renderOutput(out, node.key);
88
+ }
89
+ switch (node.type) {
90
+ case "heading": return createElement(node.tag ?? "h1", {
91
+ key: node.key,
92
+ dangerouslySetInnerHTML: { __html: node.html ?? "" }
93
+ });
94
+ case "paragraph": return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: node.html ?? "" } }, node.key);
95
+ case "code": return /* @__PURE__ */ jsx("pre", {
96
+ "data-lang": node.attrs?.lang,
97
+ children: /* @__PURE__ */ jsx("code", { children: node.content })
98
+ }, node.key);
99
+ case "hr": return /* @__PURE__ */ jsx("hr", {}, node.key);
100
+ case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: node.content ?? "" } }, node.key);
101
+ case "card": return renderCard(node, ctx);
102
+ default: return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: node.html ?? sanitizeHtml(node.content ?? "") } }, node.key);
103
+ }
104
+ }
105
+ function renderCard(node, ctx) {
106
+ const card = node.card;
107
+ if (!card) return null;
108
+ if (!card.complete) return /* @__PURE__ */ jsx("div", {
109
+ "data-aigui-card-loading": true,
110
+ "data-card-type": card.type
111
+ }, node.key);
112
+ if (!card.valid) return /* @__PURE__ */ jsx("pre", {
113
+ "data-aigui-card-invalid": true,
114
+ "data-card-type": card.type,
115
+ children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(card.data, null, 2) })
116
+ }, node.key);
117
+ const Comp = getCardComponent(ctx.registry, card.type);
118
+ if (!Comp) return /* @__PURE__ */ jsx("pre", {
119
+ "data-aigui-card-fallback": true,
120
+ children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(card.data, null, 2) })
121
+ }, node.key);
122
+ return /* @__PURE__ */ jsx(Comp, {
123
+ data: card.data,
124
+ onAction: (a) => ctx.onCardAction?.({
125
+ ...a,
126
+ cardType: card.type
127
+ })
128
+ }, node.key);
129
+ }
130
+ function getCardComponent(registry, type) {
131
+ if (!registry) return void 0;
132
+ return registry.getRender(type);
133
+ }
134
+
135
+ //#endregion
136
+ //#region src/ai-renderer.tsx
137
+ const AIRenderer = forwardRef(function AIRenderer$1(props, ref) {
138
+ const { registry, sanitize, plugins, onCardAction, className } = props;
139
+ const opts = {
140
+ registry,
141
+ sanitize,
142
+ plugins
143
+ };
144
+ const { nodes, push, feed, reset } = useAIRenderer(opts);
145
+ useImperativeHandle(ref, () => ({
146
+ push,
147
+ feed,
148
+ reset
149
+ }), [
150
+ push,
151
+ feed,
152
+ reset
153
+ ]);
154
+ const ctx = {
155
+ registry,
156
+ plugins,
157
+ onCardAction
158
+ };
159
+ return /* @__PURE__ */ jsx("div", {
160
+ className,
161
+ "data-aigui-renderer": true,
162
+ children: nodes.map((n) => renderNode(n, ctx))
163
+ });
164
+ });
165
+
166
+ //#endregion
167
+ //#region src/apply-patches.ts
168
+ function applyPatches(nodes, patches) {
169
+ let out = nodes.slice();
170
+ for (const p of patches) if (p.op === "insert") out.splice(p.index, 0, p.node);
171
+ else if (p.op === "update") {
172
+ const i = out.findIndex((n) => n.key === p.key);
173
+ if (i >= 0) out[i] = p.node;
174
+ } else if (p.op === "remove") out = out.filter((n) => n.key !== p.key);
175
+ return out;
176
+ }
177
+
178
+ //#endregion
179
+ export { AIRenderer, applyPatches, renderNode, renderOutput, useAIRenderer };
package/package.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "name": "@ai-gui/react",
3
+ "version": "0.1.0",
4
+ "description": "React adapter for AIGUI — stream LLM output into live React components with cards, plugins, and interactive widgets.",
5
+ "keywords": [
6
+ "llm",
7
+ "ai",
8
+ "streaming",
9
+ "markdown",
10
+ "react",
11
+ "components",
12
+ "cards",
13
+ "aigui"
14
+ ],
15
+ "license": "MIT",
16
+ "author": "Liang Li <ll_faw@hotmail.com>",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/liliang-cn/aigui.git",
20
+ "directory": "packages/react"
21
+ },
22
+ "homepage": "https://github.com/liliang-cn/aigui#readme",
23
+ "bugs": "https://github.com/liliang-cn/aigui/issues",
24
+ "type": "module",
25
+ "main": "./dist/index.cjs",
26
+ "module": "./dist/index.js",
27
+ "types": "./dist/index.d.ts",
28
+ "exports": {
29
+ ".": {
30
+ "types": "./dist/index.d.ts",
31
+ "import": "./dist/index.js",
32
+ "require": "./dist/index.cjs"
33
+ }
34
+ },
35
+ "files": [
36
+ "dist",
37
+ "README.md",
38
+ "LICENSE"
39
+ ],
40
+ "publishConfig": {
41
+ "access": "public"
42
+ },
43
+ "dependencies": {
44
+ "@ai-gui/core": "0.1.0"
45
+ },
46
+ "peerDependencies": {
47
+ "react": ">=18"
48
+ },
49
+ "devDependencies": {
50
+ "react": "^18.3.1",
51
+ "react-dom": "^18.3.1",
52
+ "@types/react": "^18.3.12",
53
+ "@types/react-dom": "^18.3.1",
54
+ "@testing-library/react": "^16.0.1",
55
+ "@testing-library/dom": "^10.4.0"
56
+ },
57
+ "scripts": {
58
+ "build": "tsdown",
59
+ "typecheck": "tsc --noEmit"
60
+ }
61
+ }