@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.
Files changed (102) hide show
  1. package/.docs/organized/code-examples/waterfall.md +7 -7
  2. package/.docs/organized/code-examples/with-a2a.md +8 -8
  3. package/.docs/organized/code-examples/with-ag-ui.md +12 -12
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +10 -10
  5. package/.docs/organized/code-examples/with-artifacts.md +40 -34
  6. package/.docs/organized/code-examples/with-assistant-transport.md +11 -11
  7. package/.docs/organized/code-examples/with-browser-extension.md +9 -9
  8. package/.docs/organized/code-examples/with-chain-of-thought.md +72 -51
  9. package/.docs/organized/code-examples/with-cloud-standalone.md +10 -10
  10. package/.docs/organized/code-examples/with-cloud.md +10 -10
  11. package/.docs/organized/code-examples/with-custom-thread-list.md +10 -10
  12. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +12 -12
  13. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +12 -12
  14. package/.docs/organized/code-examples/with-expo.md +66 -31
  15. package/.docs/organized/code-examples/with-external-store.md +8 -8
  16. package/.docs/organized/code-examples/with-ffmpeg.md +13 -13
  17. package/.docs/organized/code-examples/with-generative-ui.md +98 -368
  18. package/.docs/organized/code-examples/with-google-adk.md +9 -9
  19. package/.docs/organized/code-examples/with-heat-graph.md +7 -7
  20. package/.docs/organized/code-examples/with-image-generation.md +10 -10
  21. package/.docs/organized/code-examples/with-interactables.md +10 -10
  22. package/.docs/organized/code-examples/with-langchain.md +10 -10
  23. package/.docs/organized/code-examples/with-langgraph.md +33 -29
  24. package/.docs/organized/code-examples/with-livekit.md +12 -12
  25. package/.docs/organized/code-examples/with-mcp.md +11 -11
  26. package/.docs/organized/code-examples/with-opencode.md +109 -583
  27. package/.docs/organized/code-examples/with-pi.md +2044 -0
  28. package/.docs/organized/code-examples/with-react-hook-form.md +11 -11
  29. package/.docs/organized/code-examples/with-react-ink-web.md +691 -0
  30. package/.docs/organized/code-examples/with-react-ink.md +309 -102
  31. package/.docs/organized/code-examples/with-react-router.md +14 -14
  32. package/.docs/organized/code-examples/with-resumable-stream.md +11 -11
  33. package/.docs/organized/code-examples/with-store.md +70 -66
  34. package/.docs/organized/code-examples/with-tanstack.md +25 -11
  35. package/.docs/organized/code-examples/with-tap-runtime.md +8 -8
  36. package/.docs/organized/code-examples/with-virtualized-thread.md +656 -0
  37. package/.docs/raw/docs/(docs)/architecture.mdx +65 -53
  38. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +1 -1
  39. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +3 -0
  40. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +44 -1
  41. package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +14 -3
  42. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +1 -1
  43. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +2 -23
  44. package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +22 -0
  45. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +93 -9
  46. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +21 -86
  47. package/.docs/raw/docs/guides/chain-of-thought.mdx +1 -1
  48. package/.docs/raw/docs/guides/index.mdx +3 -0
  49. package/.docs/raw/docs/guides/input-history.mdx +55 -0
  50. package/.docs/raw/docs/guides/virtualization.mdx +63 -0
  51. package/.docs/raw/docs/ink/adapters.mdx +23 -1
  52. package/.docs/raw/docs/ink/hooks.mdx +22 -19
  53. package/.docs/raw/docs/migrations/toolkit-tools.mdx +14 -8
  54. package/.docs/raw/docs/react-native/hooks.mdx +26 -18
  55. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +39 -0
  56. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +3 -3
  57. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +46 -4
  58. package/.docs/raw/docs/runtimes/concepts/stability.mdx +1 -1
  59. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +54 -12
  60. package/.docs/raw/docs/runtimes/custom/data-stream.mdx +1 -1
  61. package/.docs/raw/docs/runtimes/custom/external-store.mdx +62 -4
  62. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +120 -4
  63. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +9 -9
  64. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +13 -0
  65. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +5 -5
  66. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +3 -3
  67. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +6 -6
  68. package/.docs/raw/docs/tools/backend.mdx +19 -11
  69. package/.docs/raw/docs/tools/defining-tools.mdx +177 -52
  70. package/.docs/raw/docs/tools/index.mdx +7 -12
  71. package/.docs/raw/docs/tools/mcp.mdx +83 -15
  72. package/.docs/raw/docs/tools/multi-agent.mdx +5 -5
  73. package/.docs/raw/docs/tools/tool-ui.mdx +64 -28
  74. package/.docs/raw/docs/tools/user-managed-mcp.mdx +4 -4
  75. package/.docs/raw/docs/ui/dot-matrix.mdx +133 -0
  76. package/.docs/raw/docs/ui/mermaid.mdx +16 -9
  77. package/.docs/raw/docs/ui/model-selector.mdx +219 -52
  78. package/.docs/raw/docs/ui/number-roll.mdx +154 -0
  79. package/.docs/raw/docs/ui/part-grouping.mdx +2 -2
  80. package/.docs/raw/docs/ui/reasoning.mdx +3 -3
  81. package/.docs/raw/docs/ui/streamdown.mdx +2 -0
  82. package/.docs/raw/docs/ui/syntax-highlighting.mdx +1 -1
  83. package/.docs/raw/docs/ui/thread.mdx +52 -0
  84. package/.docs/raw/docs/ui/tool-fallback.mdx +16 -0
  85. package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
  86. package/dist/constants.js.map +1 -1
  87. package/dist/index.js.map +1 -1
  88. package/dist/prepare-docs/code-examples.js.map +1 -1
  89. package/dist/prepare-docs/copy-raw.js.map +1 -1
  90. package/dist/prepare-docs/prepare.js.map +1 -1
  91. package/dist/stdio.js.map +1 -1
  92. package/dist/tools/docs.js.map +1 -1
  93. package/dist/tools/examples.js.map +1 -1
  94. package/dist/tools/tests/test-setup.js.map +1 -1
  95. package/dist/utils/mdx.js.map +1 -1
  96. package/dist/utils/paths.js.map +1 -1
  97. package/package.json +4 -4
  98. /package/.docs/raw/docs/{(docs)/copilots → copilots}/assistant-frame.mdx +0 -0
  99. /package/.docs/raw/docs/{(docs)/copilots → copilots}/make-assistant-visible.mdx +0 -0
  100. /package/.docs/raw/docs/{(docs)/copilots → copilots}/model-context.mdx +0 -0
  101. /package/.docs/raw/docs/{(docs)/copilots → copilots}/motivation.mdx +0 -0
  102. /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 gap-4">
