@assistant-ui/mcp-docs-server 0.1.33 → 0.1.35
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 +8 -8
- package/.docs/organized/code-examples/with-ag-ui.md +12 -12
- package/.docs/organized/code-examples/with-ai-sdk-v6.md +10 -10
- package/.docs/organized/code-examples/with-artifacts.md +40 -34
- package/.docs/organized/code-examples/with-assistant-transport.md +11 -11
- package/.docs/organized/code-examples/with-browser-extension.md +9 -9
- package/.docs/organized/code-examples/with-chain-of-thought.md +72 -51
- package/.docs/organized/code-examples/with-cloud-standalone.md +10 -10
- package/.docs/organized/code-examples/with-cloud.md +10 -10
- package/.docs/organized/code-examples/with-custom-thread-list.md +10 -10
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +12 -12
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +12 -12
- package/.docs/organized/code-examples/with-expo.md +66 -31
- package/.docs/organized/code-examples/with-external-store.md +8 -8
- package/.docs/organized/code-examples/with-ffmpeg.md +13 -13
- package/.docs/organized/code-examples/with-generative-ui.md +98 -368
- package/.docs/organized/code-examples/with-google-adk.md +9 -9
- package/.docs/organized/code-examples/with-heat-graph.md +7 -7
- package/.docs/organized/code-examples/with-image-generation.md +10 -10
- package/.docs/organized/code-examples/with-interactables.md +10 -10
- package/.docs/organized/code-examples/with-langchain.md +10 -10
- package/.docs/organized/code-examples/with-langgraph.md +33 -29
- package/.docs/organized/code-examples/with-livekit.md +12 -12
- package/.docs/organized/code-examples/with-mcp.md +11 -11
- package/.docs/organized/code-examples/with-opencode.md +109 -583
- package/.docs/organized/code-examples/with-pi.md +2044 -0
- package/.docs/organized/code-examples/with-react-hook-form.md +11 -11
- package/.docs/organized/code-examples/with-react-ink-web.md +691 -0
- package/.docs/organized/code-examples/with-react-ink.md +309 -102
- package/.docs/organized/code-examples/with-react-router.md +14 -14
- package/.docs/organized/code-examples/with-resumable-stream.md +11 -11
- package/.docs/organized/code-examples/with-store.md +70 -66
- package/.docs/organized/code-examples/with-tanstack.md +25 -11
- package/.docs/organized/code-examples/with-tap-runtime.md +8 -8
- package/.docs/organized/code-examples/with-virtualized-thread.md +656 -0
- package/.docs/raw/docs/(docs)/architecture.mdx +65 -53
- package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +3 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +44 -1
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +14 -3
- package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +2 -23
- package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +22 -0
- package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +93 -9
- package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +21 -86
- package/.docs/raw/docs/guides/chain-of-thought.mdx +1 -1
- package/.docs/raw/docs/guides/index.mdx +3 -0
- package/.docs/raw/docs/guides/input-history.mdx +55 -0
- package/.docs/raw/docs/guides/virtualization.mdx +63 -0
- package/.docs/raw/docs/ink/adapters.mdx +23 -1
- package/.docs/raw/docs/ink/hooks.mdx +22 -19
- package/.docs/raw/docs/migrations/toolkit-tools.mdx +14 -8
- package/.docs/raw/docs/react-native/hooks.mdx +26 -18
- package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +39 -0
- package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +3 -3
- package/.docs/raw/docs/runtimes/concepts/architecture.mdx +46 -4
- package/.docs/raw/docs/runtimes/concepts/stability.mdx +1 -1
- package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +54 -12
- package/.docs/raw/docs/runtimes/custom/data-stream.mdx +1 -1
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +62 -4
- package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +120 -4
- package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +9 -9
- package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +13 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +5 -5
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +3 -3
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +6 -6
- package/.docs/raw/docs/tools/backend.mdx +19 -11
- package/.docs/raw/docs/tools/defining-tools.mdx +177 -52
- package/.docs/raw/docs/tools/index.mdx +7 -12
- package/.docs/raw/docs/tools/mcp.mdx +83 -15
- package/.docs/raw/docs/tools/multi-agent.mdx +5 -5
- package/.docs/raw/docs/tools/tool-ui.mdx +64 -28
- package/.docs/raw/docs/tools/user-managed-mcp.mdx +4 -4
- package/.docs/raw/docs/ui/dot-matrix.mdx +133 -0
- package/.docs/raw/docs/ui/mermaid.mdx +16 -9
- package/.docs/raw/docs/ui/model-selector.mdx +219 -52
- package/.docs/raw/docs/ui/number-roll.mdx +154 -0
- package/.docs/raw/docs/ui/part-grouping.mdx +2 -2
- package/.docs/raw/docs/ui/reasoning.mdx +3 -3
- package/.docs/raw/docs/ui/streamdown.mdx +2 -0
- package/.docs/raw/docs/ui/syntax-highlighting.mdx +1 -1
- package/.docs/raw/docs/ui/thread.mdx +52 -0
- package/.docs/raw/docs/ui/tool-fallback.mdx +16 -0
- package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
- package/dist/constants.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/prepare-docs/code-examples.js.map +1 -1
- package/dist/prepare-docs/copy-raw.js.map +1 -1
- package/dist/prepare-docs/prepare.js.map +1 -1
- package/dist/stdio.js.map +1 -1
- package/dist/tools/docs.js.map +1 -1
- package/dist/tools/examples.js.map +1 -1
- package/dist/tools/tests/test-setup.js.map +1 -1
- package/dist/utils/mdx.js.map +1 -1
- package/dist/utils/paths.js.map +1 -1
- package/package.json +4 -4
- /package/.docs/raw/docs/{(docs)/copilots → copilots}/assistant-frame.mdx +0 -0
- /package/.docs/raw/docs/{(docs)/copilots → copilots}/make-assistant-visible.mdx +0 -0
- /package/.docs/raw/docs/{(docs)/copilots → copilots}/model-context.mdx +0 -0
- /package/.docs/raw/docs/{(docs)/copilots → copilots}/motivation.mdx +0 -0
- /package/.docs/raw/docs/{(docs)/copilots → copilots}/use-assistant-instructions.mdx +0 -0
|
@@ -7,18 +7,19 @@ import { Sparkles, PanelsTopLeft, Database, Terminal } from "lucide-react";
|
|
|
7
7
|
|
|
8
8
|
## assistant-ui is built on these main pillars:
|
|
9
9
|
|
|
10
|
-
<div className="grid grid-cols-1 md:grid-cols-3
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
<div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-3">
|
|
11
|
+
<Card
|
|
12
|
+
title="1. Frontend components"
|
|
13
|
+
description="Shadcn UI chat components with built-in state management"
|
|
14
|
+
/>
|
|
15
|
+
<Card
|
|
16
|
+
title="2. Runtime"
|
|
17
|
+
description="State management layer connecting UI to LLMs and backend services"
|
|
18
|
+
/>
|
|
19
|
+
<Card
|
|
20
|
+
title="3. Assistant Cloud"
|
|
21
|
+
description="Hosted service for thread persistence, history, and user management"
|
|
22
|
+
/>
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
|
|
@@ -56,60 +57,71 @@ Thread and message history can be stored by Assistant Cloud or by your own datab
|
|
|
56
57
|
|
|
57
58
|
#### **1. Direct Integration with External Providers**
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
graph TD
|
|
60
|
+
<Flow.Root
|
|
61
|
+
llm={`graph TD
|
|
61
62
|
A[Frontend Components] --> B[Runtime]
|
|
62
|
-
B --> D[External Providers or LLM APIs]
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
```
|
|
63
|
+
B --> D[External Providers or LLM APIs]`}
|
|
64
|
+
>
|
|
65
|
+
<Flow.Column>
|
|
66
|
+
<Flow.Node tone="pink">Frontend Components</Flow.Node>
|
|
67
|
+
<Flow.Arrow direction="down" length={36} />
|
|
68
|
+
<Flow.Node tone="blue">Runtime</Flow.Node>
|
|
69
|
+
<Flow.Arrow direction="down" length={36} />
|
|
70
|
+
<Flow.Node tone="red">External Providers or LLM APIs</Flow.Node>
|
|
71
|
+
</Flow.Column>
|
|
72
|
+
</Flow.Root>
|
|
73
73
|
|
|
74
74
|
#### **2. Using your own API endpoint**
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
graph TD
|
|
76
|
+
<Flow.Root
|
|
77
|
+
llm={`graph TD
|
|
78
78
|
A[Frontend Components] --> B[Runtime]
|
|
79
79
|
B --> E[Your API Backend]
|
|
80
|
-
E --> D[External Providers or LLM APIs]
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
80
|
+
E --> D[External Providers or LLM APIs]`}
|
|
81
|
+
>
|
|
82
|
+
<Flow.Column>
|
|
83
|
+
<Flow.Node tone="pink">Frontend Components</Flow.Node>
|
|
84
|
+
<Flow.Arrow direction="down" length={36} />
|
|
85
|
+
<Flow.Node tone="blue">Runtime</Flow.Node>
|
|
86
|
+
<Flow.Arrow direction="down" length={36} />
|
|
87
|
+
<Flow.Node tone="red">Your API Backend</Flow.Node>
|
|
88
|
+
<Flow.Arrow direction="down" length={36} />
|
|
89
|
+
<Flow.Node tone="red">External Providers or LLM APIs</Flow.Node>
|
|
90
|
+
</Flow.Column>
|
|
91
|
+
</Flow.Root>
|
|
92
92
|
|
|
93
93
|
#### **3. With Assistant Cloud**
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
graph TD
|
|
95
|
+
<Flow.Root
|
|
96
|
+
llm={`graph TD
|
|
97
97
|
A[Frontend Components] --> B[Runtime]
|
|
98
98
|
B --> C[Cloud]
|
|
99
99
|
E --> C
|
|
100
100
|
C --> D[External Providers or LLM APIs]
|
|
101
|
-
B --> E[Your API Backend]
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
101
|
+
B --> E[Your API Backend]`}
|
|
102
|
+
>
|
|
103
|
+
<Flow.Canvas
|
|
104
|
+
edges={[
|
|
105
|
+
{ from: "runtime", to: "backend", route: "down", fromOffset: -20 },
|
|
106
|
+
{ from: "runtime", to: "cloud", route: "down", fromOffset: 20 },
|
|
107
|
+
{ from: "cloud", to: "providers", route: "down" },
|
|
108
|
+
]}
|
|
109
|
+
>
|
|
110
|
+
<Flow.Column>
|
|
111
|
+
<Flow.Node tone="pink">Frontend Components</Flow.Node>
|
|
112
|
+
<Flow.Arrow direction="down" length={36} />
|
|
113
|
+
<Flow.Node flowId="runtime" tone="blue">Runtime</Flow.Node>
|
|
114
|
+
<div className="h-10" aria-hidden />
|
|
115
|
+
<Flow.Row>
|
|
116
|
+
<Flow.Node flowId="backend" tone="red">Your API Backend</Flow.Node>
|
|
117
|
+
<Flow.Arrow length={48} />
|
|
118
|
+
<Flow.Node flowId="cloud" tone="green">Cloud</Flow.Node>
|
|
119
|
+
</Flow.Row>
|
|
120
|
+
<div className="h-10" aria-hidden />
|
|
121
|
+
<Flow.Node flowId="providers" tone="red">External Providers or LLM APIs</Flow.Node>
|
|
122
|
+
</Flow.Column>
|
|
123
|
+
</Flow.Canvas>
|
|
124
|
+
</Flow.Root>
|
|
113
125
|
|
|
114
126
|
## Going deeper
|
|
115
127
|
|
|
@@ -47,6 +47,6 @@ const unstable_convertExternalMessages: <T extends WeakKey>(messages: T[], callb
|
|
|
47
47
|
### unstable_createMessageConverter
|
|
48
48
|
|
|
49
49
|
```ts
|
|
50
|
-
const unstable_createMessageConverter: <T extends object>(callback: useExternalMessageConverter.Callback<T>) => { useThreadMessages: ({ messages, isRunning, joinStrategy, metadata, }: { messages: T[]; isRunning: boolean; joinStrategy?:
|
|
50
|
+
const unstable_createMessageConverter: <T extends object>(callback: useExternalMessageConverter.Callback<T>) => { useThreadMessages: ({ messages, isRunning, joinStrategy, metadata, }: { messages: T[]; isRunning: boolean; joinStrategy?: JoinStrategy | undefined; metadata?: useExternalMessageConverter.Metadata; }) => ThreadMessage[]; toThreadMessages: (messages: T[], isRunning?: boolean, metadata?: useExternalMessageConverter.Metadata) => ThreadMessage[]; toOriginalMessages: (input: ThreadState | ThreadMessage | ThreadMessage["content"][number]) => unknown[]; toOriginalMessage: (input: ThreadState | ThreadMessage | ThreadMessage["content"][number]) => {}; useOriginalMessage: () => {}; useOriginalMessages: () => unknown[]; };
|
|
51
51
|
```
|
|
52
52
|
{/* api-reference:end */}
|
|
@@ -28,6 +28,9 @@ import { ExternalStoreAdapter, ExternalThread, ExternalThreadProps, ExternalThre
|
|
|
28
28
|
|
|
29
29
|
### ExternalThreadQueueAdapter
|
|
30
30
|
|
|
31
|
+
The queue surface a runtime exposes so the composer can stay usable during a
|
|
32
|
+
run and render the pending messages.
|
|
33
|
+
|
|
31
34
|
<ParametersTable {...ExternalThreadQueueAdapter} />
|
|
32
35
|
|
|
33
36
|
### pickExternalStoreSharedOptions
|
|
@@ -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 { useAssistantRuntime, useAttachmentRuntime, useCloudThreadListAdapter, useComposerRuntime, useEditComposerAttachmentRuntime, useMessageAttachmentRuntime, useMessagePartData, useMessagePartRuntime, useMessageRuntime, useScrollLock, useThreadComposerAttachmentRuntime, useThreadListItemRuntime, useThreadRuntime, useThreadViewportAutoScroll } from "@/generated/typeDocs";
|
|
6
|
+
import { unstable_useMessageStallDetection, useAssistantRuntime, useAttachmentRuntime, useCloudThreadListAdapter, useComposerRuntime, useEditComposerAttachmentRuntime, useMessageAttachmentRuntime, useMessagePartData, useMessagePartRuntime, useMessageRuntime, useScrollLock, useThreadComposerAttachmentRuntime, useThreadListItemRuntime, useThreadRuntime, useThreadViewportAutoScroll } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -637,4 +637,47 @@ const useThreadViewport: { (): ThreadViewportState; <TSelected>(selector: (state
|
|
|
637
637
|
```ts
|
|
638
638
|
const useThreadViewportStore: { (): ReadonlyStore<ThreadViewportState>; (options: { optional: true; }): ReadonlyStore<ThreadViewportState> | null; };
|
|
639
639
|
```
|
|
640
|
+
|
|
641
|
+
### unstable_useComposerInputHistory
|
|
642
|
+
|
|
643
|
+
<Callout type="warn">
|
|
644
|
+
<strong>Deprecated.</strong> Under active development and might change without notice.
|
|
645
|
+
</Callout>
|
|
646
|
+
|
|
647
|
+
Terminal-style input history for the thread composer: ArrowUp on an
|
|
648
|
+
empty draft recalls previously sent user messages (newest first),
|
|
649
|
+
ArrowDown steps back toward the newest and finally restores the draft
|
|
650
|
+
that was being typed when browsing started.
|
|
651
|
+
|
|
652
|
+
Recall only triggers when the caret is on the first/last line with no
|
|
653
|
+
selection, so multi-line editing keeps native arrow behavior. The
|
|
654
|
+
handler yields to an open mention/slash popover, to IME composition,
|
|
655
|
+
to modifier keys, and to consumer handlers that already called
|
|
656
|
+
`preventDefault`. It is inert on edit composers.
|
|
657
|
+
|
|
658
|
+
```tsx
|
|
659
|
+
const history = unstable_useComposerInputHistory();
|
|
660
|
+
<ComposerPrimitive.Input {...history} />
|
|
661
|
+
```
|
|
662
|
+
|
|
663
|
+
```ts
|
|
664
|
+
function unstable_useComposerInputHistory(): Unstable_ComposerInputHistory;
|
|
665
|
+
```
|
|
666
|
+
|
|
667
|
+
### unstable_useMessageStallDetection
|
|
668
|
+
|
|
669
|
+
<Callout type="warn">
|
|
670
|
+
<strong>Deprecated.</strong> Under active development and might change without notice.
|
|
671
|
+
</Callout>
|
|
672
|
+
|
|
673
|
+
Detects mid-run output stalls on the current message: while the message is
|
|
674
|
+
running, watches a fingerprint of its content (part count plus text,
|
|
675
|
+
argument, and result sizes) and reports a stall once the fingerprint stops
|
|
676
|
+
changing for `thresholdMs`. Useful for re-surfacing a "still working"
|
|
677
|
+
indicator during tool think-time or provider stalls, after the first
|
|
678
|
+
tokens have already streamed.
|
|
679
|
+
|
|
680
|
+
Must be used inside a message scope.
|
|
681
|
+
|
|
682
|
+
<ParametersTable {...unstable_useMessageStallDetection} />
|
|
640
683
|
{/* api-reference:end */}
|
|
@@ -36,6 +36,14 @@ const frontendTools: (tools: Record<string, ToolJSONSchema>) => ToolSet;
|
|
|
36
36
|
|
|
37
37
|
### generativeTools
|
|
38
38
|
|
|
39
|
+
<Callout type="warn">
|
|
40
|
+
<strong>Deprecated.</strong> Use [AISDKToolkit](/docs/api-reference/integrations/react-ai-sdk#aisdktoolkit) instead:
|
|
41
|
+
`new AISDKToolkit({ toolkit }).tools({ frontend })`. It is a strict superset
|
|
42
|
+
(it also opens MCP server connections), so it replaces `generativeTools`
|
|
43
|
+
everywhere. The `frontendTools` option is named `frontend` on `.tools()`, and
|
|
44
|
+
`.tools()` is async. `generativeTools` will be removed in a future version.
|
|
45
|
+
</Callout>
|
|
46
|
+
|
|
39
47
|
Builds an AI SDK `ToolSet` for server-side use with `streamText` /
|
|
40
48
|
`generateText` from a generative `toolkit` and the frontend-uploaded tools.
|
|
41
49
|
|
|
@@ -44,15 +52,18 @@ Each toolkit tool's `execute` runs on the server. Pair this with the
|
|
|
44
52
|
resolves to the server build — schema + `execute`, with `render` stripped) and
|
|
45
53
|
pass it here. Tools without an `execute` are still exposed to the model but
|
|
46
54
|
left for the client to fulfill. `frontendTools` lets the client contribute
|
|
47
|
-
tools that aren't in the static toolkit.
|
|
48
|
-
toolkit contains MCP entries.
|
|
55
|
+
tools that aren't in the static toolkit.
|
|
49
56
|
|
|
50
57
|
```ts
|
|
58
|
+
// Define once at module scope so any MCP connections pool across requests.
|
|
59
|
+
const aiToolkit = new AISDKToolkit({ toolkit: docsToolkit });
|
|
60
|
+
|
|
61
|
+
// In your route handler:
|
|
51
62
|
const { tools } = await req.json();
|
|
52
63
|
streamText({
|
|
53
64
|
model,
|
|
54
65
|
messages,
|
|
55
|
-
tools:
|
|
66
|
+
tools: await aiToolkit.tools({ frontend: tools }),
|
|
56
67
|
});
|
|
57
68
|
```
|
|
58
69
|
|
|
@@ -29,7 +29,7 @@ const mergeModelContexts: (configSet: Set<ModelContextProvider>) => ModelContext
|
|
|
29
29
|
### ModelContextClient
|
|
30
30
|
|
|
31
31
|
```ts
|
|
32
|
-
const ModelContextClient:
|
|
32
|
+
const ModelContextClient: Resource<ClientOutput<"modelContext">, []>;
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### ModelContextProvider
|
|
@@ -3,7 +3,7 @@ title: Tool Rendering
|
|
|
3
3
|
description: Register React renderers for assistant-ui tool calls, tool results, and model data parts.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { McpAppRenderer, McpAppsRemoteHost, getMcpAppFromToolPart, useAssistantDataUI, useAssistantToolUI } from "@/generated/typeDocs";
|
|
6
|
+
import { DataRenderers, McpAppRenderer, McpAppsRemoteHost, getMcpAppFromToolPart, useAssistantDataUI, useAssistantToolUI } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -16,15 +16,7 @@ import { McpAppRenderer, McpAppsRemoteHost, getMcpAppFromToolPart, useAssistantD
|
|
|
16
16
|
|
|
17
17
|
### DataRenderers
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Data renderers are looked up by the part's `name` field. Use this resource
|
|
22
|
-
directly for a renderer scope, or prefer [useAssistantDataUI](/docs/api-reference/tools/rendering#useassistantdataui) /
|
|
23
|
-
[makeAssistantDataUI](/docs/api-reference/tools/rendering#makeassistantdataui) when registering from React components.
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
const DataRenderers: () => ResourceElement<ClientOutput<"dataRenderers">, undefined>;
|
|
27
|
-
```
|
|
19
|
+
<ParametersTable {...DataRenderers} />
|
|
28
20
|
|
|
29
21
|
### getMcpAppFromToolPart
|
|
30
22
|
|
|
@@ -84,23 +76,10 @@ const makeAssistantToolUI: <TArgs, TResult>(tool: AssistantToolUIProps<TArgs, TR
|
|
|
84
76
|
|
|
85
77
|
### McpAppRenderer
|
|
86
78
|
|
|
87
|
-
Creates a tool-call renderer for MCP Apps embedded in assistant messages.
|
|
88
|
-
|
|
89
|
-
Compose this into the `Tools` resource through its `mcpApp` option. When a
|
|
90
|
-
tool-call part carries `mcp.app` metadata for a `ui://` resource, the
|
|
91
|
-
renderer loads that resource from the configured host and displays it in a
|
|
92
|
-
sandboxed frame.
|
|
93
|
-
|
|
94
79
|
<ParametersTable {...McpAppRenderer} />
|
|
95
80
|
|
|
96
81
|
### McpAppsRemoteHost
|
|
97
82
|
|
|
98
|
-
Creates the default HTTP host for MCP App widgets.
|
|
99
|
-
|
|
100
|
-
The host POSTs widget requests to the configured route as `{ method,
|
|
101
|
-
params }`, using the method names expected by the assistant-ui MCP Apps
|
|
102
|
-
guide.
|
|
103
|
-
|
|
104
83
|
<ParametersTable {...McpAppsRemoteHost} />
|
|
105
84
|
|
|
106
85
|
### useAssistantDataUI
|
|
@@ -39,4 +39,26 @@ function WeatherToolUI({
|
|
|
39
39
|
```ts
|
|
40
40
|
const useToolArgsStatus: <TArgs extends Record<string, unknown> = Record<string, unknown>>() => ToolArgsStatus<TArgs>;
|
|
41
41
|
```
|
|
42
|
+
|
|
43
|
+
### useToolCallElapsed
|
|
44
|
+
|
|
45
|
+
Hook that returns the elapsed wall-clock time of the current tool call in
|
|
46
|
+
milliseconds, ticking once per second while the call runs.
|
|
47
|
+
|
|
48
|
+
Reads `part.timing`. Returns `undefined` when the part is not a tool call,
|
|
49
|
+
carries no timing, ended without a recorded completion (the duration is
|
|
50
|
+
unknown), or when no message part scope is available (so kit components
|
|
51
|
+
stay renderable standalone, e.g. in docs previews).
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
function ToolDuration() {
|
|
55
|
+
const elapsedMs = useToolCallElapsed();
|
|
56
|
+
if (elapsedMs === undefined) return null;
|
|
57
|
+
return <span>{(elapsedMs / 1000).toFixed(1)}s</span>;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
const useToolCallElapsed: () => number;
|
|
63
|
+
```
|
|
42
64
|
{/* api-reference:end */}
|
|
@@ -3,7 +3,7 @@ title: Toolkits
|
|
|
3
3
|
description: Define model-facing tools and compose them into named toolkits registered with an assistant-ui runtime scope.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { ToolDefinition, Tools, tool } from "@/generated/typeDocs";
|
|
6
|
+
import { ToolDefinition, Tools, defineMcpToolkit, defineToolkit, providerTool, tool } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -63,7 +63,7 @@ Named collection of tools exposed to the assistant model.
|
|
|
63
63
|
Keys are the tool names the model receives and uses in tool calls.
|
|
64
64
|
|
|
65
65
|
```tsx
|
|
66
|
-
const toolkit = {
|
|
66
|
+
const toolkit = defineToolkit({
|
|
67
67
|
get_weather: {
|
|
68
68
|
type: "frontend",
|
|
69
69
|
description: "Get the weather for a city.",
|
|
@@ -71,7 +71,7 @@ const toolkit = {
|
|
|
71
71
|
execute: async ({ city }: { city: string }) => fetchWeather(city),
|
|
72
72
|
render: WeatherToolUI,
|
|
73
73
|
},
|
|
74
|
-
}
|
|
74
|
+
});
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
```ts
|
|
@@ -80,12 +80,96 @@ type Toolkit = Record<string, ToolDefinition<any, any>>;
|
|
|
80
80
|
|
|
81
81
|
### Tools
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
<ParametersTable {...Tools} />
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
group of tools declaratively. Tool definitions are registered with model
|
|
87
|
-
context, while each tool renderer is registered with the tools scope for
|
|
88
|
-
message rendering.
|
|
85
|
+
### defineMcpToolkit
|
|
89
86
|
|
|
90
|
-
|
|
87
|
+
Defines MCP server tools as a spreadable toolkit fragment.
|
|
88
|
+
|
|
89
|
+
<ParametersTable {...defineMcpToolkit} />
|
|
90
|
+
|
|
91
|
+
### defineToolkit
|
|
92
|
+
|
|
93
|
+
Toolkit authoring helper. Accepts the permissive ToolkitDefinition
|
|
94
|
+
(a generative `backend` tool may carry its server `execute`) and types the
|
|
95
|
+
result as the canonical [Toolkit](/docs/api-reference/tools/toolkits#toolkit).
|
|
96
|
+
|
|
97
|
+
In a `"use generative"` file, the compiler strips the wrapper per build so it
|
|
98
|
+
can split schemas, renderers, and executors across the client/server boundary.
|
|
99
|
+
Outside generative compilation, it returns the toolkit unchanged and can be
|
|
100
|
+
used for plain frontend/backend/human toolkit objects.
|
|
101
|
+
|
|
102
|
+
<ParametersTable {...defineToolkit} />
|
|
103
|
+
|
|
104
|
+
### externalTool
|
|
105
|
+
|
|
106
|
+
Marks a generative toolkit entry as an externally executed backend tool.
|
|
107
|
+
|
|
108
|
+
Use this when another system (for example a backend route or LangGraph node)
|
|
109
|
+
already defines and executes the tool, but assistant-ui should render its
|
|
110
|
+
tool calls. The use-generative compiler omits `execute: externalTool()`
|
|
111
|
+
entries from the server build and keeps a `type: "backend"` renderer on the
|
|
112
|
+
client build.
|
|
113
|
+
|
|
114
|
+
```ts
|
|
115
|
+
function externalTool(): never;
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### hitl
|
|
119
|
+
|
|
120
|
+
<Callout type="warn">
|
|
121
|
+
<strong>Deprecated.</strong> Use [humanTool](/docs/api-reference/tools/toolkits#humantool).
|
|
122
|
+
</Callout>
|
|
123
|
+
|
|
124
|
+
```ts
|
|
125
|
+
const hitl: typeof humanTool;
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### hitlTool
|
|
129
|
+
|
|
130
|
+
<Callout type="warn">
|
|
131
|
+
<strong>Deprecated.</strong> Use [humanTool](/docs/api-reference/tools/toolkits#humantool).
|
|
132
|
+
</Callout>
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
const hitlTool: typeof humanTool;
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### humanTool
|
|
139
|
+
|
|
140
|
+
Marks a tool as **human-in-the-loop**: the agent pauses and the UI (`render`)
|
|
141
|
+
supplies the result instead of code. Use it as the tool's `execute`:
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
confirm: { execute: humanTool(), render: (props) => <Confirm {...props} /> }
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Unlike [defineToolkit](/docs/api-reference/tools/toolkits#definetoolkit), it has **no runtime implementation**: a
|
|
148
|
+
`"use generative"` compiler (e.g. `@assistant-ui/next` or `@assistant-ui/vite`)
|
|
149
|
+
detects `execute: humanTool()`, drops it, and stamps the tool `type: "human"`.
|
|
150
|
+
Reaching it at runtime means the module wasn't compiled (used outside a
|
|
151
|
+
`"use generative"` file), so it throws.
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
function humanTool(): never;
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### providerTool
|
|
158
|
+
|
|
159
|
+
Marks a tool as provider-executed. The use-generative compiler converts
|
|
160
|
+
`execute: providerTool(...)` into a `type: "provider"` tool entry.
|
|
161
|
+
|
|
162
|
+
<ParametersTable {...providerTool} />
|
|
163
|
+
|
|
164
|
+
### stubTool
|
|
165
|
+
|
|
166
|
+
Marks a generative toolkit entry as a frontend tool whose executor will be
|
|
167
|
+
supplied by `useAuiToolOverrides(...)`.
|
|
168
|
+
|
|
169
|
+
`stubTool()` has no runtime implementation. It must be used inside a
|
|
170
|
+
`"use generative"` toolkit file so the compiler can strip it.
|
|
171
|
+
|
|
172
|
+
```ts
|
|
173
|
+
function stubTool(): never;
|
|
174
|
+
```
|
|
91
175
|
{/* api-reference:end */}
|
|
@@ -3,7 +3,7 @@ title: Utilities
|
|
|
3
3
|
description: Miscellaneous @assistant-ui/react utilities for custom rendering, composition, and advanced assistant UI behavior.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { AssistantCloud, ChainOfThoughtClient, DevToolsHooks, InMemoryThreadList,
|
|
6
|
+
import { AssistantCloud, ChainOfThoughtClient, DevToolsHooks, InMemoryThreadList, Interactables, SingleThreadList, Suggestions, useSmooth } from "@/generated/typeDocs";
|
|
7
7
|
|
|
8
8
|
{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
|
|
9
9
|
{/* Do not edit manually. */}
|
|
@@ -22,60 +22,15 @@ import { AssistantCloud, ChainOfThoughtClient, DevToolsHooks, InMemoryThreadList
|
|
|
22
22
|
|
|
23
23
|
<ParametersTable {...ChainOfThoughtClient} />
|
|
24
24
|
|
|
25
|
-
###
|
|
26
|
-
|
|
27
|
-
Defines MCP server tools as a spreadable toolkit fragment.
|
|
28
|
-
|
|
29
|
-
<ParametersTable {...defineMcpToolkit} />
|
|
30
|
-
|
|
31
|
-
### defineToolkit
|
|
32
|
-
|
|
33
|
-
Authoring helper for a `"use generative"` toolkit. Accepts the permissive
|
|
34
|
-
ToolkitDefinition (a `backend` tool may carry its server `execute`)
|
|
35
|
-
and types the result as the canonical [Toolkit](/docs/api-reference/tools/toolkits#toolkit).
|
|
36
|
-
|
|
37
|
-
It has **no runtime implementation**. A `"use generative"` compiler (e.g.
|
|
38
|
-
`@assistant-ui/next` or `@assistant-ui/vite`) strips the `defineToolkit(...)`
|
|
39
|
-
wrapper (and its import) per build, so a correctly compiled
|
|
40
|
-
`export default defineToolkit({...})` never calls this. If it *does* run, the
|
|
41
|
-
module was not compiled by a use-generative loader — e.g. `defineToolkit` used
|
|
42
|
-
outside a `"use generative"` file — which would ship a backend `execute` to the
|
|
43
|
-
client. So it throws instead of silently leaking.
|
|
44
|
-
|
|
45
|
-
<ParametersTable {...defineToolkit} />
|
|
46
|
-
|
|
47
|
-
### DevToolsHooks
|
|
48
|
-
|
|
49
|
-
<ParametersTable {...DevToolsHooks} />
|
|
50
|
-
|
|
51
|
-
### hitl
|
|
52
|
-
|
|
53
|
-
<Callout type="warn">
|
|
54
|
-
<strong>Deprecated.</strong> Use [hitlTool](/docs/api-reference/utilities/miscellaneous#hitltool).
|
|
55
|
-
</Callout>
|
|
25
|
+
### createMessageQueue
|
|
56
26
|
|
|
57
27
|
```ts
|
|
58
|
-
const
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### hitlTool
|
|
62
|
-
|
|
63
|
-
Marks a tool as **human-in-the-loop**: the agent pauses and the UI (`render`)
|
|
64
|
-
supplies the result instead of code. Use it as the tool's `execute`:
|
|
65
|
-
|
|
66
|
-
```tsx
|
|
67
|
-
confirm: { execute: hitlTool(), render: (props) => <Confirm {...props} /> }
|
|
28
|
+
const createMessageQueue: (driver: MessageQueueDriver) => MessageQueueController;
|
|
68
29
|
```
|
|
69
30
|
|
|
70
|
-
|
|
71
|
-
`"use generative"` compiler (e.g. `@assistant-ui/next` or `@assistant-ui/vite`)
|
|
72
|
-
detects `execute: hitlTool()`, drops it, and stamps the tool `type: "human"`.
|
|
73
|
-
Reaching it at runtime means the module wasn't compiled (used outside a
|
|
74
|
-
`"use generative"` file), so it throws.
|
|
31
|
+
### DevToolsHooks
|
|
75
32
|
|
|
76
|
-
|
|
77
|
-
function hitlTool(): never;
|
|
78
|
-
```
|
|
33
|
+
<ParametersTable {...DevToolsHooks} />
|
|
79
34
|
|
|
80
35
|
### InMemoryThreadList
|
|
81
36
|
|
|
@@ -83,54 +38,34 @@ function hitlTool(): never;
|
|
|
83
38
|
|
|
84
39
|
### Interactables
|
|
85
40
|
|
|
86
|
-
|
|
87
|
-
const Interactables: () => ResourceElement<ClientOutput<"interactables">, undefined>;
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### providerTool
|
|
91
|
-
|
|
92
|
-
Marks a tool as provider-executed. The use-generative compiler converts
|
|
93
|
-
`execute: providerTool(...)` into a `type: "provider"` tool entry.
|
|
94
|
-
|
|
95
|
-
<ParametersTable {...providerTool} />
|
|
41
|
+
<ParametersTable {...Interactables} />
|
|
96
42
|
|
|
97
43
|
### SingleThreadList
|
|
98
44
|
|
|
99
|
-
A minimal threads scope that wraps a single thread.
|
|
100
|
-
Automatically provided by ExternalThread when no threads scope exists.
|
|
101
|
-
Mounts the provided thread resource element.
|
|
102
|
-
|
|
103
45
|
<ParametersTable {...SingleThreadList} />
|
|
104
46
|
|
|
105
|
-
###
|
|
47
|
+
### Suggestions
|
|
106
48
|
|
|
107
|
-
|
|
108
|
-
supplied by `useAuiToolOverrides(...)`.
|
|
49
|
+
<ParametersTable {...Suggestions} />
|
|
109
50
|
|
|
110
|
-
|
|
111
|
-
`"use generative"` toolkit file so the compiler can strip it.
|
|
51
|
+
### useSmooth
|
|
112
52
|
|
|
113
|
-
|
|
114
|
-
function stubTool(): never;
|
|
115
|
-
```
|
|
53
|
+
Animates streamed message part text with a typewriter-style reveal.
|
|
116
54
|
|
|
117
|
-
|
|
55
|
+
Takes the current part state and a `smooth` argument: `false` disables,
|
|
56
|
+
`true` uses the default rate, and a SmoothOptions object tunes
|
|
57
|
+
the reveal. Returns the part state with `text` replaced by the revealed
|
|
58
|
+
prefix and `status` reporting `running` until the reveal catches up.
|
|
118
59
|
|
|
119
|
-
```
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
>;
|
|
125
|
-
(
|
|
126
|
-
suggestions: SuggestionConfig[],
|
|
127
|
-
): ResourceElement<
|
|
128
|
-
ClientOutput<"suggestions">,
|
|
129
|
-
SuggestionConfig[]
|
|
130
|
-
>;
|
|
131
|
-
};
|
|
60
|
+
```tsx
|
|
61
|
+
const { text, status } = useSmooth(useMessagePartText(), {
|
|
62
|
+
drainMs: 500,
|
|
63
|
+
maxCharsPerFrame: 30,
|
|
64
|
+
});
|
|
132
65
|
```
|
|
133
66
|
|
|
67
|
+
<ParametersTable {...useSmooth} />
|
|
68
|
+
|
|
134
69
|
### unstable_defaultDirectiveFormatter
|
|
135
70
|
|
|
136
71
|
Default directive formatter using the `:type[label]{name=id}` syntax.
|
|
@@ -60,7 +60,7 @@ const AssistantMessage: FC = () => {
|
|
|
60
60
|
case "group-reasoning": {
|
|
61
61
|
const running = part.status.type === "running";
|
|
62
62
|
return (
|
|
63
|
-
<ReasoningRoot
|
|
63
|
+
<ReasoningRoot streaming={running}>
|
|
64
64
|
<ReasoningTrigger active={running} />
|
|
65
65
|
<ReasoningContent aria-busy={running}>
|
|
66
66
|
<ReasoningText>{children}</ReasoningText>
|
|
@@ -68,6 +68,9 @@ Render specialized message content.
|
|
|
68
68
|
<Card title="LaTeX" href="/docs/guides/latex">
|
|
69
69
|
Render math via React Markdown or Streamdown, with streaming-safe escape rules.
|
|
70
70
|
</Card>
|
|
71
|
+
<Card title="Thread Virtualization" href="/docs/guides/virtualization">
|
|
72
|
+
Render very long threads with @tanstack/react-virtual and per-index message rendering.
|
|
73
|
+
</Card>
|
|
71
74
|
</Cards>
|
|
72
75
|
|
|
73
76
|
## Audio
|