@assistant-ui/mcp-docs-server 0.1.39 → 0.2.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/.docs/organized/code-examples/waterfall.md +7 -7
- package/.docs/organized/code-examples/with-a2a.md +7 -7
- package/.docs/organized/code-examples/with-ag-ui.md +8 -8
- package/.docs/organized/code-examples/with-ai-sdk-v7.md +9 -9
- package/.docs/organized/code-examples/with-artifacts.md +463 -138
- package/.docs/organized/code-examples/with-assistant-transport.md +7 -7
- package/.docs/organized/code-examples/with-browser-extension.md +6 -6
- package/.docs/organized/code-examples/with-chain-of-thought.md +11 -11
- package/.docs/organized/code-examples/with-cloud-standalone.md +9 -9
- package/.docs/organized/code-examples/with-cloud.md +9 -9
- package/.docs/organized/code-examples/with-custom-thread-list.md +9 -9
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +11 -11
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +11 -11
- package/.docs/organized/code-examples/with-eve.md +8 -8
- package/.docs/organized/code-examples/with-expo.md +26 -46
- package/.docs/organized/code-examples/with-external-store.md +7 -7
- package/.docs/organized/code-examples/with-ffmpeg.md +9 -9
- package/.docs/organized/code-examples/with-generative-ui.md +10 -10
- package/.docs/organized/code-examples/with-google-adk.md +8 -8
- package/.docs/organized/code-examples/with-heat-graph.md +6 -6
- package/.docs/organized/code-examples/with-image-generation.md +9 -9
- package/.docs/organized/code-examples/with-interactables.md +9 -9
- package/.docs/organized/code-examples/with-langchain.md +9 -9
- package/.docs/organized/code-examples/with-langgraph.md +9 -9
- package/.docs/organized/code-examples/with-livekit.md +11 -11
- package/.docs/organized/code-examples/with-mcp.md +28 -23
- package/.docs/organized/code-examples/with-opencode.md +8 -11
- package/.docs/organized/code-examples/with-pi.md +14 -14
- package/.docs/organized/code-examples/with-react-hook-form.md +10 -10
- package/.docs/organized/code-examples/with-react-ink-web.md +5 -5
- package/.docs/organized/code-examples/with-react-ink.md +2 -2
- package/.docs/organized/code-examples/with-react-router.md +11 -11
- package/.docs/organized/code-examples/with-resumable-stream.md +10 -10
- package/.docs/organized/code-examples/with-store.md +6 -6
- package/.docs/organized/code-examples/with-tanstack.md +9 -9
- package/.docs/organized/code-examples/with-tap-runtime.md +7 -7
- package/.docs/organized/code-examples/with-virtualized-thread.md +8 -8
- package/.docs/raw/docs/(docs)/cli.mdx +2 -0
- package/.docs/raw/docs/(docs)/devtools.mdx +7 -2
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/a2ui.mdx +40 -0
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +3 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +19 -420
- package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +4 -1
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +21 -0
- package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +1 -9
- package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +1 -18
- package/.docs/raw/docs/cloud/langgraph.mdx +1 -1
- package/.docs/raw/docs/copilots/model-context.mdx +1 -1
- package/.docs/raw/docs/copilots/motivation.mdx +1 -1
- package/.docs/raw/docs/guides/attachments.mdx +3 -3
- package/.docs/raw/docs/guides/branching.mdx +2 -2
- package/.docs/raw/docs/guides/context-api.mdx +89 -111
- package/.docs/raw/docs/guides/editing.mdx +5 -5
- package/.docs/raw/docs/guides/electron.mdx +369 -0
- package/.docs/raw/docs/guides/index.mdx +10 -0
- package/.docs/raw/docs/guides/quoting.mdx +3 -3
- package/.docs/raw/docs/guides/resumable-stream-deployment.mdx +2 -2
- package/.docs/raw/docs/ink/hooks.mdx +3 -3
- package/.docs/raw/docs/ink/primitives.mdx +14 -7
- package/.docs/raw/docs/integrations/auth/better-auth.mdx +2 -2
- package/.docs/raw/docs/integrations/auth/clerk.mdx +2 -2
- package/.docs/raw/docs/integrations/auth/next-auth.mdx +3 -3
- package/.docs/raw/docs/integrations/observability/langsmith.mdx +1 -1
- package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +36 -9
- package/.docs/raw/docs/migrations/v0-15.mdx +156 -0
- package/.docs/raw/docs/primitives/composer.mdx +1 -1
- package/.docs/raw/docs/primitives/thread-list.mdx +2 -2
- package/.docs/raw/docs/react-native/hooks.mdx +3 -3
- package/.docs/raw/docs/react-native/index.mdx +2 -2
- package/.docs/raw/docs/react-native/primitives.mdx +39 -5
- 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/v5-legacy.mdx +4 -4
- package/.docs/raw/docs/runtimes/ai-sdk/v6-legacy.mdx +4 -4
- package/.docs/raw/docs/runtimes/ai-sdk/v7.mdx +2 -2
- package/.docs/raw/docs/runtimes/concepts/threads.mdx +10 -10
- package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +2 -2
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +1 -1
- package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +3 -3
- package/.docs/raw/docs/runtimes/langchain.mdx +2 -2
- package/.docs/raw/docs/runtimes/langgraph/overview.mdx +1 -1
- package/.docs/raw/docs/runtimes/opencode/hooks.mdx +3 -1
- package/.docs/raw/docs/tools/a2ui.mdx +107 -0
- package/.docs/raw/docs/tools/interactables-legacy.mdx +4 -4
- package/.docs/raw/docs/tools/interactables.mdx +3 -3
- package/.docs/raw/docs/tools/mcp-apps.mdx +61 -2
- package/.docs/raw/docs/tools/user-managed-mcp.mdx +52 -7
- package/.docs/raw/docs/ui/follow-up-suggestions.mdx +2 -0
- package/.docs/raw/docs/ui/model-selector.mdx +1 -1
- package/.docs/raw/docs/ui/part-grouping.mdx +0 -4
- package/.docs/raw/docs/ui/reasoning.mdx +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/prepare-docs/code-examples.js.map +1 -1
- package/dist/prepare-docs/prepare.d.ts +1 -1
- package/dist/stdio.d.ts +1 -1
- package/dist/tools/docs.d.ts +6 -10
- package/dist/tools/docs.d.ts.map +1 -1
- package/dist/tools/docs.js +2 -2
- package/dist/tools/docs.js.map +1 -1
- package/dist/tools/examples.d.ts +4 -8
- package/dist/tools/examples.d.ts.map +1 -1
- package/dist/tools/examples.js +2 -2
- package/dist/tools/examples.js.map +1 -1
- package/dist/tools/resources.d.ts +1 -1
- package/dist/tools/resources.d.ts.map +1 -1
- package/dist/tools/resources.js +1 -1
- package/dist/tools/resources.js.map +1 -1
- package/dist/tools/search.d.ts +4 -10
- package/dist/tools/search.d.ts.map +1 -1
- package/dist/tools/search.js +2 -2
- package/dist/tools/search.js.map +1 -1
- package/dist/tools/tests/mcp-test-client.d.ts +15 -0
- package/dist/tools/tests/mcp-test-client.d.ts.map +1 -0
- package/dist/tools/tests/mcp-test-client.js +68 -0
- package/dist/tools/tests/mcp-test-client.js.map +1 -0
- package/dist/tools/tests/test-setup.d.ts.map +1 -1
- package/dist/tools/xulux-templates.d.ts +9 -23
- package/dist/tools/xulux-templates.d.ts.map +1 -1
- package/dist/tools/xulux-templates.js +4 -4
- package/dist/tools/xulux-templates.js.map +1 -1
- package/dist/utils/logger.d.ts.map +1 -1
- package/dist/utils/security.js.map +1 -1
- package/package.json +4 -3
- package/src/index.ts +2 -2
- package/src/tools/docs.ts +2 -2
- package/src/tools/examples.ts +2 -2
- package/src/tools/resources.ts +1 -4
- package/src/tools/search.ts +2 -2
- package/src/tools/tests/completions.test.ts +40 -26
- package/src/tools/tests/integration.test.ts +3 -4
- package/src/tools/tests/mcp-protocol.test.ts +160 -175
- package/src/tools/tests/mcp-test-client.ts +111 -0
- package/src/tools/tests/resources.test.ts +97 -66
- package/src/tools/xulux-templates.ts +4 -4
|
@@ -3,7 +3,7 @@ title: Primitive Hooks
|
|
|
3
3
|
description: Primitive hooks for reading scoped assistant-ui runtime state, viewport behavior, timing, and message part data inside React components.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { unstable_useComposerInput, unstable_useMessageStallDetection,
|
|
6
|
+
import { unstable_useComposerInput, unstable_useMessageStallDetection, useCloudThreadListAdapter, useMessagePartData, useScrollLock, useThreadViewportAutoScroll } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -18,26 +18,6 @@ import { unstable_useComposerInput, unstable_useMessageStallDetection, useAssist
|
|
|
18
18
|
|
|
19
19
|
<ParametersTable {...useCloudThreadListAdapter} />
|
|
20
20
|
|
|
21
|
-
### useEditComposerAttachment
|
|
22
|
-
|
|
23
|
-
```ts
|
|
24
|
-
const useEditComposerAttachment: { (): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }); <TSelected>(selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected): TSelected; <TSelected>(selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected) | undefined): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | TSelected; (options: { optional?: false | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }); (options: { optional?: boolean | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; })) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "edit-composer"; } & { source: "edit-composer"; }) | TSelected | null; };
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### useEditComposerAttachmentRuntime
|
|
28
|
-
|
|
29
|
-
<ParametersTable {...useEditComposerAttachmentRuntime} />
|
|
30
|
-
|
|
31
|
-
### useMessageAttachment
|
|
32
|
-
|
|
33
|
-
```ts
|
|
34
|
-
const useMessageAttachment: { (): { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }; <TSelected>(selector: (state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected): TSelected; <TSelected>(selector: ((state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected) | undefined): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) | TSelected; (options: { optional?: false | undefined; }): { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }; (options: { optional?: boolean | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) | null; <TSelected>(options: { optional?: false | undefined; selector: (state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: { id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "message"; } & { source: "message"; }) | TSelected | null; };
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### useMessageAttachmentRuntime
|
|
38
|
-
|
|
39
|
-
<ParametersTable {...useMessageAttachmentRuntime} />
|
|
40
|
-
|
|
41
21
|
### useMessageQuote
|
|
42
22
|
|
|
43
23
|
Hook that returns the quote info for the current message, if any.
|
|
@@ -110,16 +90,6 @@ const handleCollapse = () => {
|
|
|
110
90
|
|
|
111
91
|
<ParametersTable {...useScrollLock} />
|
|
112
92
|
|
|
113
|
-
### useThreadComposerAttachment
|
|
114
|
-
|
|
115
|
-
```ts
|
|
116
|
-
const useThreadComposerAttachment: { (): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }); <TSelected>(selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected): TSelected; <TSelected>(selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected) | undefined): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | TSelected; (options: { optional?: false | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }); (options: { optional?: boolean | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; })) => TSelected) | undefined; }): ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: PendingAttachmentStatus; file: File; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | ({ id: string; type: "image" | "document" | "file" | (string & {}); name: string; contentType?: string | undefined; file?: File; content?: ThreadUserMessagePart[]; } & { status: CompleteAttachmentStatus; content: ThreadUserMessagePart[]; } & { readonly source: "thread-composer"; } & { source: "thread-composer"; }) | TSelected | null; };
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### useThreadComposerAttachmentRuntime
|
|
120
|
-
|
|
121
|
-
<ParametersTable {...useThreadComposerAttachmentRuntime} />
|
|
122
|
-
|
|
123
93
|
### useThreadViewport
|
|
124
94
|
|
|
125
95
|
```ts
|
|
@@ -247,230 +217,13 @@ const aria = unstable_useTriggerPopoverAriaProps();
|
|
|
247
217
|
function unstable_useTriggerPopoverAriaProps(): Unstable_TriggerPopoverAriaProps;
|
|
248
218
|
```
|
|
249
219
|
|
|
250
|
-
### useAssistantRuntime
|
|
251
|
-
|
|
252
|
-
<Callout type="warn">
|
|
253
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
254
|
-
</Callout>
|
|
255
|
-
|
|
256
|
-
Hook to access the AssistantRuntime from the current context.
|
|
257
|
-
|
|
258
|
-
The AssistantRuntime provides access to the top-level assistant state and actions,
|
|
259
|
-
including thread management, tool registration, and configuration.
|
|
260
|
-
|
|
261
|
-
```tsx
|
|
262
|
-
// Before:
|
|
263
|
-
function MyComponent() {
|
|
264
|
-
const runtime = useAssistantRuntime();
|
|
265
|
-
const handleNewThread = () => {
|
|
266
|
-
runtime.switchToNewThread();
|
|
267
|
-
};
|
|
268
|
-
return <button onClick={handleNewThread}>New Thread</button>;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
// After:
|
|
272
|
-
function MyComponent() {
|
|
273
|
-
const aui = useAui();
|
|
274
|
-
const handleNewThread = () => {
|
|
275
|
-
aui.threads().switchToNewThread();
|
|
276
|
-
};
|
|
277
|
-
return <button onClick={handleNewThread}>New Thread</button>;
|
|
278
|
-
}
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
<ParametersTable {...useAssistantRuntime} />
|
|
282
|
-
|
|
283
|
-
### useAttachment
|
|
284
|
-
|
|
285
|
-
<Callout type="warn">
|
|
286
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.attachment)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
287
|
-
</Callout>
|
|
288
|
-
|
|
289
|
-
```ts
|
|
290
|
-
const useAttachment: { (): AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }; <TSelected>(selector: (state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected): TSelected; <TSelected>(selector: ((state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected) | undefined): (AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) | TSelected; (options: { optional?: false | undefined; }): AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }; (options: { optional?: boolean | undefined; }): (AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) | null; <TSelected>(options: { optional?: false | undefined; selector: (state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected) | undefined; }): (AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) => TSelected) | undefined; }): (AttachmentState & { source: "message" | "thread-composer" | "edit-composer"; }) | TSelected | null; };
|
|
291
|
-
```
|
|
292
|
-
|
|
293
|
-
### useAttachmentRuntime
|
|
294
|
-
|
|
295
|
-
<Callout type="warn">
|
|
296
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.attachment()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
297
|
-
</Callout>
|
|
298
|
-
|
|
299
|
-
<ParametersTable {...useAttachmentRuntime} />
|
|
300
|
-
|
|
301
|
-
### useComposer
|
|
302
|
-
|
|
303
|
-
<Callout type="warn">
|
|
304
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.composer)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
305
|
-
</Callout>
|
|
306
|
-
|
|
307
|
-
Hook to access the current composer state.
|
|
308
|
-
|
|
309
|
-
This hook provides reactive access to the composer's state, including text content,
|
|
310
|
-
attachments, editing status, and send/cancel capabilities.
|
|
311
|
-
|
|
312
|
-
```tsx
|
|
313
|
-
// Before:
|
|
314
|
-
function ComposerStatus() {
|
|
315
|
-
const text = useComposer((state) => state.text);
|
|
316
|
-
const canSend = useComposer((state) => state.canSend);
|
|
317
|
-
const attachmentCount = useComposer((state) => state.attachments.length);
|
|
318
|
-
return (
|
|
319
|
-
<div>
|
|
320
|
-
Text: {text.length} chars,
|
|
321
|
-
Attachments: {attachmentCount},
|
|
322
|
-
Can send: {canSend}
|
|
323
|
-
</div>
|
|
324
|
-
);
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
// After:
|
|
328
|
-
function ComposerStatus() {
|
|
329
|
-
const text = useAuiState((s) => s.composer.text);
|
|
330
|
-
const canSend = useAuiState((s) => s.composer.canSend);
|
|
331
|
-
const attachmentCount = useAuiState((s) => s.composer.attachments.length);
|
|
332
|
-
return (
|
|
333
|
-
<div>
|
|
334
|
-
Text: {text.length} chars,
|
|
335
|
-
Attachments: {attachmentCount},
|
|
336
|
-
Can send: {canSend}
|
|
337
|
-
</div>
|
|
338
|
-
);
|
|
339
|
-
}
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
```ts
|
|
343
|
-
const useComposer: { (): ComposerState; <TSelected>(selector: (state: ComposerState) => TSelected): TSelected; <TSelected>(selector: ((state: ComposerState) => TSelected) | undefined): ComposerState | TSelected; (options: { optional?: false | undefined; }): ComposerState; (options: { optional?: boolean | undefined; }): ComposerState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ComposerState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ComposerState) => TSelected) | undefined; }): ComposerState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ComposerState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ComposerState) => TSelected) | undefined; }): ComposerState | TSelected | null; };
|
|
344
|
-
```
|
|
345
|
-
|
|
346
|
-
### useComposerRuntime
|
|
347
|
-
|
|
348
|
-
<Callout type="warn">
|
|
349
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.composer()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
350
|
-
</Callout>
|
|
351
|
-
|
|
352
|
-
Hook to access the ComposerRuntime from the current context.
|
|
353
|
-
|
|
354
|
-
The ComposerRuntime provides access to composer state and actions for message
|
|
355
|
-
composition, including text input, attachments, and sending functionality.
|
|
356
|
-
This hook automatically resolves to either the message's edit composer or
|
|
357
|
-
the thread's main composer depending on the context.
|
|
358
|
-
|
|
359
|
-
```tsx
|
|
360
|
-
// Before:
|
|
361
|
-
function ComposerActions() {
|
|
362
|
-
const runtime = useComposerRuntime();
|
|
363
|
-
const handleSend = () => {
|
|
364
|
-
if (runtime.getState().canSend) {
|
|
365
|
-
runtime.send();
|
|
366
|
-
}
|
|
367
|
-
};
|
|
368
|
-
const handleCancel = () => {
|
|
369
|
-
if (runtime.getState().canCancel) {
|
|
370
|
-
runtime.cancel();
|
|
371
|
-
}
|
|
372
|
-
};
|
|
373
|
-
return (
|
|
374
|
-
<div>
|
|
375
|
-
<button onClick={handleSend}>Send</button>
|
|
376
|
-
<button onClick={handleCancel}>Cancel</button>
|
|
377
|
-
</div>
|
|
378
|
-
);
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
// After:
|
|
382
|
-
function ComposerActions() {
|
|
383
|
-
const aui = useAui();
|
|
384
|
-
const canSend = useAuiState((s) => s.composer.canSend);
|
|
385
|
-
const canCancel = useAuiState((s) => s.composer.canCancel);
|
|
386
|
-
const handleSend = () => {
|
|
387
|
-
if (canSend) {
|
|
388
|
-
aui.composer().send();
|
|
389
|
-
}
|
|
390
|
-
};
|
|
391
|
-
const handleCancel = () => {
|
|
392
|
-
if (canCancel) {
|
|
393
|
-
aui.composer().cancel();
|
|
394
|
-
}
|
|
395
|
-
};
|
|
396
|
-
return (
|
|
397
|
-
<div>
|
|
398
|
-
<button onClick={handleSend}>Send</button>
|
|
399
|
-
<button onClick={handleCancel}>Cancel</button>
|
|
400
|
-
</div>
|
|
401
|
-
);
|
|
402
|
-
}
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
<ParametersTable {...useComposerRuntime} />
|
|
406
|
-
|
|
407
|
-
### useEditComposer
|
|
408
|
-
|
|
409
|
-
<Callout type="warn">
|
|
410
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.message.composer)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
411
|
-
</Callout>
|
|
412
|
-
|
|
413
|
-
```ts
|
|
414
|
-
const useEditComposer: { (): EditComposerState; <TSelected>(selector: (state: EditComposerState) => TSelected): TSelected; <TSelected>(selector: ((state: EditComposerState) => TSelected) | undefined): EditComposerState | TSelected; (options: { optional?: false | undefined; }): EditComposerState; (options: { optional?: boolean | undefined; }): EditComposerState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: EditComposerState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: EditComposerState) => TSelected) | undefined; }): EditComposerState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: EditComposerState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: EditComposerState) => TSelected) | undefined; }): EditComposerState | TSelected | null; };
|
|
415
|
-
```
|
|
416
|
-
|
|
417
|
-
### useMessage
|
|
418
|
-
|
|
419
|
-
<Callout type="warn">
|
|
420
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.message)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
421
|
-
</Callout>
|
|
422
|
-
|
|
423
|
-
Hook to access the current message state.
|
|
424
|
-
|
|
425
|
-
This hook provides reactive access to the message's state, including content,
|
|
426
|
-
role, status, and other message-level properties.
|
|
427
|
-
|
|
428
|
-
```tsx
|
|
429
|
-
// Before:
|
|
430
|
-
function MessageContent() {
|
|
431
|
-
const role = useMessage((state) => state.role);
|
|
432
|
-
const content = useMessage((state) => state.content);
|
|
433
|
-
const isLoading = useMessage((state) => state.status.type === "running");
|
|
434
|
-
return (
|
|
435
|
-
<div className={`message-${role}`}>
|
|
436
|
-
{isLoading ? "Loading..." : content.map(part => part.text).join("")}
|
|
437
|
-
</div>
|
|
438
|
-
);
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
// After:
|
|
442
|
-
function MessageContent() {
|
|
443
|
-
const role = useAuiState((s) => s.message.role);
|
|
444
|
-
const content = useAuiState((s) => s.message.content);
|
|
445
|
-
const isLoading = useAuiState((s) => s.message.status.type === "running");
|
|
446
|
-
return (
|
|
447
|
-
<div className={`message-${role}`}>
|
|
448
|
-
{isLoading ? "Loading..." : content.map(part => part.text).join("")}
|
|
449
|
-
</div>
|
|
450
|
-
);
|
|
451
|
-
}
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
```ts
|
|
455
|
-
const useMessage: { (): MessageState; <TSelected>(selector: (state: MessageState) => TSelected): TSelected; <TSelected>(selector: ((state: MessageState) => TSelected) | undefined): MessageState | TSelected; (options: { optional?: false | undefined; }): MessageState; (options: { optional?: boolean | undefined; }): MessageState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: MessageState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: MessageState) => TSelected) | undefined; }): MessageState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: MessageState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: MessageState) => TSelected) | undefined; }): MessageState | TSelected | null; };
|
|
456
|
-
```
|
|
457
|
-
|
|
458
|
-
### useMessagePart
|
|
459
|
-
|
|
460
|
-
<Callout type="warn">
|
|
461
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.part)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
462
|
-
</Callout>
|
|
463
|
-
|
|
464
|
-
```ts
|
|
465
|
-
const useMessagePart: { (): MessagePartState; <TSelected>(selector: (state: MessagePartState) => TSelected): TSelected; <TSelected>(selector: ((state: MessagePartState) => TSelected) | undefined): MessagePartState | TSelected; (options: { optional?: false | undefined; }): MessagePartState; (options: { optional?: boolean | undefined; }): MessagePartState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: MessagePartState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: MessagePartState) => TSelected) | undefined; }): MessagePartState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: MessagePartState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: MessagePartState) => TSelected) | undefined; }): MessagePartState | TSelected | null; };
|
|
466
|
-
```
|
|
467
|
-
|
|
468
220
|
### useMessagePartData
|
|
469
221
|
|
|
470
222
|
<Callout type="warn">
|
|
471
223
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
472
|
-
Return `null` for optional rendering
|
|
473
|
-
|
|
224
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
225
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
226
|
+
part mismatch during thread switches can unmount the React root.
|
|
474
227
|
</Callout>
|
|
475
228
|
|
|
476
229
|
```tsx
|
|
@@ -489,8 +242,9 @@ See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
|
489
242
|
|
|
490
243
|
<Callout type="warn">
|
|
491
244
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
492
|
-
Return `null` for optional rendering
|
|
493
|
-
|
|
245
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
246
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
247
|
+
part mismatch during thread switches can unmount the React root.
|
|
494
248
|
</Callout>
|
|
495
249
|
|
|
496
250
|
```tsx
|
|
@@ -510,8 +264,9 @@ const useMessagePartFile: () => FileMessagePart & { readonly status: MessagePart
|
|
|
510
264
|
|
|
511
265
|
<Callout type="warn">
|
|
512
266
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
513
|
-
Return `null` for optional rendering
|
|
514
|
-
|
|
267
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
268
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
269
|
+
part mismatch during thread switches can unmount the React root.
|
|
515
270
|
</Callout>
|
|
516
271
|
|
|
517
272
|
```tsx
|
|
@@ -531,8 +286,9 @@ const useMessagePartImage: () => ImageMessagePart & { readonly status: MessagePa
|
|
|
531
286
|
|
|
532
287
|
<Callout type="warn">
|
|
533
288
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
534
|
-
Return `null` for optional rendering
|
|
535
|
-
|
|
289
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
290
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
291
|
+
part mismatch during thread switches can unmount the React root.
|
|
536
292
|
</Callout>
|
|
537
293
|
|
|
538
294
|
```tsx
|
|
@@ -548,20 +304,13 @@ See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
|
548
304
|
const useMessagePartReasoning: () => ReasoningMessagePart & { readonly status: MessagePartStatus | ToolCallMessagePartStatus; };
|
|
549
305
|
```
|
|
550
306
|
|
|
551
|
-
### useMessagePartRuntime
|
|
552
|
-
|
|
553
|
-
<Callout type="warn">
|
|
554
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.part()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
555
|
-
</Callout>
|
|
556
|
-
|
|
557
|
-
<ParametersTable {...useMessagePartRuntime} />
|
|
558
|
-
|
|
559
307
|
### useMessagePartSource
|
|
560
308
|
|
|
561
309
|
<Callout type="warn">
|
|
562
310
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
563
|
-
Return `null` for optional rendering
|
|
564
|
-
|
|
311
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
312
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
313
|
+
part mismatch during thread switches can unmount the React root.
|
|
565
314
|
</Callout>
|
|
566
315
|
|
|
567
316
|
```tsx
|
|
@@ -581,8 +330,9 @@ const useMessagePartSource: () => ({ readonly type: "source"; readonly sourceTyp
|
|
|
581
330
|
|
|
582
331
|
<Callout type="warn">
|
|
583
332
|
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate) to select and narrow `s.part`.
|
|
584
|
-
Return `null` for optional rendering
|
|
585
|
-
|
|
333
|
+
Return `null` for optional rendering. Do not throw inside the selector:
|
|
334
|
+
selectors run inside `useSyncExternalStore`'s `getSnapshot`, so a transient
|
|
335
|
+
part mismatch during thread switches can unmount the React root.
|
|
586
336
|
</Callout>
|
|
587
337
|
|
|
588
338
|
```tsx
|
|
@@ -597,155 +347,4 @@ See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
|
597
347
|
```ts
|
|
598
348
|
const useMessagePartText: () => (TextMessagePart & { readonly status: MessagePartStatus | ToolCallMessagePartStatus; }) | (ReasoningMessagePart & { readonly status: MessagePartStatus | ToolCallMessagePartStatus; });
|
|
599
349
|
```
|
|
600
|
-
|
|
601
|
-
### useMessageRuntime
|
|
602
|
-
|
|
603
|
-
<Callout type="warn">
|
|
604
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.message()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
605
|
-
</Callout>
|
|
606
|
-
|
|
607
|
-
Hook to access the MessageRuntime from the current context.
|
|
608
|
-
|
|
609
|
-
The MessageRuntime provides access to message-level state and actions,
|
|
610
|
-
including message content, status, editing capabilities, and branching.
|
|
611
|
-
|
|
612
|
-
```tsx
|
|
613
|
-
// Before:
|
|
614
|
-
function MessageActions() {
|
|
615
|
-
const runtime = useMessageRuntime();
|
|
616
|
-
const handleReload = () => {
|
|
617
|
-
runtime.reload();
|
|
618
|
-
};
|
|
619
|
-
const handleEdit = () => {
|
|
620
|
-
runtime.startEdit();
|
|
621
|
-
};
|
|
622
|
-
return (
|
|
623
|
-
<div>
|
|
624
|
-
<button onClick={handleReload}>Reload</button>
|
|
625
|
-
<button onClick={handleEdit}>Edit</button>
|
|
626
|
-
</div>
|
|
627
|
-
);
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
// After:
|
|
631
|
-
function MessageActions() {
|
|
632
|
-
const aui = useAui();
|
|
633
|
-
const handleReload = () => {
|
|
634
|
-
aui.message().reload();
|
|
635
|
-
};
|
|
636
|
-
const handleEdit = () => {
|
|
637
|
-
aui.message().startEdit();
|
|
638
|
-
};
|
|
639
|
-
return (
|
|
640
|
-
<div>
|
|
641
|
-
<button onClick={handleReload}>Reload</button>
|
|
642
|
-
<button onClick={handleEdit}>Edit</button>
|
|
643
|
-
</div>
|
|
644
|
-
);
|
|
645
|
-
}
|
|
646
|
-
```
|
|
647
|
-
|
|
648
|
-
<ParametersTable {...useMessageRuntime} />
|
|
649
|
-
|
|
650
|
-
### useThread
|
|
651
|
-
|
|
652
|
-
<Callout type="warn">
|
|
653
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.thread)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
654
|
-
</Callout>
|
|
655
|
-
|
|
656
|
-
Hook to access the current thread state.
|
|
657
|
-
|
|
658
|
-
This hook provides reactive access to the thread's state, including messages,
|
|
659
|
-
running status, capabilities, and other thread-level properties.
|
|
660
|
-
|
|
661
|
-
```tsx
|
|
662
|
-
// Before:
|
|
663
|
-
function ThreadStatus() {
|
|
664
|
-
const isRunning = useThread((state) => state.isRunning);
|
|
665
|
-
const messageCount = useThread((state) => state.messages.length);
|
|
666
|
-
return <div>Running: {isRunning}, Messages: {messageCount}</div>;
|
|
667
|
-
}
|
|
668
|
-
|
|
669
|
-
// After:
|
|
670
|
-
function ThreadStatus() {
|
|
671
|
-
const isRunning = useAuiState((s) => s.thread.isRunning);
|
|
672
|
-
const messageCount = useAuiState((s) => s.thread.messages.length);
|
|
673
|
-
return <div>Running: {isRunning}, Messages: {messageCount}</div>;
|
|
674
|
-
}
|
|
675
|
-
```
|
|
676
|
-
|
|
677
|
-
```ts
|
|
678
|
-
const useThread: { (): ThreadState; <TSelected>(selector: (state: ThreadState) => TSelected): TSelected; <TSelected>(selector: ((state: ThreadState) => TSelected) | undefined): ThreadState | TSelected; (options: { optional?: false | undefined; }): ThreadState; (options: { optional?: boolean | undefined; }): ThreadState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ThreadState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ThreadState) => TSelected) | undefined; }): ThreadState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ThreadState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ThreadState) => TSelected) | undefined; }): ThreadState | TSelected | null; };
|
|
679
|
-
```
|
|
680
|
-
|
|
681
|
-
### useThreadComposer
|
|
682
|
-
|
|
683
|
-
<Callout type="warn">
|
|
684
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.thread.composer)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
685
|
-
</Callout>
|
|
686
|
-
|
|
687
|
-
```ts
|
|
688
|
-
const useThreadComposer: { (): ThreadComposerState; <TSelected>(selector: (state: ThreadComposerState) => TSelected): TSelected; <TSelected>(selector: ((state: ThreadComposerState) => TSelected) | undefined): ThreadComposerState | TSelected; (options: { optional?: false | undefined; }): ThreadComposerState; (options: { optional?: boolean | undefined; }): ThreadComposerState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ThreadComposerState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ThreadComposerState) => TSelected) | undefined; }): ThreadComposerState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ThreadComposerState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ThreadComposerState) => TSelected) | undefined; }): ThreadComposerState | TSelected | null; };
|
|
689
|
-
```
|
|
690
|
-
|
|
691
|
-
### useThreadList
|
|
692
|
-
|
|
693
|
-
<Callout type="warn">
|
|
694
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.threads)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
695
|
-
</Callout>
|
|
696
|
-
|
|
697
|
-
```ts
|
|
698
|
-
const useThreadList: { (): ThreadListState; <TSelected>(selector: (state: ThreadListState) => TSelected): TSelected; <TSelected>(selector: ((state: ThreadListState) => TSelected) | undefined): ThreadListState | TSelected; (options: { optional?: false | undefined; }): ThreadListState; (options: { optional?: boolean | undefined; }): ThreadListState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ThreadListState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ThreadListState) => TSelected) | undefined; }): ThreadListState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ThreadListState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ThreadListState) => TSelected) | undefined; }): ThreadListState | TSelected | null; };
|
|
699
|
-
```
|
|
700
|
-
|
|
701
|
-
### useThreadListItem
|
|
702
|
-
|
|
703
|
-
<Callout type="warn">
|
|
704
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.threadListItem)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
705
|
-
</Callout>
|
|
706
|
-
|
|
707
|
-
```ts
|
|
708
|
-
const useThreadListItem: { (): ThreadListItemState; <TSelected>(selector: (state: ThreadListItemState) => TSelected): TSelected; <TSelected>(selector: ((state: ThreadListItemState) => TSelected) | undefined): ThreadListItemState | TSelected; (options: { optional?: false | undefined; }): ThreadListItemState; (options: { optional?: boolean | undefined; }): ThreadListItemState | null; <TSelected>(options: { optional?: false | undefined; selector: (state: ThreadListItemState) => TSelected; }): TSelected; <TSelected>(options: { optional?: false | undefined; selector: ((state: ThreadListItemState) => TSelected) | undefined; }): ThreadListItemState | TSelected; <TSelected>(options: { optional?: boolean | undefined; selector: (state: ThreadListItemState) => TSelected; }): TSelected | null; <TSelected>(options: { optional?: boolean | undefined; selector: ((state: ThreadListItemState) => TSelected) | undefined; }): ThreadListItemState | TSelected | null; };
|
|
709
|
-
```
|
|
710
|
-
|
|
711
|
-
### useThreadListItemRuntime
|
|
712
|
-
|
|
713
|
-
<Callout type="warn">
|
|
714
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.threadListItem()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
715
|
-
</Callout>
|
|
716
|
-
|
|
717
|
-
<ParametersTable {...useThreadListItemRuntime} />
|
|
718
|
-
|
|
719
|
-
### useThreadRuntime
|
|
720
|
-
|
|
721
|
-
<Callout type="warn">
|
|
722
|
-
<strong>Deprecated.</strong> Use [useAui](/docs/api-reference/hooks/state#useaui) with `aui.thread()` instead. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
723
|
-
</Callout>
|
|
724
|
-
|
|
725
|
-
Hook to access the ThreadRuntime from the current context.
|
|
726
|
-
|
|
727
|
-
The ThreadRuntime provides access to thread-level state and actions,
|
|
728
|
-
including message management, thread state, and composer functionality.
|
|
729
|
-
|
|
730
|
-
```tsx
|
|
731
|
-
// Before:
|
|
732
|
-
function MyComponent() {
|
|
733
|
-
const runtime = useThreadRuntime();
|
|
734
|
-
const handleSendMessage = (text: string) => {
|
|
735
|
-
runtime.append({ role: "user", content: [{ type: "text", text }] });
|
|
736
|
-
};
|
|
737
|
-
return <button onClick={() => handleSendMessage("Hello!")}>Send</button>;
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
// After:
|
|
741
|
-
function MyComponent() {
|
|
742
|
-
const aui = useAui();
|
|
743
|
-
const handleSendMessage = (text: string) => {
|
|
744
|
-
aui.thread().append({ role: "user", content: [{ type: "text", text }] });
|
|
745
|
-
};
|
|
746
|
-
return <button onClick={() => handleSendMessage("Hello!")}>Send</button>;
|
|
747
|
-
}
|
|
748
|
-
```
|
|
749
|
-
|
|
750
|
-
<ParametersTable {...useThreadRuntime} />
|
|
751
350
|
{/* api-reference:end */}
|
|
@@ -20,7 +20,7 @@ Returns the current `AssistantClient` from context.
|
|
|
20
20
|
|
|
21
21
|
Read the client supplied by the nearest [AuiProvider](/docs/api-reference/context-providers/assistant-runtime-provider#auiprovider) or
|
|
22
22
|
[AssistantRuntimeProvider](/docs/api-reference/context-providers/assistant-runtime-provider#assistantruntimeprovider), then access a scope on it —
|
|
23
|
-
`aui.thread
|
|
23
|
+
`aui.thread`, `aui.composer`, `aui.message`, and so on. Pair
|
|
24
24
|
with [useAuiState](/docs/api-reference/hooks/state#useauistate) to read reactive state and [useAuiEvent](/docs/api-reference/hooks/state#useauievent)
|
|
25
25
|
to subscribe to events. The returned client also exposes lower-level
|
|
26
26
|
methods such as `aui.on(...)` and `aui.subscribe(...)`; prefer
|
|
@@ -80,6 +80,9 @@ literal, including spreading `s.thread` into a new object, causes a
|
|
|
80
80
|
re-render on every store update; either select primitives or return a
|
|
81
81
|
memoized reference.
|
|
82
82
|
|
|
83
|
+
Scopes that may be unavailable can be read via `s.optional.<scope>`,
|
|
84
|
+
which resolves to `undefined` instead of throwing.
|
|
85
|
+
|
|
83
86
|
{/* api-example:useAuiState:start */}
|
|
84
87
|
```tsx
|
|
85
88
|
import { useAuiState } from "@assistant-ui/react";
|
|
@@ -101,6 +101,27 @@ export async function POST(req: Request) {
|
|
|
101
101
|
|
|
102
102
|
<ParametersTable {...reactAiSdk_unstable_injectInteractableContext} />
|
|
103
103
|
|
|
104
|
+
### useAISDKChat
|
|
105
|
+
|
|
106
|
+
The underlying `useChat` helpers object, for advanced views — reach
|
|
107
|
+
`resumeStream`, `clearError`, or the raw `sendMessage` without forking the
|
|
108
|
+
runtime hook. `undefined` when the current thread is not backed by the AI
|
|
109
|
+
SDK runtime.
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
const useAISDKChat: <UI_MESSAGE extends UIMessage = UIMessage<unknown, UIDataTypes, UITools>>() => UseChatHelpers<UI_MESSAGE>;
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### useAISDKError
|
|
116
|
+
|
|
117
|
+
Read the last AI SDK chat error object from the runtime extras.
|
|
118
|
+
`undefined` when there is no error or the current thread is not backed by
|
|
119
|
+
the AI SDK runtime.
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
const useAISDKError: () => Error;
|
|
123
|
+
```
|
|
124
|
+
|
|
104
125
|
### useAISDKRuntime
|
|
105
126
|
|
|
106
127
|
<ParametersTable {...reactAiSdk_useAISDKRuntime} />
|
|
@@ -3,7 +3,7 @@ title: Model Context
|
|
|
3
3
|
description: Provide model instructions, contextual state, and inline renderers to assistant-ui runtimes.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { ModelContextProvider, useAssistantContext, useAssistantInstructions, useInlineRender
|
|
6
|
+
import { ModelContextProvider, useAssistantContext, useAssistantInstructions, useInlineRender } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -47,12 +47,4 @@ const ModelContextClient: Resource<ClientOutput<"modelContext">, []>;
|
|
|
47
47
|
### useInlineRender
|
|
48
48
|
|
|
49
49
|
<ParametersTable {...useInlineRender} />
|
|
50
|
-
|
|
51
|
-
### useThreadModelContext
|
|
52
|
-
|
|
53
|
-
<Callout type="warn">
|
|
54
|
-
<strong>Deprecated.</strong> Use [useAuiState](/docs/api-reference/hooks/state#useauistate): `useAuiState((s) => s.thread.modelContext)`. See the [migration guide](https://assistant-ui.com/docs/migrations/v0-12).
|
|
55
|
-
</Callout>
|
|
56
|
-
|
|
57
|
-
<ParametersTable {...useThreadModelContext} />
|
|
58
50
|
{/* api-reference:end */}
|