11
- <Card title='1. Frontend components'>
12
- Shadcn UI chat components with built-in state management
13
- </Card>
14
-
15
- <Card title='2. Runtime'>
16
- State management layer connecting UI to LLMs and backend services
17
- </Card>
18
-
19
- <Card title='3. Assistant Cloud'>
20
- Hosted service for thread persistence, history, and user management
21
- </Card>
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
- ```mermaid
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
- classDef default color:#f8fafc,text-align:center
66
-
67
- style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
68
- style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
69
- style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
70
-
71
- class A,B,C,D,E default
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
- ```mermaid
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
- classDef default color:#f8fafc,text-align:center
84
-
85
- style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
86
- style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
87
- style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
88
- style E fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
89
-
90
- class A,B,C,D,E default
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
- ```mermaid
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
- classDef default color:#f8fafc,text-align:center
104
-
105
- style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
106
- style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
107
- style C fill:#86efac,stroke:#064e3b,stroke-width:2px,color:#064e3b,font-weight:bold
108
- style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
109
- style E fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
110
-
111
- class A,B,C,D,E default
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?: "concat-content" | "none" | 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[]; };
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. Use [AISDKToolkit](/docs/api-reference/integrations/react-ai-sdk#aisdktoolkit) when the
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: generativeTools({ toolkit: docsToolkit, frontendTools: 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: () => ResourceElement<ClientOutput<"modelContext">, undefined>;
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
- Registers renderers for `data` message parts.
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
- } satisfies Toolkit;
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
- Registers tools with model context and installs tool-call renderers.
83
+ <ParametersTable {...Tools} />
84
84
 
85
- Mount this resource near an assistant subtree when you want to expose a
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
- <ParametersTable {...Tools} />
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, SingleThreadList, defineMcpToolkit, defineToolkit, providerTool } from "@/generated/typeDocs";
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
- ### defineMcpToolkit
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 hitl: typeof hitlTool;
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
- Like [defineToolkit](/docs/api-reference/utilities/miscellaneous#definetoolkit), it has **no runtime implementation**: a
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
- ```ts
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
- ```ts
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
- ### stubTool
47
+ ### Suggestions
106
48
 
107
- Marks a generative toolkit entry as a frontend tool whose executor will be
108
- supplied by `useAuiToolOverrides(...)`.
49
+ <ParametersTable {...Suggestions} />
109
50
 
110
- `stubTool()` has no runtime implementation. It must be used inside a
111
- `"use generative"` toolkit file so the compiler can strip it.
51
+ ### useSmooth
112
52
 
113
- ```ts
114
- function stubTool(): never;
115
- ```
53
+ Animates streamed message part text with a typewriter-style reveal.
116
54
 
117
- ### Suggestions
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
- ```ts
120
- const Suggestions: {
121
- (): ResourceElement<
122
- ClientOutput<"suggestions">,
123
- undefined
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 defaultOpen={running}>
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