@toon-ui/react 0.1.0-beta.0 → 0.1.0-beta.1
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/README.md +82 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @toon-ui/react
|
|
2
|
+
|
|
3
|
+
React runtime and component registry for ToonUI.
|
|
4
|
+
|
|
5
|
+
This package renders a typed ToonUI AST using React components chosen by the developer.
|
|
6
|
+
|
|
7
|
+
If you want the easiest public API with default components already wired in, use:
|
|
8
|
+
|
|
9
|
+
- `@toon-ui/toon-ui`
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## What it includes
|
|
14
|
+
|
|
15
|
+
- `ToonMessage`
|
|
16
|
+
- `ToonRenderer`
|
|
17
|
+
- `ToonProvider`
|
|
18
|
+
- `useToonUI()`
|
|
19
|
+
- `useToonReply()`
|
|
20
|
+
- `useToonSubmit()`
|
|
21
|
+
- `useToonAction()`
|
|
22
|
+
- `basicPreset()`
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Install
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm add @toon-ui/react @toon-ui/core react
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## Example
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { createToonUI } from '@toon-ui/core';
|
|
38
|
+
import { ToonMessage, basicPreset } from '@toon-ui/react';
|
|
39
|
+
|
|
40
|
+
const runtime = createToonUI({
|
|
41
|
+
components: basicPreset(),
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
export function AssistantMessage({ content }: { content: string }) {
|
|
45
|
+
return <ToonMessage content={content} runtime={runtime} />;
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Partial override example
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
const runtime = createToonUI({
|
|
55
|
+
components: {
|
|
56
|
+
...basicPreset(),
|
|
57
|
+
button: MyButton,
|
|
58
|
+
field: MyInput,
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Use `@toon-ui/toon-ui` if you want that merge behavior by default.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Important boundary
|
|
68
|
+
|
|
69
|
+
`@toon-ui/react` owns:
|
|
70
|
+
|
|
71
|
+
- AST traversal
|
|
72
|
+
- component registry resolution
|
|
73
|
+
- React event surfacing
|
|
74
|
+
- form state for ToonUI forms
|
|
75
|
+
|
|
76
|
+
It does NOT own:
|
|
77
|
+
|
|
78
|
+
- chat persistence
|
|
79
|
+
- tool calling
|
|
80
|
+
- backend execution
|
|
81
|
+
- AI SDK orchestration
|
|
82
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toon-ui/react",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.1",
|
|
4
4
|
"description": "React runtime and component registry for ToonUI.",
|
|
5
5
|
"keywords": ["toon-ui", "react", "ai", "chat", "ui"],
|
|
6
6
|
"homepage": "https://github.com/jefferson-lopez/toon-ui#readme",
|