@assistant-ui/mcp-docs-server 0.1.23 → 0.1.25
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/.docs/organized/code-examples/waterfall.md +5 -3
- package/.docs/organized/code-examples/with-a2a.md +676 -0
- package/.docs/organized/code-examples/with-ag-ui.md +7 -8
- package/.docs/organized/code-examples/with-ai-sdk-v6.md +28 -16
- package/.docs/organized/code-examples/with-artifacts.md +5 -5
- package/.docs/organized/code-examples/with-assistant-transport.md +3 -3
- package/.docs/organized/code-examples/with-chain-of-thought.md +34 -26
- package/.docs/organized/code-examples/with-cloud-standalone.md +10 -8
- package/.docs/organized/code-examples/with-cloud.md +5 -5
- package/.docs/organized/code-examples/with-custom-thread-list.md +7 -7
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +8 -8
- package/.docs/organized/code-examples/with-expo.md +571 -539
- package/.docs/organized/code-examples/with-external-store.md +3 -4
- package/.docs/organized/code-examples/with-ffmpeg.md +5 -5
- package/.docs/organized/code-examples/with-google-adk.md +353 -0
- package/.docs/organized/code-examples/with-heat-graph.md +304 -0
- package/.docs/organized/code-examples/with-langgraph.md +25 -23
- package/.docs/organized/code-examples/with-parent-id-grouping.md +4 -4
- package/.docs/organized/code-examples/with-react-hook-form.md +6 -9
- package/.docs/organized/code-examples/with-react-ink.md +265 -0
- package/.docs/organized/code-examples/with-react-router.md +10 -11
- package/.docs/organized/code-examples/with-store.md +29 -18
- package/.docs/organized/code-examples/with-tanstack.md +7 -7
- package/.docs/organized/code-examples/with-tap-runtime.md +6 -4
- package/.docs/raw/blog/2025-01-31-changelog/index.mdx +1 -1
- package/.docs/raw/blog/2026-03-launch-week/index.mdx +227 -0
- package/.docs/raw/docs/(docs)/architecture.mdx +1 -1
- package/.docs/raw/docs/(docs)/cli.mdx +14 -9
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +8 -3
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +5 -1
- package/.docs/raw/docs/(docs)/copilots/{make-assistant-readable.mdx → make-assistant-visible.mdx} +14 -5
- package/.docs/raw/docs/(docs)/copilots/model-context.mdx +11 -11
- package/.docs/raw/docs/(docs)/copilots/motivation.mdx +2 -2
- package/.docs/raw/docs/(docs)/devtools.mdx +3 -2
- package/.docs/raw/docs/(docs)/guides/attachments.mdx +9 -11
- package/.docs/raw/docs/(docs)/guides/branching.mdx +11 -6
- package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +18 -16
- package/.docs/raw/docs/(docs)/guides/context-api.mdx +81 -43
- package/.docs/raw/docs/(docs)/guides/dictation.mdx +5 -5
- package/.docs/raw/docs/(docs)/guides/editing.mdx +16 -7
- package/.docs/raw/docs/(docs)/guides/latex.mdx +3 -0
- package/.docs/raw/docs/(docs)/guides/message-timing.mdx +2 -1
- package/.docs/raw/docs/(docs)/guides/multi-agent.mdx +173 -0
- package/.docs/raw/docs/(docs)/guides/quoting.mdx +55 -206
- package/.docs/raw/docs/(docs)/guides/speech.mdx +1 -4
- package/.docs/raw/docs/(docs)/guides/suggestions.mdx +9 -15
- package/.docs/raw/docs/(docs)/guides/tool-ui.mdx +17 -7
- package/.docs/raw/docs/(docs)/guides/tools.mdx +24 -9
- package/.docs/raw/docs/(docs)/index.mdx +3 -3
- package/.docs/raw/docs/(docs)/installation.mdx +69 -46
- package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx +20 -6
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +24 -4
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx +20 -19
- package/.docs/raw/docs/(reference)/api-reference/overview.mdx +28 -53
- package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +4 -4
- package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +7 -1
- package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +20 -14
- package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +99 -45
- package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +52 -40
- package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +343 -23
- package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +4 -6
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +4 -2
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +3 -5
- package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +169 -22
- package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +14 -4
- package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +15 -26
- package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +39 -21
- package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +33 -9
- package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +48 -21
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +36 -7
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +30 -10
- package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +12 -10
- package/.docs/raw/docs/(reference)/migrations/deprecation-policy.mdx +1 -1
- package/.docs/raw/docs/(reference)/migrations/react-langgraph-v0-7.mdx +9 -4
- package/.docs/raw/docs/(reference)/migrations/v0-11.mdx +7 -5
- package/.docs/raw/docs/(reference)/migrations/v0-12.mdx +9 -7
- package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +159 -0
- package/.docs/raw/docs/(reference)/react-compatibility.mdx +5 -134
- package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +89 -7
- package/.docs/raw/docs/cloud/ai-sdk.mdx +19 -5
- package/.docs/raw/docs/cloud/langgraph.mdx +13 -3
- package/.docs/raw/docs/ink/adapters.mdx +41 -0
- package/.docs/raw/docs/ink/custom-backend.mdx +203 -0
- package/.docs/raw/docs/ink/hooks.mdx +448 -0
- package/.docs/raw/docs/ink/index.mdx +239 -0
- package/.docs/raw/docs/ink/migration.mdx +140 -0
- package/.docs/raw/docs/ink/primitives.mdx +699 -0
- package/.docs/raw/docs/react-native/adapters.mdx +63 -87
- package/.docs/raw/docs/react-native/custom-backend.mdx +11 -14
- package/.docs/raw/docs/react-native/hooks.mdx +214 -232
- package/.docs/raw/docs/react-native/index.mdx +118 -159
- package/.docs/raw/docs/react-native/migration.mdx +144 -0
- package/.docs/raw/docs/react-native/primitives.mdx +431 -302
- package/.docs/raw/docs/runtimes/a2a/index.mdx +294 -0
- package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +9 -9
- package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +14 -3
- package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +53 -0
- package/.docs/raw/docs/runtimes/assistant-transport.mdx +59 -25
- package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +13 -6
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +138 -38
- package/.docs/raw/docs/runtimes/custom/local.mdx +184 -42
- package/.docs/raw/docs/runtimes/data-stream.mdx +92 -19
- package/.docs/raw/docs/runtimes/google-adk/index.mdx +624 -0
- package/.docs/raw/docs/runtimes/helicone.mdx +6 -6
- package/.docs/raw/docs/runtimes/langgraph/index.mdx +38 -27
- package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +1 -1
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +15 -20
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +7 -11
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +8 -11
- package/.docs/raw/docs/runtimes/langserve.mdx +6 -7
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +18 -3
- package/.docs/raw/docs/ui/context-display.mdx +147 -0
- package/.docs/raw/docs/ui/file.mdx +5 -4
- package/.docs/raw/docs/ui/image.mdx +5 -4
- package/.docs/raw/docs/ui/markdown.mdx +3 -1
- package/.docs/raw/docs/ui/model-selector.mdx +8 -8
- package/.docs/raw/docs/ui/part-grouping.mdx +7 -10
- package/.docs/raw/docs/ui/quote.mdx +210 -0
- package/.docs/raw/docs/ui/reasoning.mdx +12 -11
- package/.docs/raw/docs/ui/sources.mdx +88 -17
- package/.docs/raw/docs/ui/streamdown.mdx +16 -7
- package/.docs/raw/docs/ui/thread-list.mdx +11 -13
- package/.docs/raw/docs/ui/thread.mdx +28 -33
- package/.docs/raw/docs/ui/tool-fallback.mdx +5 -6
- package/.docs/raw/docs/ui/tool-group.mdx +9 -8
- package/.docs/raw/docs/utilities/heat-graph.mdx +236 -0
- package/.docs/raw/docs/utilities/tw-shimmer.mdx +211 -0
- package/package.json +4 -4
- package/.docs/raw/docs/(reference)/legacy/styled/assistant-modal.mdx +0 -77
- package/.docs/raw/docs/(reference)/legacy/styled/decomposition.mdx +0 -635
- package/.docs/raw/docs/(reference)/legacy/styled/markdown.mdx +0 -77
- package/.docs/raw/docs/(reference)/legacy/styled/scrollbar.mdx +0 -72
- package/.docs/raw/docs/(reference)/legacy/styled/thread-width.mdx +0 -22
- package/.docs/raw/docs/(reference)/legacy/styled/thread.mdx +0 -77
- /package/.docs/raw/docs/cloud/{overview.mdx → index.mdx} +0 -0
|
@@ -5,28 +5,48 @@ description: Runtime for accessing and managing the list of threads.
|
|
|
5
5
|
|
|
6
6
|
import { ThreadListRuntime, ThreadListState } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
|
-
###
|
|
8
|
+
### `useAui` (Thread List Actions)
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Access thread list actions via `useAui`:
|
|
11
11
|
|
|
12
12
|
```tsx
|
|
13
|
-
import {
|
|
13
|
+
import { useAui } from "@assistant-ui/react";
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const aui = useAui();
|
|
16
|
+
|
|
17
|
+
// Switch threads
|
|
18
|
+
await aui.threads().switchToNewThread();
|
|
19
|
+
await aui.threads().switchToThread(threadId);
|
|
20
|
+
|
|
21
|
+
// Access the main thread runtime
|
|
22
|
+
const mainThread = aui.threads().main;
|
|
23
|
+
|
|
24
|
+
// Access a thread by ID
|
|
25
|
+
const thread = aui.threads().getById(threadId);
|
|
26
|
+
|
|
27
|
+
// Access thread list items
|
|
28
|
+
const mainItem = aui.threads().mainItem;
|
|
29
|
+
const itemByIndex = aui.threads().getItemByIndex(0);
|
|
30
|
+
const itemById = aui.threads().getItemById(threadId);
|
|
31
|
+
const archivedItem = aui.threads().getArchivedItemByIndex(0);
|
|
32
|
+
|
|
33
|
+
// Get current state
|
|
34
|
+
const state = aui.threads().getState();
|
|
35
|
+
const threadIds = state.threadIds;
|
|
36
|
+
const archivedThreadIds = state.archivedThreadIds;
|
|
16
37
|
```
|
|
17
38
|
|
|
18
39
|
<ParametersTable {...ThreadListRuntime} />
|
|
19
40
|
|
|
20
|
-
### `
|
|
41
|
+
### `useAuiState` (Thread List State)
|
|
21
42
|
|
|
22
|
-
|
|
43
|
+
Access thread list state reactively:
|
|
23
44
|
|
|
24
45
|
```tsx
|
|
25
|
-
import {
|
|
46
|
+
import { useAuiState } from "@assistant-ui/react";
|
|
26
47
|
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const isLoading = useThreadList((m) => m.isLoading);
|
|
48
|
+
const threads = useAuiState((s) => s.threads.threadIds);
|
|
49
|
+
const isLoading = useAuiState((s) => s.threads.isLoading);
|
|
30
50
|
```
|
|
31
51
|
|
|
32
52
|
<ParametersTable {...ThreadListState} />
|
|
@@ -6,28 +6,30 @@ description: Runtime for thread state, messages, and viewport management.
|
|
|
6
6
|
import { ThreadRuntime, ThreadState } from "@/generated/typeDocs";
|
|
7
7
|
import { ThreadViewportState } from "@/components/docs/parameters-table.context";
|
|
8
8
|
|
|
9
|
-
### `
|
|
9
|
+
### `useAui` (Thread Actions)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Access thread actions via `useAui`:
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
|
-
import {
|
|
14
|
+
import { useAui } from "@assistant-ui/react";
|
|
15
15
|
|
|
16
|
-
const
|
|
16
|
+
const aui = useAui();
|
|
17
|
+
aui.thread().cancelRun();
|
|
18
|
+
aui.thread().append({ role: "user", content: [{ type: "text", text: "Hello" }] });
|
|
17
19
|
```
|
|
18
20
|
|
|
19
21
|
<ParametersTable {...ThreadRuntime} />
|
|
20
22
|
|
|
21
|
-
### `
|
|
23
|
+
### `useAuiState` (Thread State)
|
|
22
24
|
|
|
23
|
-
Access the thread state
|
|
25
|
+
Access the thread state reactively:
|
|
24
26
|
|
|
25
27
|
```tsx
|
|
26
|
-
import {
|
|
28
|
+
import { useAuiState } from "@assistant-ui/react";
|
|
27
29
|
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
30
|
+
const isRunning = useAuiState((s) => s.thread.isRunning);
|
|
31
|
+
const isLoading = useAuiState((s) => s.thread.isLoading);
|
|
32
|
+
const messages = useAuiState((s) => s.thread.messages);
|
|
31
33
|
```
|
|
32
34
|
|
|
33
35
|
<ParametersTable {...ThreadState} />
|
|
@@ -24,7 +24,7 @@ These features may be removed at any time without notice.
|
|
|
24
24
|
|
|
25
25
|
A deprecation of these features will undergo a short (<1) month deprecation notice period.
|
|
26
26
|
|
|
27
|
-
- TailwindCSS Plugins (e.g.
|
|
27
|
+
- TailwindCSS Plugins (e.g. `tw-shimmer`, `tw-glass`)
|
|
28
28
|
- Context API
|
|
29
29
|
- Runtime API
|
|
30
30
|
- Message types
|
|
@@ -136,6 +136,7 @@ export function MyRuntimeProvider({ children }) {
|
|
|
136
136
|
const cloud = useMemo(
|
|
137
137
|
() => new AssistantCloud({
|
|
138
138
|
baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
|
|
139
|
+
anonymous: true,
|
|
139
140
|
}),
|
|
140
141
|
[]
|
|
141
142
|
);
|
|
@@ -198,16 +199,20 @@ type NewLangGraphRuntimeOptions = {
|
|
|
198
199
|
cloud?: AssistantCloud;
|
|
199
200
|
stream: (
|
|
200
201
|
messages: Message[],
|
|
201
|
-
|
|
202
|
+
config: {
|
|
203
|
+
abortSignal: AbortSignal;
|
|
202
204
|
initialize: () => Promise<{
|
|
203
205
|
remoteId: string;
|
|
204
206
|
externalId: string | undefined;
|
|
205
|
-
}
|
|
207
|
+
}>;
|
|
208
|
+
command?: { resume: string };
|
|
209
|
+
runConfig?: unknown;
|
|
210
|
+
checkpointId?: string;
|
|
206
211
|
}
|
|
207
212
|
) => AsyncGenerator;
|
|
208
213
|
create?: () => Promise<{ externalId: string }>;
|
|
209
|
-
load?: (
|
|
210
|
-
delete?: (
|
|
214
|
+
load?: (threadId: string) => Promise<ThreadState>;
|
|
215
|
+
delete?: (threadId: string) => Promise<void>;
|
|
211
216
|
};
|
|
212
217
|
```
|
|
213
218
|
|
|
@@ -42,7 +42,7 @@ The following types and components have been renamed:
|
|
|
42
42
|
- `useContentPartSource` → `useMessagePartSource`
|
|
43
43
|
- `useContentPartFile` → `useMessagePartFile`
|
|
44
44
|
- `useContentPartImage` → `useMessagePartImage`
|
|
45
|
-
- `useTextContentPart` → `
|
|
45
|
+
- `useTextContentPart` → `useMessagePartText`
|
|
46
46
|
|
|
47
47
|
#### Component Types
|
|
48
48
|
|
|
@@ -87,7 +87,9 @@ The `MessagePrimitive.Content` component has been renamed to `MessagePrimitive.P
|
|
|
87
87
|
|
|
88
88
|
```diff
|
|
89
89
|
-<MessagePrimitive.Content components={{ Text: MyText }} />
|
|
90
|
-
+<MessagePrimitive.Parts
|
|
90
|
+
+<MessagePrimitive.Parts>
|
|
91
|
+
+ {({ part }) => part.type === "text" ? <MyText {...part} /> : null}
|
|
92
|
+
+</MessagePrimitive.Parts>
|
|
91
93
|
```
|
|
92
94
|
|
|
93
95
|
### Migration
|
|
@@ -96,13 +98,13 @@ To migrate your codebase automatically, use the migration codemod:
|
|
|
96
98
|
|
|
97
99
|
```sh
|
|
98
100
|
# IMPORTANT: make sure to commit all changes to git / create a backup before running the codemod
|
|
99
|
-
npx
|
|
101
|
+
npx assistant-ui@latest upgrade
|
|
100
102
|
```
|
|
101
103
|
|
|
102
104
|
Or run the specific migration:
|
|
103
105
|
|
|
104
106
|
```sh
|
|
105
|
-
npx
|
|
107
|
+
npx assistant-ui@latest codemod v0-11/content-part-to-message-part .
|
|
106
108
|
```
|
|
107
109
|
|
|
108
110
|
#### Manual Migration Examples
|
|
@@ -167,4 +169,4 @@ If you prefer to migrate manually, here are some examples:
|
|
|
167
169
|
|
|
168
170
|
The ContentPart naming was inconsistent with the rest of the codebase, where "message parts" are used throughout. This change improves semantic clarity and makes the API more intuitive by aligning terminology across the entire library.
|
|
169
171
|
|
|
170
|
-
The old ContentPart APIs
|
|
172
|
+
The old ContentPart APIs have been completely removed. You must update all references to use the new MessagePart names.
|
|
@@ -26,6 +26,7 @@ The core hooks have been renamed for consistency and clarity:
|
|
|
26
26
|
- `useAssistantApi` → `useAui`
|
|
27
27
|
- `useAssistantState` → `useAuiState`
|
|
28
28
|
- `useAssistantEvent` → `useAuiEvent`
|
|
29
|
+
- `AssistantIf` → `AuiIf`
|
|
29
30
|
|
|
30
31
|
The variable naming convention has also changed from `api` to `aui`.
|
|
31
32
|
|
|
@@ -44,8 +45,8 @@ function MyComponent() {
|
|
|
44
45
|
const api = useAssistantApi();
|
|
45
46
|
const isRunning = useAssistantState(({ thread }) => thread.isRunning);
|
|
46
47
|
|
|
47
|
-
useAssistantEvent("thread.
|
|
48
|
-
console.log("Thread started");
|
|
48
|
+
useAssistantEvent("thread.run-start", () => {
|
|
49
|
+
console.log("Thread started running");
|
|
49
50
|
});
|
|
50
51
|
|
|
51
52
|
const handleSend = () => {
|
|
@@ -65,8 +66,8 @@ function MyComponent() {
|
|
|
65
66
|
const aui = useAui();
|
|
66
67
|
const isRunning = useAuiState((s) => s.thread.isRunning);
|
|
67
68
|
|
|
68
|
-
useAuiEvent("thread.
|
|
69
|
-
console.log("
|
|
69
|
+
useAuiEvent("thread.runStart", () => {
|
|
70
|
+
console.log("Run started");
|
|
70
71
|
});
|
|
71
72
|
|
|
72
73
|
const handleSend = () => {
|
|
@@ -118,8 +119,8 @@ The following hooks have been removed:
|
|
|
118
119
|
|
|
119
120
|
- `useMessageUtils` → Use `useAuiState((s) => s.message.isHovering)` / `useAuiState((s) => s.message.isCopied)`
|
|
120
121
|
- `useMessageUtilsStore` → Use `useAui()` with `aui.message().setIsHovering()` / `aui.message().setIsCopied()`
|
|
121
|
-
- `useToolUIs` →
|
|
122
|
-
- `useToolUIsStore` →
|
|
122
|
+
- `useToolUIs` → Removed with no direct equivalent. Use `useAssistantTool` / `makeAssistantToolUI` to register tool UIs instead.
|
|
123
|
+
- `useToolUIsStore` → Removed with no direct equivalent.
|
|
123
124
|
|
|
124
125
|
**Deprecated Hooks:**
|
|
125
126
|
|
|
@@ -137,7 +138,8 @@ The following hooks have been removed:
|
|
|
137
138
|
- `useMessagePartRuntime` → Use `useAui()` with `aui.part()`
|
|
138
139
|
- `useAttachment` → Use `useAuiState((s) => s.attachment)`
|
|
139
140
|
- `useAttachmentRuntime` → Use `useAui()` with `aui.attachment()`
|
|
140
|
-
- `useThreadModelContext`
|
|
141
|
+
- `useThreadModelContext` → Use `useAuiState((s) => s.thread.modelContext)`
|
|
142
|
+
- `useThreadModelConfig` → Removed. Use `useAui().thread().getModelContext()` instead.
|
|
141
143
|
- `useThreadComposer` → Use `useAuiState((s) => s.thread.composer)`
|
|
142
144
|
- `useThreadList` → Use `useAuiState((s) => s.threads)`
|
|
143
145
|
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Migration to v0.14
|
|
3
|
+
description: Primitives migrate from components prop to children render functions.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## Children API for Primitives
|
|
7
|
+
|
|
8
|
+
Version 0.14 replaces the `components` prop on primitives with a children render function pattern. This gives you full control over rendering with simple inline logic.
|
|
9
|
+
|
|
10
|
+
### ThreadPrimitive.Messages
|
|
11
|
+
|
|
12
|
+
**Before:**
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
<ThreadPrimitive.Messages
|
|
16
|
+
components={{
|
|
17
|
+
UserMessage,
|
|
18
|
+
EditComposer,
|
|
19
|
+
AssistantMessage,
|
|
20
|
+
}}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**After:**
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<ThreadPrimitive.Messages>
|
|
28
|
+
{({ message }) => {
|
|
29
|
+
if (message.composer.isEditing) return <EditComposer />;
|
|
30
|
+
if (message.role === "user") return <UserMessage />;
|
|
31
|
+
return <AssistantMessage />;
|
|
32
|
+
}}
|
|
33
|
+
</ThreadPrimitive.Messages>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### MessagePrimitive.Parts
|
|
37
|
+
|
|
38
|
+
**Before:**
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<MessagePrimitive.Parts
|
|
42
|
+
components={{
|
|
43
|
+
Text: MarkdownText,
|
|
44
|
+
Reasoning,
|
|
45
|
+
tools: { Fallback: ToolFallback },
|
|
46
|
+
}}
|
|
47
|
+
/>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**After:**
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<MessagePrimitive.Parts>
|
|
54
|
+
{({ part }) => {
|
|
55
|
+
if (part.type === "text") return <MarkdownText />;
|
|
56
|
+
if (part.type === "reasoning") return <Reasoning {...part} />;
|
|
57
|
+
if (part.type === "tool-call")
|
|
58
|
+
return part.toolUI ?? <ToolFallback {...part} />;
|
|
59
|
+
return null;
|
|
60
|
+
}}
|
|
61
|
+
</MessagePrimitive.Parts>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### `part.toolUI` and `part.dataRendererUI`
|
|
65
|
+
|
|
66
|
+
Tool-call parts now expose a `toolUI` property that resolves to the registered tool UI (via `useAssistantToolUI` / `makeAssistantToolUI`) or `null` if none is registered. Data parts similarly expose `dataRendererUI`.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
// Renders the registered tool UI if available, otherwise ToolFallback
|
|
70
|
+
if (part.type === "tool-call")
|
|
71
|
+
return part.toolUI ?? <ToolFallback {...part} />;
|
|
72
|
+
|
|
73
|
+
// Renders the registered data renderer if available
|
|
74
|
+
if (part.type === "data")
|
|
75
|
+
return part.dataRendererUI ?? null;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Returning `null`
|
|
79
|
+
|
|
80
|
+
Returning `null` from the children function renders registered tool UIs and data renderer UIs automatically via the registry. To explicitly render nothing (suppressing registered UIs), return `<></>`.
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
<MessagePrimitive.Parts>
|
|
84
|
+
{({ part }) => {
|
|
85
|
+
if (part.type === "text") return <MarkdownText />;
|
|
86
|
+
return null; // registered tool/data UIs still render
|
|
87
|
+
}}
|
|
88
|
+
</MessagePrimitive.Parts>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### ThreadPrimitive.Suggestions
|
|
92
|
+
|
|
93
|
+
**Before:**
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<ThreadPrimitive.Suggestions
|
|
97
|
+
components={{ Suggestion: SuggestionItem }}
|
|
98
|
+
/>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
**After:**
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<ThreadPrimitive.Suggestions>
|
|
105
|
+
{() => <SuggestionItem />}
|
|
106
|
+
</ThreadPrimitive.Suggestions>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### ThreadListPrimitive.Items
|
|
110
|
+
|
|
111
|
+
**Before:**
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<ThreadListPrimitive.Items
|
|
115
|
+
components={{ ThreadListItem: MyThreadListItem }}
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**After:**
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<ThreadListPrimitive.Items>
|
|
123
|
+
{() => <MyThreadListItem />}
|
|
124
|
+
</ThreadListPrimitive.Items>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Attachments
|
|
128
|
+
|
|
129
|
+
**Before:**
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<ComposerPrimitive.Attachments
|
|
133
|
+
components={{ Attachment: MyAttachment }}
|
|
134
|
+
/>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
**After:**
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
<ComposerPrimitive.Attachments>
|
|
141
|
+
{() => <MyAttachment />}
|
|
142
|
+
</ComposerPrimitive.Attachments>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### `addResult` / `resume` on enriched part state
|
|
146
|
+
|
|
147
|
+
When using the children API, tool-call parts include `addResult` and `resume` methods directly on the part object. This means `<ToolFallback {...part} />` works without needing a wrapper component to provide these methods.
|
|
148
|
+
|
|
149
|
+
### Backwards Compatibility
|
|
150
|
+
|
|
151
|
+
The `components` prop is still supported on all primitives but is deprecated and will be removed in a future version.
|
|
152
|
+
|
|
153
|
+
## Getting Help
|
|
154
|
+
|
|
155
|
+
If you encounter issues during migration:
|
|
156
|
+
|
|
157
|
+
1. Check the updated API documentation for detailed examples
|
|
158
|
+
2. Review the example applications in the repository
|
|
159
|
+
3. Report issues at https://github.com/assistant-ui/assistant-ui/issues
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Using old React versions
|
|
3
|
-
description: Compatibility notes for React 18
|
|
3
|
+
description: Compatibility notes for React 18 and 19.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
<Callout type="warning" title="
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<Callout type="warning" title="React 18 Required">
|
|
8
|
+
assistant-ui requires React 18 or React 19. React 17 and React 16 are not
|
|
9
|
+
supported. If you need help with an upgrade, join our
|
|
10
10
|
[Discord](https://discord.gg/S9dwgCNEFs).
|
|
11
11
|
</Callout>
|
|
12
12
|
|
|
13
|
-
This guide provides instructions for configuring assistant-ui to work with React 18
|
|
13
|
+
This guide provides instructions for configuring assistant-ui to work with React 18.
|
|
14
14
|
|
|
15
15
|
## React 18
|
|
16
16
|
|
|
@@ -65,135 +65,6 @@ const Button = React.forwardRef<
|
|
|
65
65
|
Button.displayName = "Button";
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
**Note:** If you're using a lower React version (17 or 16), you'll also need to follow the instructions for that version.
|
|
69
|
-
|
|
70
|
-
## React 17
|
|
71
|
-
|
|
72
|
-
For React 17 compatibility, in addition to the modifications outlined for React 18, you must also include a polyfill for the `useSyncExternalStore` hook (utilized by zustand).
|
|
73
|
-
|
|
74
|
-
### Patching Zustand with patch-package
|
|
75
|
-
|
|
76
|
-
Since the assistant-ui uses zustand internally, which depends on `useSyncExternalStore`, you'll need to patch the zustand package directly:
|
|
77
|
-
|
|
78
|
-
1. Install the required packages:
|
|
79
|
-
|
|
80
|
-
<InstallCommand npm={["use-sync-external-store", "patch-package"]} />
|
|
81
|
-
|
|
82
|
-
2. Add a postinstall script to your package.json:
|
|
83
|
-
|
|
84
|
-
```json
|
|
85
|
-
{
|
|
86
|
-
"scripts": {
|
|
87
|
-
"postinstall": "patch-package"
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
3. You'll want to follow the instructions in [patch-package](https://github.com/ds300/patch-package), by first making changes to the files of a particular package in your node_modules folder, then running either `yarn patch-package package-name` or `npx patch-package package-name`. You'll need a patch for zustand - within `node_modules/zustand`, open `zustand/react.js` and make the following code changes:
|
|
93
|
-
|
|
94
|
-
```diff
|
|
95
|
-
diff --git a/node_modules/zustand/react.js b/node_modules/zustand/react.js
|
|
96
|
-
index 7599cfb..64530a8 100644
|
|
97
|
-
--- a/node_modules/zustand/react.js
|
|
98
|
-
+++ b/node_modules/zustand/react.js
|
|
99
|
-
@@ -1,6 +1,6 @@
|
|
100
|
-
'use strict';
|
|
101
|
-
|
|
102
|
-
-var React = require('react');
|
|
103
|
-
+var React = require('use-sync-external-store/shim');
|
|
104
|
-
var vanilla = require('zustand/vanilla');
|
|
105
|
-
|
|
106
|
-
const identity = (arg) => arg;
|
|
107
|
-
@@ -10,7 +10,7 @@ function useStore(api, selector = identity) {
|
|
108
|
-
() => selector(api.getState()),
|
|
109
|
-
() => selector(api.getInitialState())
|
|
110
|
-
);
|
|
111
|
-
- React.useDebugValue(slice);
|
|
112
|
-
+ //React.useDebugValue(slice);
|
|
113
|
-
return slice;
|
|
114
|
-
}
|
|
115
|
-
const createImpl = (createState) => {
|
|
116
|
-
|
|
117
|
-
This patch replaces the React import in zustand with the polyfill from `use-sync-external-store/shim` and comments out the `useDebugValue` call which isn't needed.
|
|
118
|
-
|
|
119
|
-
You should then run the patch-package command `yarn patch-package zustand` or `npx patch-package zustand` which should create a `patches` folder with a zustand patch file similar looking to this:
|
|
120
|
-
|
|
121
|
-
```diff
|
|
122
|
-
diff --git a/node_modules/zustand/react.js b/node_modules/zustand/react.js
|
|
123
|
-
index 7599cfb..64530a8 100644
|
|
124
|
-
--- a/node_modules/zustand/react.js
|
|
125
|
-
+++ b/node_modules/zustand/react.js
|
|
126
|
-
@@ -1,6 +1,6 @@
|
|
127
|
-
'use strict';
|
|
128
|
-
|
|
129
|
-
-var React = require('react');
|
|
130
|
-
+var React = require('use-sync-external-store/shim');
|
|
131
|
-
var vanilla = require('zustand/vanilla');
|
|
132
|
-
|
|
133
|
-
const identity = (arg) => arg;
|
|
134
|
-
@@ -10,7 +10,7 @@ function useStore(api, selector = identity) {
|
|
135
|
-
() => selector(api.getState()),
|
|
136
|
-
() => selector(api.getInitialState())
|
|
137
|
-
);
|
|
138
|
-
- React.useDebugValue(slice);
|
|
139
|
-
+ //React.useDebugValue(slice);
|
|
140
|
-
return slice;
|
|
141
|
-
}
|
|
142
|
-
const createImpl = (createState) => {
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
4. You may also need to apply the same patches within `node_modules/@assistant-ui/react/` and possibly a nested dependency patch for `node_modules/@assistant-ui/react/node_modules/zustand`. Look for instances of `React.useSyncExternalStore` and replace with `{ useSyncExternalStore } from "use-sync-external-store/shim";` and comment out any `useDebugValue` calls. Finally, you may need to patch `useId` from React, so within `node_modules/@assistant-ui/react/dist/runtimes/remote-thread-list/RemoteThreadListThreadListRuntimeCore.js`, change the following:
|
|
146
|
-
|
|
147
|
-
```diff
|
|
148
|
-
-import { Fragment, useEffect, useId } from "react";
|
|
149
|
-
+import { Fragment, useEffect, useRef } from "react";
|
|
150
|
-
import { create } from "zustand";
|
|
151
|
-
import { AssistantMessageStream } from "assistant-stream";
|
|
152
|
-
import { RuntimeAdapterProvider } from "../adapters/RuntimeAdapterProvider.js";
|
|
153
|
-
import { jsx } from "react/jsx-runtime";
|
|
154
|
-
+
|
|
155
|
-
+// PATCH-PACKAGE: Polyfill for useId if not available in React 16
|
|
156
|
-
+let useId;
|
|
157
|
-
+try {
|
|
158
|
-
+ // Try to use React's useId if available
|
|
159
|
-
+ useId = require("react").useId;
|
|
160
|
-
+} catch (e) {}
|
|
161
|
-
+if (!useId) {
|
|
162
|
-
+ // Fallback polyfill
|
|
163
|
-
+ let globalId = 0;
|
|
164
|
-
+ useId = function() {
|
|
165
|
-
+ const idRef = useRef();
|
|
166
|
-
+ if (!idRef.current) {
|
|
167
|
-
+ globalId++;
|
|
168
|
-
+ idRef.current = `uid-${globalId}`;
|
|
169
|
-
+ }
|
|
170
|
-
+ return idRef.current;
|
|
171
|
-
+ };
|
|
172
|
-
+}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
5. Run the postinstall script to apply the patches:
|
|
176
|
-
|
|
177
|
-
```bash
|
|
178
|
-
npm run postinstall
|
|
179
|
-
# or
|
|
180
|
-
yarn postinstall
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
This patch replaces the React import in zustand with the polyfill from `use-sync-external-store/shim` and comments out the `useDebugValue` call which isn't needed.
|
|
184
|
-
|
|
185
|
-
**Note:** If you're using React 16, you'll also need to follow the instructions for that version.
|
|
186
|
-
|
|
187
|
-
## React 16
|
|
188
|
-
|
|
189
|
-
<Callout type="info" title="Incomplete Section">
|
|
190
|
-
This section is incomplete and contributions are welcome. If you're using
|
|
191
|
-
React 16 and have successfully integrated assistant-ui, please consider
|
|
192
|
-
contributing to this documentation.
|
|
193
|
-
</Callout>
|
|
194
|
-
|
|
195
|
-
For React 16 compatibility, you need to apply all the steps for **React 18** and **React 17** above.
|
|
196
|
-
|
|
197
68
|
## Additional Resources
|
|
198
69
|
|
|
199
70
|
If you encounter any issues with React compatibility, please:
|