@assistant-ui/mcp-docs-server 0.2.2 → 0.2.3
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 +2 -2
- package/.docs/organized/code-examples/with-a2a.md +4 -3
- package/.docs/organized/code-examples/with-ag-ui.md +5 -4
- package/.docs/organized/code-examples/with-ai-sdk-v7.md +12 -11
- package/.docs/organized/code-examples/with-artifacts.md +10 -9
- package/.docs/organized/code-examples/with-assistant-transport.md +4 -3
- package/.docs/organized/code-examples/with-browser-extension.md +3 -3
- package/.docs/organized/code-examples/with-chain-of-thought.md +14 -12
- package/.docs/organized/code-examples/with-cloud-standalone.md +5 -5
- package/.docs/organized/code-examples/with-cloud.md +9 -8
- package/.docs/organized/code-examples/with-custom-thread-list.md +8 -7
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +12 -11
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +12 -11
- package/.docs/organized/code-examples/with-eve.md +5 -4
- package/.docs/organized/code-examples/with-expo.md +214 -31
- package/.docs/organized/code-examples/with-external-store.md +4 -3
- package/.docs/organized/code-examples/with-ffmpeg.md +9 -8
- package/.docs/organized/code-examples/with-generative-ui.md +13 -15
- package/.docs/organized/code-examples/with-google-adk.md +4 -3
- package/.docs/organized/code-examples/with-heat-graph.md +2 -2
- package/.docs/organized/code-examples/with-image-generation.md +7 -6
- package/.docs/organized/code-examples/with-interactables.md +9 -8
- package/.docs/organized/code-examples/with-langchain.md +6 -5
- package/.docs/organized/code-examples/with-langgraph.md +6 -5
- package/.docs/organized/code-examples/with-livekit.md +13 -12
- package/.docs/organized/code-examples/with-mcp.md +11 -9
- package/.docs/organized/code-examples/with-nuxt.md +502 -502
- package/.docs/organized/code-examples/with-opencode.md +3 -3
- package/.docs/organized/code-examples/with-openui.md +14 -13
- package/.docs/organized/code-examples/with-pi.md +5 -4
- package/.docs/organized/code-examples/with-react-hook-form.md +13 -10
- package/.docs/organized/code-examples/with-react-ink-web.md +64 -14
- package/.docs/organized/code-examples/with-react-ink.md +3 -2
- package/.docs/organized/code-examples/with-react-router.md +6 -5
- package/.docs/organized/code-examples/with-resumable-stream.md +10 -9
- package/.docs/organized/code-examples/with-store.md +2 -2
- package/.docs/organized/code-examples/with-svelte.md +3 -3
- package/.docs/organized/code-examples/with-sveltekit.md +9 -9
- package/.docs/organized/code-examples/with-tanstack.md +8 -7
- package/.docs/organized/code-examples/with-tap-runtime.md +4 -3
- package/.docs/organized/code-examples/with-virtualized-thread.md +5 -4
- package/.docs/organized/code-examples/with-vue.md +2 -2
- package/.docs/raw/docs/{(docs) → (getting-started)}/devtools.mdx +1 -1
- package/.docs/raw/docs/{(docs) → (getting-started)}/index.mdx +4 -2
- package/.docs/raw/docs/{(docs) → (getting-started)}/installation.mdx +24 -24
- package/.docs/raw/docs/(reference)/api-reference/adapters/suggestions.mdx +6 -0
- package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +6 -1
- package/.docs/raw/docs/(reference)/api-reference/integrations/{react-ai-sdk.mdx → ai-sdk.mdx} +19 -19
- package/.docs/raw/docs/(reference)/api-reference/integrations/eve.mdx +22 -1
- package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +3 -3
- package/.docs/raw/docs/(reference)/api-reference/overview.mdx +2 -2
- package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +20 -2
- package/.docs/raw/docs/(reference)/api-reference/tools/interactables.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/transport/frame.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +3 -0
- package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +10 -10
- package/.docs/raw/docs/cloud/ai-sdk.mdx +2 -0
- package/.docs/raw/docs/copilots/assistant-frame.mdx +19 -8
- package/.docs/raw/docs/guides/attachments.mdx +2 -2
- package/.docs/raw/docs/guides/branching.mdx +1 -1
- package/.docs/raw/docs/guides/chatgpt-subscription.mdx +1 -1
- package/.docs/raw/docs/guides/dictation.mdx +1 -1
- package/.docs/raw/docs/guides/electron.mdx +1 -1
- package/.docs/raw/docs/guides/latex.mdx +1 -1
- package/.docs/raw/docs/guides/message-timing.mdx +11 -5
- package/.docs/raw/docs/guides/quoting.mdx +1 -1
- package/.docs/raw/docs/guides/resumable-streams.mdx +3 -3
- package/.docs/raw/docs/guides/speech.mdx +1 -1
- package/.docs/raw/docs/guides/suggestions.mdx +2 -2
- package/.docs/raw/docs/guides/voice.mdx +1 -1
- package/.docs/raw/docs/ink/hooks.mdx +1 -1
- package/.docs/raw/docs/ink/index.mdx +3 -2
- package/.docs/raw/docs/ink/migration.mdx +1 -1
- package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +3 -3
- package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +3 -3
- package/.docs/raw/docs/integrations/frameworks/{cloudflare-agents/overview.mdx → cloudflare-agents.mdx} +4 -3
- package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +1 -1
- package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +1 -1
- package/.docs/raw/docs/integrations/index.mdx +2 -2
- package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +3 -3
- package/.docs/raw/docs/migrations/toolkit-tools.mdx +2 -2
- package/.docs/raw/docs/primitives/action-bar.mdx +1 -1
- package/.docs/raw/docs/primitives/assistant-modal.mdx +1 -1
- package/.docs/raw/docs/primitives/attachment.mdx +1 -1
- package/.docs/raw/docs/primitives/branch-picker.mdx +1 -1
- package/.docs/raw/docs/primitives/chain-of-thought.mdx +3 -3
- package/.docs/raw/docs/primitives/composer.mdx +1 -1
- package/.docs/raw/docs/primitives/error.mdx +1 -1
- package/.docs/raw/docs/primitives/message.mdx +1 -1
- package/.docs/raw/docs/primitives/selection-toolbar.mdx +1 -1
- package/.docs/raw/docs/primitives/suggestion.mdx +1 -1
- package/.docs/raw/docs/primitives/thread-list.mdx +1 -1
- package/.docs/raw/docs/primitives/thread.mdx +1 -1
- package/.docs/raw/docs/react-native/adapters.mdx +1 -1
- package/.docs/raw/docs/react-native/index.mdx +2 -2
- package/.docs/raw/docs/react-native/migration.mdx +2 -2
- package/.docs/raw/docs/react-native/primitives.mdx +142 -5
- package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +13 -1
- package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +3 -3
- package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +4 -4
- package/.docs/raw/docs/runtimes/ai-sdk/v7.mdx +31 -16
- package/.docs/raw/docs/runtimes/concepts/adapters.mdx +3 -3
- package/.docs/raw/docs/runtimes/concepts/architecture.mdx +3 -3
- package/.docs/raw/docs/runtimes/concepts/threads.mdx +5 -5
- package/.docs/raw/docs/runtimes/langchain.mdx +1 -1
- package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +1 -1
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +1 -1
- package/.docs/raw/docs/tools/backend.mdx +4 -4
- package/.docs/raw/docs/tools/defining-tools.mdx +2 -2
- package/.docs/raw/docs/tools/generative-ui.mdx +2 -2
- package/.docs/raw/docs/tools/interactables.mdx +3 -3
- package/.docs/raw/docs/tools/mcp-apps.mdx +18 -1
- package/.docs/raw/docs/tools/mcp.mdx +2 -2
- package/.docs/raw/docs/tools/openui.mdx +2 -2
- package/.docs/raw/docs/tools/tool-ui.mdx +17 -5
- package/.docs/raw/docs/tools/user-managed-mcp.mdx +2 -2
- package/.docs/raw/docs/ui/assistant-modal.mdx +3 -3
- package/.docs/raw/docs/ui/assistant-sidebar.mdx +1 -1
- package/.docs/raw/docs/ui/attachment.mdx +30 -10
- package/.docs/raw/docs/ui/composer-trigger-popover.mdx +36 -1
- package/.docs/raw/docs/ui/context-display.mdx +1 -1
- package/.docs/raw/docs/ui/directive-text.mdx +1 -1
- package/.docs/raw/docs/ui/file.mdx +1 -1
- package/.docs/raw/docs/ui/follow-up-suggestions.mdx +1 -1
- package/.docs/raw/docs/ui/image.mdx +1 -1
- package/.docs/raw/docs/ui/markdown.mdx +40 -1
- package/.docs/raw/docs/ui/mermaid.mdx +1 -1
- package/.docs/raw/docs/ui/message-timing.mdx +1 -1
- package/.docs/raw/docs/ui/model-selector.mdx +4 -4
- package/.docs/raw/docs/ui/part-grouping.mdx +1 -1
- package/.docs/raw/docs/ui/quote.mdx +3 -3
- package/.docs/raw/docs/ui/reasoning.mdx +31 -3
- package/.docs/raw/docs/ui/scrollbar.mdx +1 -1
- package/.docs/raw/docs/ui/sources.mdx +10 -1
- package/.docs/raw/docs/ui/streamdown.mdx +2 -2
- package/.docs/raw/docs/ui/syntax-highlighting.mdx +1 -1
- package/.docs/raw/docs/ui/thread-list.mdx +40 -1
- package/.docs/raw/docs/ui/thread.mdx +49 -2
- package/.docs/raw/docs/ui/tool-fallback.mdx +23 -9
- package/.docs/raw/docs/ui/tool-group.mdx +1 -1
- package/.docs/raw/docs/ui/voice.mdx +1 -1
- package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
- package/dist/xulux/catalog-client.d.ts.map +1 -1
- package/dist/xulux/catalog-client.js +51 -6
- package/dist/xulux/catalog-client.js.map +1 -1
- package/dist/xulux/types.d.ts +7 -7
- package/dist/xulux/types.d.ts.map +1 -1
- package/dist/xulux/types.js.map +1 -1
- package/package.json +3 -3
- package/src/tools/tests/docs.test.ts +10 -7
- package/src/tools/tests/path-traversal.test.ts +5 -2
- package/src/tools/tests/xulux-templates.test.ts +63 -0
- package/src/xulux/catalog-client.ts +68 -23
- package/src/xulux/types.ts +17 -13
- package/.docs/raw/docs/ui/accordion.mdx +0 -266
- package/.docs/raw/docs/ui/badge.mdx +0 -150
- package/.docs/raw/docs/ui/diff-viewer.mdx +0 -280
- package/.docs/raw/docs/ui/dot-matrix.mdx +0 -133
- package/.docs/raw/docs/ui/number-roll.mdx +0 -154
- package/.docs/raw/docs/ui/select.mdx +0 -254
- package/.docs/raw/docs/ui/tabs.mdx +0 -271
- /package/.docs/raw/docs/{(docs) → (getting-started)}/architecture.mdx +0 -0
- /package/.docs/raw/docs/{(docs) → (getting-started)}/base-ui.mdx +0 -0
- /package/.docs/raw/docs/{(docs) → (getting-started)}/cli.mdx +0 -0
- /package/.docs/raw/docs/{(docs) → (getting-started)}/llm.mdx +0 -0
- /package/.docs/raw/docs/{(docs) → (getting-started)}/rtl.mdx +0 -0
|
@@ -8,7 +8,7 @@ If you already have an assistant-ui web app, most of your code transfers directl
|
|
|
8
8
|
## What stays the same
|
|
9
9
|
|
|
10
10
|
- **Runtime setup** — `useChatRuntime`, `useLocalRuntime`, `ChatModelAdapter`, and all runtime options work identically.
|
|
11
|
-
- **AI SDK integration** — `@assistant-ui/
|
|
11
|
+
- **AI SDK integration** — `@assistant-ui/ai-sdk` works with React Native. Your `useChatRuntime` + `AssistantChatTransport` setup transfers directly.
|
|
12
12
|
- **Tool definitions** — `Tools({ toolkit })` and toolkit renderers use the same API.
|
|
13
13
|
- **State hooks** — `useAuiState`, `useAui`, and selector patterns are the same.
|
|
14
14
|
- **Backend code** — Your API routes, streaming endpoints, and server-side logic need zero changes.
|
|
@@ -40,7 +40,7 @@ Your `useChatRuntime` setup works as-is — no changes needed:
|
|
|
40
40
|
|
|
41
41
|
```tsx title="hooks/use-app-runtime.ts"
|
|
42
42
|
// This file is identical to your web version
|
|
43
|
-
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/
|
|
43
|
+
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";
|
|
44
44
|
|
|
45
45
|
export function useAppRuntime() {
|
|
46
46
|
return useChatRuntime({
|
|
@@ -12,7 +12,7 @@ Many primitives share their core logic with `@assistant-ui/react` via `@assistan
|
|
|
12
12
|
## Thread
|
|
13
13
|
|
|
14
14
|
```tsx
|
|
15
|
-
import { ThreadPrimitive } from "@assistant-ui/react-native";
|
|
15
|
+
import { AuiIf, ThreadPrimitive } from "@assistant-ui/react-native";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
### ThreadPrimitive.Root
|
|
@@ -100,12 +100,17 @@ Renders a single message at a specific index in the thread. Provides message con
|
|
|
100
100
|
|
|
101
101
|
### ThreadPrimitive.Empty
|
|
102
102
|
|
|
103
|
-
Renders its children only when the thread
|
|
103
|
+
Renders its children only when the thread is empty (no messages and not loading). Deprecated in favor of `AuiIf`.
|
|
104
104
|
|
|
105
105
|
```tsx
|
|
106
106
|
<ThreadPrimitive.Empty>
|
|
107
107
|
<Text>Send a message to get started</Text>
|
|
108
108
|
</ThreadPrimitive.Empty>
|
|
109
|
+
|
|
110
|
+
// preferred
|
|
111
|
+
<AuiIf condition={(s) => s.thread.isEmpty}>
|
|
112
|
+
<Text>Send a message to get started</Text>
|
|
113
|
+
</AuiIf>
|
|
109
114
|
```
|
|
110
115
|
|
|
111
116
|
### ThreadPrimitive.If
|
|
@@ -117,9 +122,14 @@ Conditional rendering based on thread state. Deprecated in favor of `AuiIf`.
|
|
|
117
122
|
<Text>No messages yet</Text>
|
|
118
123
|
</ThreadPrimitive.If>
|
|
119
124
|
|
|
120
|
-
|
|
125
|
+
// preferred
|
|
126
|
+
<AuiIf condition={(s) => s.thread.isEmpty}>
|
|
127
|
+
<Text>No messages yet</Text>
|
|
128
|
+
</AuiIf>
|
|
129
|
+
|
|
130
|
+
<AuiIf condition={(s) => s.thread.isRunning}>
|
|
121
131
|
<ActivityIndicator />
|
|
122
|
-
</
|
|
132
|
+
</AuiIf>
|
|
123
133
|
```
|
|
124
134
|
|
|
125
135
|
| Prop | Type | Description |
|
|
@@ -197,7 +207,10 @@ import { AuiIf } from "@assistant-ui/react-native";
|
|
|
197
207
|
## Composer
|
|
198
208
|
|
|
199
209
|
```tsx
|
|
200
|
-
import {
|
|
210
|
+
import {
|
|
211
|
+
ComposerPrimitive,
|
|
212
|
+
QueueItemPrimitive,
|
|
213
|
+
} from "@assistant-ui/react-native";
|
|
201
214
|
```
|
|
202
215
|
|
|
203
216
|
### ComposerPrimitive.Root
|
|
@@ -275,6 +288,79 @@ Renders composer attachments using the provided component configuration.
|
|
|
275
288
|
</ComposerPrimitive.AddAttachment>
|
|
276
289
|
```
|
|
277
290
|
|
|
291
|
+
### ComposerPrimitive.Queue
|
|
292
|
+
|
|
293
|
+
Renders all queued composer items. Each item is wrapped in a `QueueItemByIndexProvider`, so `QueueItemPrimitive.*` can read item state and call queue actions inside the render prop. Backed by the shared `ComposerPrimitiveQueue` from `@assistant-ui/core/react`.
|
|
294
|
+
|
|
295
|
+
```tsx
|
|
296
|
+
<ComposerPrimitive.Queue>
|
|
297
|
+
{({ queueItem }) => (
|
|
298
|
+
<View>
|
|
299
|
+
<QueueItemPrimitive.Text />
|
|
300
|
+
<QueueItemPrimitive.Steer>
|
|
301
|
+
<Text>Run now</Text>
|
|
302
|
+
</QueueItemPrimitive.Steer>
|
|
303
|
+
<QueueItemPrimitive.Remove>
|
|
304
|
+
<Text>Remove</Text>
|
|
305
|
+
</QueueItemPrimitive.Remove>
|
|
306
|
+
</View>
|
|
307
|
+
)}
|
|
308
|
+
</ComposerPrimitive.Queue>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
| Prop | Type | Description |
|
|
312
|
+
|------|------|-------------|
|
|
313
|
+
| `children` | `(value: { queueItem: QueueItemState }) => ReactNode` | Render function called for each queue item |
|
|
314
|
+
|
|
315
|
+
### ComposerPrimitive.Quote
|
|
316
|
+
|
|
317
|
+
Renders the active composer quote preview. Children are only rendered while `s.composer.quote` is set, so this acts as both a container and a gate.
|
|
318
|
+
|
|
319
|
+
```tsx
|
|
320
|
+
<ComposerPrimitive.Quote>
|
|
321
|
+
<View>
|
|
322
|
+
<Text>Quoting:</Text>
|
|
323
|
+
<ComposerPrimitive.QuoteText />
|
|
324
|
+
<ComposerPrimitive.QuoteDismiss>
|
|
325
|
+
<Text>Clear</Text>
|
|
326
|
+
</ComposerPrimitive.QuoteDismiss>
|
|
327
|
+
</View>
|
|
328
|
+
</ComposerPrimitive.Quote>
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
| Prop | Type | Description |
|
|
332
|
+
|------|------|-------------|
|
|
333
|
+
| `children` | `ReactNode` | Quote preview content; only rendered when a quote is set |
|
|
334
|
+
| `...rest` | `ViewProps` | Standard React Native View props |
|
|
335
|
+
|
|
336
|
+
### ComposerPrimitive.QuoteText
|
|
337
|
+
|
|
338
|
+
Renders the quoted text from `s.composer.quote?.text`. Pass `children` to override the displayed value.
|
|
339
|
+
|
|
340
|
+
```tsx
|
|
341
|
+
<ComposerPrimitive.QuoteText />
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
| Prop | Type | Description |
|
|
345
|
+
|------|------|-------------|
|
|
346
|
+
| `children` | `ReactNode` | Override content; defaults to `s.composer.quote?.text` |
|
|
347
|
+
| `...rest` | `TextProps` | Standard React Native Text props |
|
|
348
|
+
|
|
349
|
+
### ComposerPrimitive.QuoteDismiss
|
|
350
|
+
|
|
351
|
+
`Pressable` that clears the active quote by calling `aui.composer.setQuote(undefined)`.
|
|
352
|
+
|
|
353
|
+
```tsx
|
|
354
|
+
<ComposerPrimitive.QuoteDismiss>
|
|
355
|
+
<Text>Clear</Text>
|
|
356
|
+
</ComposerPrimitive.QuoteDismiss>
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
| Prop | Type | Description |
|
|
360
|
+
|------|------|-------------|
|
|
361
|
+
| `children` | `PressableProps["children"]` | Button content, including Pressable render-function children |
|
|
362
|
+
| `...rest` | `Omit<PressableProps, "onPress">` | Standard React Native Pressable props except `onPress` |
|
|
363
|
+
|
|
278
364
|
### ComposerPrimitive.AttachmentByIndex
|
|
279
365
|
|
|
280
366
|
Renders a single composer attachment at the specified index. Useful for building custom attachment layouts.
|
|
@@ -557,6 +643,57 @@ Container `View` for an attachment.
|
|
|
557
643
|
</AttachmentPrimitive.Remove>
|
|
558
644
|
```
|
|
559
645
|
|
|
646
|
+
## QueueItem
|
|
647
|
+
|
|
648
|
+
```tsx
|
|
649
|
+
import { QueueItemPrimitive } from "@assistant-ui/react-native";
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
Primitives for rendering individual queued composer items. Use inside a `ComposerPrimitive.Queue` render prop, where the queue item context is set up by `QueueItemByIndexProvider`.
|
|
653
|
+
|
|
654
|
+
### QueueItemPrimitive.Text
|
|
655
|
+
|
|
656
|
+
Renders the queue item's text with React Native `<Text>`. Pass `children` to override the displayed value.
|
|
657
|
+
|
|
658
|
+
```tsx
|
|
659
|
+
<QueueItemPrimitive.Text />
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
| Prop | Type | Description |
|
|
663
|
+
|------|------|-------------|
|
|
664
|
+
| `children` | `ReactNode` | Override content; defaults to the text parts of `s.queueItem.parts` |
|
|
665
|
+
| `...rest` | `TextProps` | Standard React Native Text props |
|
|
666
|
+
|
|
667
|
+
### QueueItemPrimitive.Remove
|
|
668
|
+
|
|
669
|
+
`Pressable` that removes the queue item by calling `aui.queueItem.remove()`.
|
|
670
|
+
|
|
671
|
+
```tsx
|
|
672
|
+
<QueueItemPrimitive.Remove>
|
|
673
|
+
<Text>Remove</Text>
|
|
674
|
+
</QueueItemPrimitive.Remove>
|
|
675
|
+
```
|
|
676
|
+
|
|
677
|
+
| Prop | Type | Description |
|
|
678
|
+
|------|------|-------------|
|
|
679
|
+
| `children` | `PressableProps["children"]` | Button content, including Pressable render-function children |
|
|
680
|
+
| `...rest` | `Omit<PressableProps, "onPress">` | Standard React Native Pressable props except `onPress` |
|
|
681
|
+
|
|
682
|
+
### QueueItemPrimitive.Steer
|
|
683
|
+
|
|
684
|
+
`Pressable` that promotes the queue item to run next by calling `aui.queueItem.steer()`.
|
|
685
|
+
|
|
686
|
+
```tsx
|
|
687
|
+
<QueueItemPrimitive.Steer>
|
|
688
|
+
<Text>Run now</Text>
|
|
689
|
+
</QueueItemPrimitive.Steer>
|
|
690
|
+
```
|
|
691
|
+
|
|
692
|
+
| Prop | Type | Description |
|
|
693
|
+
|------|------|-------------|
|
|
694
|
+
| `children` | `PressableProps["children"]` | Button content, including Pressable render-function children |
|
|
695
|
+
| `...rest` | `Omit<PressableProps, "onPress">` | Standard React Native Pressable props except `onPress` |
|
|
696
|
+
|
|
560
697
|
## ActionBar
|
|
561
698
|
|
|
562
699
|
```tsx
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Runtime options
|
|
3
|
-
description: useAgUiRuntime options, adapters,
|
|
3
|
+
description: useAgUiRuntime options, adapters, message conversion, thread list.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
import { AguiIcon } from "@/components/icons/agui";
|
|
@@ -85,6 +85,18 @@ An assistant message whose tool call has no matching tool result is reconstructe
|
|
|
85
85
|
|
|
86
86
|
Interrupts are restored when your backend persists them on the assistant message. The AG-UI message body has no interrupt field, so persist the runtime's own `metadata.custom.agui.interrupts` array alongside the message; `fromAgUiMessages` reads it back, reconstructs `requires-action` / `interrupt` status, and re-attaches the metadata, so `getPendingInterrupts`, `useAgUiInterrupts`, and `submitInterruptResponses` work on reload. When both a pending tool call and an interrupt are present on the same message, interrupt status wins. Without the persisted array, interrupt state cannot be reconstructed.
|
|
87
87
|
|
|
88
|
+
## Building AG-UI run input
|
|
89
|
+
|
|
90
|
+
`toAgUiMessages` is the converter the runtime uses to build `runAgent` input. Use it when you own the transport, for example an AG-UI WebSocket, and need the same conversion from `onNew`'s `AppendMessage`:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { toAgUiMessages } from "@assistant-ui/react-ag-ui";
|
|
94
|
+
|
|
95
|
+
const [agUiMessage] = toAgUiMessages([message]);
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
`AppendMessage` has no `id`. The converter assigns one so the AG-UI message schema is satisfied. A caller-supplied id is kept. A generated id is new on every call, so convert once and send that object. Only `user`, `assistant`, `system`, `developer`, `tool`, and `reasoning` inputs are converted.
|
|
99
|
+
|
|
88
100
|
## Thread list (experimental)
|
|
89
101
|
|
|
90
102
|
<Callout type="warn">
|
|
@@ -5,13 +5,13 @@ description: Connect the Vercel AI SDK to a React chat UI via assistant-ui — u
|
|
|
5
5
|
|
|
6
6
|
import { VercelIcon } from "@/components/icons/vercel";
|
|
7
7
|
|
|
8
|
-
`@assistant-ui/
|
|
8
|
+
`@assistant-ui/ai-sdk` integrates assistant-ui with the [Vercel AI SDK](https://ai-sdk.dev/). It covers `useChat` flows, custom transports, frontend tools, attachments, quote context, multi-step agents, token usage, and cloud persistence.
|
|
9
9
|
|
|
10
10
|
## Pick a version
|
|
11
11
|
|
|
12
12
|
| AI SDK | Runtime package | Docs |
|
|
13
13
|
| --- | --- | --- |
|
|
14
|
-
| `ai@^7` + `@ai-sdk/react@^4` | `@assistant-ui/
|
|
14
|
+
| `ai@^7` + `@ai-sdk/react@^4` | `@assistant-ui/ai-sdk` (latest) | [v7 (current)](/docs/runtimes/ai-sdk/v7) |
|
|
15
15
|
| `ai@^6` + `@ai-sdk/react@^3` | `@assistant-ui/react-ai-sdk@1.3.40` | [v6 (legacy)](/docs/runtimes/ai-sdk/v6-legacy) |
|
|
16
16
|
| `ai@^5` + `@ai-sdk/react@^2` | `@assistant-ui/react-ai-sdk@1.1.21` | [v5 (legacy)](/docs/runtimes/ai-sdk/v5-legacy) |
|
|
17
17
|
| `ai@^4` | `@assistant-ui/react-data-stream` | [v4 (legacy)](/docs/runtimes/ai-sdk/v4-legacy) |
|
|
@@ -20,7 +20,7 @@ New projects should target v7. v6, v5, and v4 are documented for projects that h
|
|
|
20
20
|
|
|
21
21
|
## Architecture
|
|
22
22
|
|
|
23
|
-
`@assistant-ui/
|
|
23
|
+
`@assistant-ui/ai-sdk` is layered on `ExternalStoreRuntime` (see [architecture](/docs/runtimes/concepts/architecture)). Features that ship as runtime adapters work the same way they do everywhere else; see [adapters](/docs/runtimes/concepts/adapters).
|
|
24
24
|
|
|
25
25
|
For reload-safe streaming (persist an in-flight response so the client can reconnect), see [Resumable Streams](/docs/guides/resumable-streams).
|
|
26
26
|
|
|
@@ -6,12 +6,12 @@ description: Reference for projects still on AI SDK v4. New projects should use
|
|
|
6
6
|
import { VercelIcon } from "@/components/icons/vercel";
|
|
7
7
|
|
|
8
8
|
<Callout type="warn">
|
|
9
|
-
AI SDK v4 is a legacy version. New projects should use [AI SDK v7](/docs/runtimes/ai-sdk/v7). v4 integrations use the older `@assistant-ui/react-data-stream` package, not `@assistant-ui/
|
|
9
|
+
AI SDK v4 is a legacy version. New projects should use [AI SDK v7](/docs/runtimes/ai-sdk/v7). v4 integrations use the older `@assistant-ui/react-data-stream` package, not `@assistant-ui/ai-sdk`.
|
|
10
10
|
</Callout>
|
|
11
11
|
|
|
12
12
|
## Why legacy
|
|
13
13
|
|
|
14
|
-
Vercel ships AI SDK majors roughly yearly; v4 is three majors behind v7. The current `@assistant-ui/
|
|
14
|
+
Vercel ships AI SDK majors roughly yearly; v4 is three majors behind v7. The current `@assistant-ui/ai-sdk` package targets the current AI SDK major (v7) exclusively, so v4 users plug into [`@assistant-ui/react-data-stream`](/docs/runtimes/custom/data-stream) instead — the same data stream protocol that v4's `toDataStreamResponse()` emits.
|
|
15
15
|
|
|
16
16
|
This page is reference for existing v4 projects. Plan to migrate to v7 when feasible.
|
|
17
17
|
|
|
@@ -79,7 +79,7 @@ detects it automatically. If a custom proxy strips or hides that header, pass
|
|
|
79
79
|
| Feature | v4 | v6 |
|
|
80
80
|
| --- | --- | --- |
|
|
81
81
|
| `ai` package | `ai@^4` | `ai@^6` |
|
|
82
|
-
| Runtime package | `@assistant-ui/react-data-stream` | `@assistant-ui/react-ai-sdk` |
|
|
82
|
+
| Runtime package | `@assistant-ui/react-data-stream` | `@assistant-ui/react-ai-sdk@1.3.40` |
|
|
83
83
|
| Runtime hook | `useDataStreamRuntime` | `useChatRuntime` |
|
|
84
84
|
| Response | `toDataStreamResponse()` | `toUIMessageStreamResponse()` |
|
|
85
85
|
| Tool schema | `parameters: z.object({...})` | `inputSchema: zodSchema(z.object({...}))` |
|
|
@@ -89,7 +89,7 @@ detects it automatically. If a custom proxy strips or hides that header, pass
|
|
|
89
89
|
|
|
90
90
|
When you are ready to upgrade:
|
|
91
91
|
|
|
92
|
-
1. Swap `@assistant-ui/react-data-stream` for `@assistant-ui/
|
|
92
|
+
1. Swap `@assistant-ui/react-data-stream` for `@assistant-ui/ai-sdk`.
|
|
93
93
|
2. Update your backend to the current AI SDK's `streamText` (see [v7 docs](/docs/runtimes/ai-sdk/v7)).
|
|
94
94
|
3. Switch the runtime hook from `useDataStreamRuntime` to `useChatRuntime`.
|
|
95
95
|
|
|
@@ -48,17 +48,17 @@ npm init -y
|
|
|
48
48
|
<PlatformTabs>
|
|
49
49
|
<Tab value="React">
|
|
50
50
|
|
|
51
|
-
<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/
|
|
51
|
+
<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/ai-sdk", "ai@^7", "@ai-sdk/react@^4", "@ai-sdk/openai", "zod"]} />
|
|
52
52
|
|
|
53
53
|
</Tab>
|
|
54
54
|
<Tab value="React Native">
|
|
55
55
|
|
|
56
|
-
<InstallCommand expo={["@assistant-ui/react-native", "@assistant-ui/
|
|
56
|
+
<InstallCommand expo={["@assistant-ui/react-native", "@assistant-ui/ai-sdk", "ai@^7", "@ai-sdk/react@^4", "@ai-sdk/openai", "zod"]} />
|
|
57
57
|
|
|
58
58
|
</Tab>
|
|
59
59
|
<Tab value="React Ink">
|
|
60
60
|
|
|
61
|
-
<InstallCommand npm={["@assistant-ui/react-ink", "@assistant-ui/
|
|
61
|
+
<InstallCommand npm={["@assistant-ui/react-ink", "@assistant-ui/ai-sdk", "ai@^7", "@ai-sdk/react@^4", "@ai-sdk/openai", "zod", "ink", "react"]} />
|
|
62
62
|
|
|
63
63
|
</Tab>
|
|
64
64
|
</PlatformTabs>
|
|
@@ -122,7 +122,7 @@ export async function POST(req: Request) {
|
|
|
122
122
|
|
|
123
123
|
import { Thread } from "@/components/assistant-ui/thread";
|
|
124
124
|
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
125
|
-
import { useChatRuntime } from "@assistant-ui/
|
|
125
|
+
import { useChatRuntime } from "@assistant-ui/ai-sdk";
|
|
126
126
|
|
|
127
127
|
export default function Home() {
|
|
128
128
|
const runtime = useChatRuntime();
|
|
@@ -144,7 +144,7 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react-native";
|
|
|
144
144
|
import {
|
|
145
145
|
AssistantChatTransport,
|
|
146
146
|
useChatRuntime,
|
|
147
|
-
} from "@assistant-ui/
|
|
147
|
+
} from "@assistant-ui/ai-sdk";
|
|
148
148
|
import { View } from "react-native";
|
|
149
149
|
import { Thread } from "@/components/assistant-ui/thread";
|
|
150
150
|
|
|
@@ -174,7 +174,7 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
|
|
|
174
174
|
import {
|
|
175
175
|
AssistantChatTransport,
|
|
176
176
|
useChatRuntime,
|
|
177
|
-
} from "@assistant-ui/
|
|
177
|
+
} from "@assistant-ui/ai-sdk";
|
|
178
178
|
import { Box } from "ink";
|
|
179
179
|
import { Thread } from "./components/thread.js";
|
|
180
180
|
|
|
@@ -231,7 +231,7 @@ Follow the [Ink setup](/docs/ink) to add a terminal Thread, composer, and suppor
|
|
|
231
231
|
import { openai } from "@ai-sdk/openai";
|
|
232
232
|
import { streamText, convertToModelMessages, zodSchema, createUIMessageStreamResponse, toUIMessageStream } from "ai";
|
|
233
233
|
import type { UIMessage } from "ai";
|
|
234
|
-
import { frontendTools } from "@assistant-ui/
|
|
234
|
+
import { frontendTools } from "@assistant-ui/ai-sdk";
|
|
235
235
|
|
|
236
236
|
export async function POST(req: Request) {
|
|
237
237
|
const {
|
|
@@ -341,7 +341,7 @@ import { useChat } from "@ai-sdk/react";
|
|
|
341
341
|
import {
|
|
342
342
|
AssistantRuntimeProvider,
|
|
343
343
|
useAISDKRuntime,
|
|
344
|
-
} from "@assistant-ui/
|
|
344
|
+
} from "@assistant-ui/ai-sdk";
|
|
345
345
|
import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
|
|
346
346
|
import { Thread } from "@/components/assistant-ui/thread";
|
|
347
347
|
|
|
@@ -372,7 +372,7 @@ import {
|
|
|
372
372
|
defineToolkit,
|
|
373
373
|
Tools,
|
|
374
374
|
} from "@assistant-ui/react";
|
|
375
|
-
import { useAISDKRuntime } from "@assistant-ui/
|
|
375
|
+
import { useAISDKRuntime } from "@assistant-ui/ai-sdk";
|
|
376
376
|
import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
|
|
377
377
|
import { Thread } from "@/components/assistant-ui/thread";
|
|
378
378
|
|
|
@@ -432,7 +432,7 @@ import {
|
|
|
432
432
|
createUIMessageStreamResponse,
|
|
433
433
|
toUIMessageStream,
|
|
434
434
|
} from "ai";
|
|
435
|
-
import { injectQuoteContext } from "@assistant-ui/
|
|
435
|
+
import { injectQuoteContext } from "@assistant-ui/ai-sdk";
|
|
436
436
|
import { openai } from "@ai-sdk/openai";
|
|
437
437
|
|
|
438
438
|
export async function POST(req: Request) {
|
|
@@ -455,7 +455,7 @@ export async function POST(req: Request) {
|
|
|
455
455
|
|
|
456
456
|
```ts title="@/app/api/chat/route.ts"
|
|
457
457
|
import { streamText, convertToModelMessages, createUIMessageStreamResponse, toUIMessageStream } from "ai";
|
|
458
|
-
import { frontendTools } from "@assistant-ui/
|
|
458
|
+
import { frontendTools } from "@assistant-ui/ai-sdk";
|
|
459
459
|
|
|
460
460
|
export async function POST(req: Request) {
|
|
461
461
|
const { messages, tools, config } = await req.json();
|
|
@@ -484,7 +484,7 @@ export async function POST(req: Request) {
|
|
|
484
484
|
```tsx title="@/components/TokenCounter.tsx"
|
|
485
485
|
"use client";
|
|
486
486
|
|
|
487
|
-
import { useThreadTokenUsage } from "@assistant-ui/
|
|
487
|
+
import { useThreadTokenUsage } from "@assistant-ui/ai-sdk";
|
|
488
488
|
|
|
489
489
|
export function TokenCounter() {
|
|
490
490
|
const usage = useThreadTokenUsage();
|
|
@@ -539,7 +539,7 @@ For server-side cloud persistence with zero adapter code, see the [AssistantClou
|
|
|
539
539
|
```tsx
|
|
540
540
|
"use client";
|
|
541
541
|
|
|
542
|
-
import { useChatRuntime } from "@assistant-ui/
|
|
542
|
+
import { useChatRuntime } from "@assistant-ui/ai-sdk";
|
|
543
543
|
import type { ThreadHistoryAdapter } from "@assistant-ui/react";
|
|
544
544
|
|
|
545
545
|
const historyAdapter: ThreadHistoryAdapter = {
|
|
@@ -585,7 +585,7 @@ Each persisted row follows `{ id, parent_id, format, content }`. `fmt.encode` pr
|
|
|
585
585
|
import {
|
|
586
586
|
useChatRuntime,
|
|
587
587
|
AssistantChatTransport,
|
|
588
|
-
} from "@assistant-ui/
|
|
588
|
+
} from "@assistant-ui/ai-sdk";
|
|
589
589
|
|
|
590
590
|
const runtime = useChatRuntime({
|
|
591
591
|
transport: new AssistantChatTransport({ api: "/my-custom-api/chat" }),
|
|
@@ -644,13 +644,28 @@ const runtime = useChatRuntime({
|
|
|
644
644
|
|
|
645
645
|
When omitted, `resumeRun` throws `"Runtime does not support resuming runs."`. For streams that should survive a page reload without a custom channel, use the built-in transport-level path instead: see [Resumable streams](/docs/guides/resumable-streams), which reconnects automatically on mount and reports failures via `onResumeError`.
|
|
646
646
|
|
|
647
|
+
### messageRepository
|
|
648
|
+
|
|
649
|
+
Import a branch-aware AI SDK message tree once, and only when `useChat` is empty. After that seed, live updates come only from `useChat`. Clearing the chat or passing a new object identity does not reload the tree. Persisted threads that already go through `adapters.history` do not need this.
|
|
650
|
+
|
|
651
|
+
```tsx
|
|
652
|
+
const runtime = useChatRuntime({
|
|
653
|
+
messageRepository: storedTree,
|
|
654
|
+
unstable_onBranchChange: ({ headId }) => {
|
|
655
|
+
saveSelectedBranch(headId);
|
|
656
|
+
},
|
|
657
|
+
});
|
|
658
|
+
```
|
|
659
|
+
|
|
660
|
+
`unstable_onBranchChange` fires after an explicit `switchToBranch` (for example a BranchPicker click). It complements `setMessages` and does not enable switching by itself. The callback is unstable and may change without notice.
|
|
661
|
+
|
|
647
662
|
## Advanced: useAISDKRuntime
|
|
648
663
|
|
|
649
664
|
When you need direct access to the `useChat` instance (e.g. to share it with non-assistant-ui code), drop down to `useAISDKRuntime`:
|
|
650
665
|
|
|
651
666
|
```tsx
|
|
652
667
|
import { useChat } from "@ai-sdk/react";
|
|
653
|
-
import { useAISDKRuntime } from "@assistant-ui/
|
|
668
|
+
import { useAISDKRuntime } from "@assistant-ui/ai-sdk";
|
|
654
669
|
|
|
655
670
|
const chat = useChat();
|
|
656
671
|
const runtime = useAISDKRuntime(chat);
|
|
@@ -658,7 +673,7 @@ const runtime = useAISDKRuntime(chat);
|
|
|
658
673
|
|
|
659
674
|
`useAISDKRuntime` does not provide `cloud` or the higher-level adapter slots; those are part of `useChatRuntime`. If you need both your own `useChat` access AND cloud thread support, you generally want `useChatRuntime` and to read the chat state through assistant-ui hooks instead.
|
|
660
675
|
|
|
661
|
-
`useAISDKRuntime` accepts `joinStrategy` and `
|
|
676
|
+
`useAISDKRuntime` accepts `joinStrategy`, `onResume`, `messageRepository`, and `unstable_onBranchChange` (see [Runtime options](#runtime-options)) plus one option of its own, `cancelPendingToolCallsOnSend`:
|
|
662
677
|
|
|
663
678
|
```tsx
|
|
664
679
|
const runtime = useAISDKRuntime(chat, {
|
|
@@ -21,7 +21,7 @@ const runtime = useChatRuntime({ adapters: { attachments, history } });
|
|
|
21
21
|
|
|
22
22
|
## Support matrix
|
|
23
23
|
|
|
24
|
-
| Adapter | LocalRuntime | ExternalStoreRuntime | DataStream | AssistantTransport |
|
|
24
|
+
| Adapter | LocalRuntime | ExternalStoreRuntime | DataStream | AssistantTransport | ai-sdk | react-langgraph | react-langchain | react-google-adk | react-a2a | react-ag-ui | react-opencode |
|
|
25
25
|
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
|
|
26
26
|
| Attachments | Yes | Yes | Yes | Yes | Yes | (via thread state) | (via thread state) | Yes | Yes | Yes | (no) |
|
|
27
27
|
| Speech | Yes | Yes | Yes | (no) | Yes | Yes | Yes | Yes | Yes | Yes | (no) |
|
|
@@ -173,7 +173,7 @@ const feedbackAdapter: FeedbackAdapter = {
|
|
|
173
173
|
|
|
174
174
|
## History adapter
|
|
175
175
|
|
|
176
|
-
Per-thread message persistence. Used by `LocalRuntime` and adapters built on it (`
|
|
176
|
+
Per-thread message persistence. Used by `LocalRuntime` and adapters built on it (`ai-sdk`, `react-google-adk`, `react-a2a`, `useDataStreamRuntime`).
|
|
177
177
|
|
|
178
178
|
`ExternalStoreRuntime` does not use a history adapter directly, since you already own the message array. Persist via your store instead. `react-langgraph` and `react-langchain` source persistence from server-side thread state, exposed through their `load` callbacks.
|
|
179
179
|
|
|
@@ -196,7 +196,7 @@ type ThreadHistoryAdapter = {
|
|
|
196
196
|
`load` runs when a thread opens. `append` runs after each message completes.
|
|
197
197
|
|
|
198
198
|
<Callout type="info">
|
|
199
|
-
`
|
|
199
|
+
`ai-sdk` requires `withFormat` so messages round-trip as AI SDK `UIMessage` objects. An adapter without `withFormat` throws at runtime in the AI SDK path. See the [AI SDK history docs](/docs/runtimes/ai-sdk/v7) for the full pattern.
|
|
200
200
|
</Callout>
|
|
201
201
|
|
|
202
202
|
## Suggestion adapter
|
|
@@ -10,7 +10,7 @@ assistant-ui exposes runtime integrations at three layers. Understanding which l
|
|
|
10
10
|
<Flow.Root
|
|
11
11
|
llm={`graph TD
|
|
12
12
|
subgraph Framework["Framework adapters"]
|
|
13
|
-
A1[
|
|
13
|
+
A1[ai-sdk]
|
|
14
14
|
A2[react-langgraph]
|
|
15
15
|
A3[react-langchain]
|
|
16
16
|
A4[react-google-adk]
|
|
@@ -58,7 +58,7 @@ assistant-ui exposes runtime integrations at three layers. Understanding which l
|
|
|
58
58
|
<Flow.Group flowId="adapters">
|
|
59
59
|
<Flow.GroupLabel>Framework adapters</Flow.GroupLabel>
|
|
60
60
|
<Flow.Row className="flex-wrap justify-start">
|
|
61
|
-
<Flow.Node>
|
|
61
|
+
<Flow.Node>ai-sdk</Flow.Node>
|
|
62
62
|
<Flow.Node>react-langgraph</Flow.Node>
|
|
63
63
|
<Flow.Node>react-langchain</Flow.Node>
|
|
64
64
|
<Flow.Node>react-google-adk</Flow.Node>
|
|
@@ -118,7 +118,7 @@ The fastest path. Each adapter wraps one of the core or protocol layers and adds
|
|
|
118
118
|
|
|
119
119
|
| Adapter | Layered on | Targets |
|
|
120
120
|
| --- | --- | --- |
|
|
121
|
-
| `
|
|
121
|
+
| `ai-sdk` | `ExternalStoreRuntime` | Vercel AI SDK v7 (`useChat`) |
|
|
122
122
|
| `react-langgraph` | `ExternalStoreRuntime` | LangGraph Cloud via `@langchain/langgraph-sdk` |
|
|
123
123
|
| `react-langchain` | `ExternalStoreRuntime` | LangGraph Cloud via `@langchain/react`'s `useStream` |
|
|
124
124
|
| `react-google-adk` | `ExternalStoreRuntime` | Google ADK JS or Python agents |
|
|
@@ -50,9 +50,9 @@ See the [cloud documentation](/docs/cloud) for setup, auth, and self-host option
|
|
|
50
50
|
|
|
51
51
|
## RemoteThreadListRuntime (custom database)
|
|
52
52
|
|
|
53
|
-
`useRemoteThreadListRuntime` lets you back the thread list with any database while keeping the per-thread runtime simple. You provide a `RemoteThreadListAdapter` describing how to list, create, rename, archive, and delete threads.
|
|
53
|
+
`useRemoteThreadListRuntime` lets you back the thread list with any database while keeping the per-thread runtime simple. You provide a `RemoteThreadListAdapter` describing how to list, create, rename, archive, and delete threads. Keep that adapter reference stable across renders (module scope or `useMemo`). Replacing it reloads the list and drops cached threads that are not in the replacement page.
|
|
54
54
|
|
|
55
|
-
Works with any `LocalRuntime`-based runtime, including framework adapters that build on it (`
|
|
55
|
+
Works with any `LocalRuntime`-based runtime, including framework adapters that build on it (`ai-sdk`, `react-google-adk`, `react-a2a`, `useDataStreamRuntime`).
|
|
56
56
|
|
|
57
57
|
```tsx title="app/MyProvider.tsx"
|
|
58
58
|
"use client";
|
|
@@ -241,11 +241,11 @@ function ReloadOnAuth() {
|
|
|
241
241
|
}
|
|
242
242
|
```
|
|
243
243
|
|
|
244
|
-
`reload()` discards in-flight responses from superseded calls, so it is safe to invoke on every auth transition.
|
|
244
|
+
`reload()` discards in-flight responses from superseded calls, so it is safe to invoke on every auth transition. On the `RemoteThreadList` store entry, a recreated adapter object is a no-op until you call `reload()`. `reload()` against the same instance refreshes the list and keeps the open thread. `reload()` after a different adapter instance resets selection and cached records, then loads the replacement store.
|
|
245
245
|
|
|
246
246
|
### Refetching the open thread
|
|
247
247
|
|
|
248
|
-
`reload()` re-runs `list()`, which refreshes thread list metadata only. It does not touch the messages of the thread the user is looking at. When the open thread's server state changes out of band, so that nothing arrives over the stream (a human-in-the-loop interrupt raised by another process, a stalled stream, a status change picked up by polling), call `aui.threads.reloadMainThread()`:
|
|
248
|
+
`reload()` against the same adapter instance re-runs `list()`, which refreshes thread list metadata only. It does not touch the messages of the thread the user is looking at. When the open thread's server state changes out of band, so that nothing arrives over the stream (a human-in-the-loop interrupt raised by another process, a stalled stream, a status change picked up by polling), call `aui.threads.reloadMainThread()`:
|
|
249
249
|
|
|
250
250
|
```tsx
|
|
251
251
|
function RefetchOnInterrupt({ status }: { status: string }) {
|
|
@@ -268,7 +268,7 @@ How the refetch happens depends on the runtime, in one of three ways. When it de
|
|
|
268
268
|
|
|
269
269
|
`useAuiState((s) => s.thread.capabilities.refetchThread)` reports which of those you would get, in place or not. It is not a signal for whether to offer a refresh at all: it is false on the remount path, where the call still does the work, and false again where the call does nothing.
|
|
270
270
|
|
|
271
|
-
Both the LangGraph and Google ADK adapters register the in-place refetch capability when their runtime hook receives a `load` function; without one they fall back to the remount path. Other remote adapters take the remount path unless they provide the capability themselves.
|
|
271
|
+
Both the LangGraph and Google ADK adapters register the in-place refetch capability when their runtime hook receives a `load` function; without one they fall back to the remount path. The Eve adapter registers it when the installed `eve` exposes `resume()` (0.44.1 and later), with no option to pass; on older releases it falls back like any other adapter, which for the single and in-memory thread lists it is usually paired with means the call resolves without doing anything. A refetch that lands during a run also settles differently across the three: LangGraph and Google ADK issue the load right away, so the promise settles at fetch latency and each decides on arrival how much of the snapshot a racing run leaves standing, while Eve queues the replay behind the in-flight turn, so its promise settles only once that turn parks. Other remote adapters take the remount path unless they provide the capability themselves.
|
|
272
272
|
|
|
273
273
|
For an external store runtime, declare it with `onRefetchThread`, which is unrelated to `onReload` (that one re-generates an assistant message); the tap `ExternalThread` accepts the same prop:
|
|
274
274
|
|
|
@@ -744,8 +744,8 @@ Register the components with `makeAssistantDataUI`, keyed by the `UIMessage`'s `
|
|
|
744
744
|
import {
|
|
745
745
|
AssistantRuntimeProvider,
|
|
746
746
|
makeAssistantDataUI,
|
|
747
|
-
Thread,
|
|
748
747
|
} from "@assistant-ui/react";
|
|
748
|
+
import { Thread } from "@/components/assistant-ui/thread";
|
|
749
749
|
import { useStreamRuntime } from "@assistant-ui/react-langchain";
|
|
750
750
|
|
|
751
751
|
const ChartUI = makeAssistantDataUI({
|
|
@@ -41,7 +41,7 @@ export function MyRuntimeProvider({
|
|
|
41
41
|
### Render the Thread
|
|
42
42
|
|
|
43
43
|
```tsx title="app/page.tsx"
|
|
44
|
-
import { Thread } from "
|
|
44
|
+
import { Thread } from "@/components/assistant-ui/thread";
|
|
45
45
|
import { MyRuntimeProvider } from "./MyRuntimeProvider";
|
|
46
46
|
|
|
47
47
|
export default function Page() {
|
|
@@ -88,7 +88,7 @@ For frameworks without a dedicated adapter, these wiring guides route through an
|
|
|
88
88
|
icon={<CloudflareIcon width={20} height={20} />}
|
|
89
89
|
title="Cloudflare Agents"
|
|
90
90
|
description="Stateful agents on Durable Objects with WebSocket streaming. Wired through the Vercel AI SDK runtime."
|
|
91
|
-
href="/docs/integrations/frameworks/cloudflare-agents
|
|
91
|
+
href="/docs/integrations/frameworks/cloudflare-agents"
|
|
92
92
|
/>
|
|
93
93
|
<Card
|
|
94
94
|
icon={<MastraIcon width={20} height={20} />}
|
|
@@ -10,10 +10,10 @@ For authoring tools, see [Defining Tools](/docs/tools/defining-tools). For MCP s
|
|
|
10
10
|
|
|
11
11
|
## The request body
|
|
12
12
|
|
|
13
|
-
`@assistant-ui/
|
|
13
|
+
`@assistant-ui/ai-sdk` posts `{ messages, system, tools }` to your route. `tools` is the map of **frontend** tools the client serialized for this request (the model needs their schemas to call them, even though they run in the browser):
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
|
-
import type { FrontendTools } from "@assistant-ui/
|
|
16
|
+
import type { FrontendTools } from "@assistant-ui/ai-sdk";
|
|
17
17
|
|
|
18
18
|
const {
|
|
19
19
|
messages,
|
|
@@ -31,7 +31,7 @@ const {
|
|
|
31
31
|
When you author tools in a [`"use generative"` file](/docs/tools/defining-tools#quick-start-use-generative), the same import resolves to the **server build** inside a route handler — schema plus any backend `execute`, with renderers stripped. Wrap it in an `AISDKToolkit` and call `.tools()` with the uploaded `tools`:
|
|
32
32
|
|
|
33
33
|
```ts title="app/api/chat/route.ts"
|
|
34
|
-
import { AISDKToolkit } from "@assistant-ui/
|
|
34
|
+
import { AISDKToolkit } from "@assistant-ui/ai-sdk";
|
|
35
35
|
import { streamText, convertToModelMessages, type UIMessage } from "ai";
|
|
36
36
|
import { openai } from "@ai-sdk/openai";
|
|
37
37
|
import toolkit from "../../toolkit";
|
|
@@ -70,7 +70,7 @@ serializes browser-executed tools into the request `tools`. Convert them to the
|
|
|
70
70
|
AI SDK shape with `frontendTools` and spread your own server tools alongside:
|
|
71
71
|
|
|
72
72
|
```ts title="app/api/chat/route.ts"
|
|
73
|
-
import { frontendTools } from "@assistant-ui/
|
|
73
|
+
import { frontendTools } from "@assistant-ui/ai-sdk";
|
|
74
74
|
import { streamText, convertToModelMessages, tool, zodSchema } from "ai";
|
|
75
75
|
import { openai } from "@ai-sdk/openai";
|
|
76
76
|
import { z } from "zod";
|
|
@@ -121,7 +121,7 @@ Import the toolkit in your runtime provider and pass it to `config` via `Tools`:
|
|
|
121
121
|
"use client";
|
|
122
122
|
|
|
123
123
|
import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
|
|
124
|
-
import { useChatRuntime } from "@assistant-ui/
|
|
124
|
+
import { useChatRuntime } from "@assistant-ui/ai-sdk";
|
|
125
125
|
import toolkit from "./toolkit";
|
|
126
126
|
|
|
127
127
|
export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
|
|
@@ -148,7 +148,7 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
|
|
|
148
148
|
The same import resolves to the **server build** inside a route handler. Wrap it in an `AISDKToolkit` so the model is configured with every tool's schema:
|
|
149
149
|
|
|
150
150
|
```ts title="app/api/chat/route.ts"
|
|
151
|
-
import { AISDKToolkit } from "@assistant-ui/
|
|
151
|
+
import { AISDKToolkit } from "@assistant-ui/ai-sdk";
|
|
152
152
|
import { streamText, convertToModelMessages } from "ai";
|
|
153
153
|
import { openai } from "@ai-sdk/openai";
|
|
154
154
|
import toolkit from "../../toolkit";
|
|
@@ -99,7 +99,7 @@ import {
|
|
|
99
99
|
AuiConfig,
|
|
100
100
|
Tools,
|
|
101
101
|
} from "@assistant-ui/react";
|
|
102
|
-
import { useChatRuntime } from "@assistant-ui/
|
|
102
|
+
import { useChatRuntime } from "@assistant-ui/ai-sdk";
|
|
103
103
|
import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
|
|
104
104
|
import toolkit from "./toolkit";
|
|
105
105
|
|
|
@@ -135,7 +135,7 @@ The route imports the same toolkit module. The compiler resolves that import to
|
|
|
135
135
|
|
|
136
136
|
```ts title="app/api/chat/route.ts"
|
|
137
137
|
import { openai } from "@ai-sdk/openai";
|
|
138
|
-
import { AISDKToolkit } from "@assistant-ui/
|
|
138
|
+
import { AISDKToolkit } from "@assistant-ui/ai-sdk";
|
|
139
139
|
import { convertToModelMessages, stepCountIs, streamText } from "ai";
|
|
140
140
|
import toolkit from "@/app/toolkit";
|
|
141
141
|
|