@assistant-ui/mcp-docs-server 0.1.32 → 0.1.34

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 (134) hide show
  1. package/.docs/organized/code-examples/waterfall.md +20 -22
  2. package/.docs/organized/code-examples/with-a2a.md +24 -24
  3. package/.docs/organized/code-examples/with-ag-ui.md +30 -25
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +11 -9
  5. package/.docs/organized/code-examples/with-artifacts.md +49 -37
  6. package/.docs/organized/code-examples/with-assistant-transport.md +63 -51
  7. package/.docs/organized/code-examples/with-browser-extension.md +22 -10
  8. package/.docs/organized/code-examples/with-chain-of-thought.md +406 -87
  9. package/.docs/organized/code-examples/with-cloud-standalone.md +25 -24
  10. package/.docs/organized/code-examples/with-cloud.md +11 -9
  11. package/.docs/organized/code-examples/with-custom-thread-list.md +14 -12
  12. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +23 -21
  13. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +14 -13
  14. package/.docs/organized/code-examples/with-expo.md +44 -29
  15. package/.docs/organized/code-examples/with-external-store.md +9 -7
  16. package/.docs/organized/code-examples/with-ffmpeg.md +322 -285
  17. package/.docs/organized/code-examples/with-generative-ui.md +1066 -256
  18. package/.docs/organized/code-examples/with-google-adk.md +10 -8
  19. package/.docs/organized/code-examples/with-heat-graph.md +13 -11
  20. package/.docs/organized/code-examples/with-image-generation.md +19 -17
  21. package/.docs/organized/code-examples/with-interactables.md +317 -239
  22. package/.docs/organized/code-examples/with-langchain.md +14 -12
  23. package/.docs/organized/code-examples/with-langgraph.md +91 -83
  24. package/.docs/organized/code-examples/with-livekit.md +24 -22
  25. package/.docs/organized/code-examples/with-mcp.md +18 -12
  26. package/.docs/organized/code-examples/with-opencode.md +66 -66
  27. package/.docs/organized/code-examples/with-react-hook-form.md +19 -17
  28. package/.docs/organized/code-examples/with-react-ink.md +297 -102
  29. package/.docs/organized/code-examples/with-react-router.md +17 -15
  30. package/.docs/organized/code-examples/with-resumable-stream.md +15 -14
  31. package/.docs/organized/code-examples/with-store.md +78 -76
  32. package/.docs/organized/code-examples/with-tanstack.md +13 -14
  33. package/.docs/organized/code-examples/with-tap-runtime.md +26 -24
  34. package/.docs/raw/docs/(docs)/architecture.mdx +94 -42
  35. package/.docs/raw/docs/(docs)/cli.mdx +1 -2
  36. package/.docs/raw/docs/(docs)/installation.mdx +1 -1
  37. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +5 -1
  38. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +15 -15
  39. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +14 -1
  40. package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +18 -0
  41. package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +33 -0
  42. package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +45 -0
  43. package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +41 -41
  44. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +19 -1
  45. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +122 -122
  46. package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +43 -2
  47. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +6 -0
  48. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +4 -6
  49. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +30 -0
  50. package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +20 -3
  51. package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +8 -8
  52. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +52 -4
  53. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +100 -10
  54. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +7 -59
  55. package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -2
  56. package/.docs/raw/docs/{(docs)/copilots → copilots}/model-context.mdx +34 -26
  57. package/.docs/raw/docs/{(docs)/copilots → copilots}/motivation.mdx +32 -26
  58. package/.docs/raw/docs/guides/chain-of-thought.mdx +7 -9
  59. package/.docs/raw/docs/guides/context-api.mdx +2 -1
  60. package/.docs/raw/docs/guides/index.mdx +3 -12
  61. package/.docs/raw/docs/guides/mentions.mdx +4 -4
  62. package/.docs/raw/docs/guides/slash-commands.mdx +1 -1
  63. package/.docs/raw/docs/guides/suggestions.mdx +1 -1
  64. package/.docs/raw/docs/ink/adapters.mdx +23 -1
  65. package/.docs/raw/docs/ink/hooks.mdx +101 -85
  66. package/.docs/raw/docs/ink/migration.mdx +1 -1
  67. package/.docs/raw/docs/ink/primitives.mdx +2 -2
  68. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +1 -1
  69. package/.docs/raw/docs/integrations/index.mdx +2 -2
  70. package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +17 -2
  71. package/.docs/raw/docs/migrations/toolkit-tools.mdx +232 -0
  72. package/.docs/raw/docs/primitives/chain-of-thought.mdx +10 -16
  73. package/.docs/raw/docs/primitives/message.mdx +9 -10
  74. package/.docs/raw/docs/react-native/hooks.mdx +62 -79
  75. package/.docs/raw/docs/react-native/migration.mdx +1 -1
  76. package/.docs/raw/docs/react-native/primitives.mdx +2 -2
  77. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +3 -0
  78. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +41 -0
  79. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +122 -1
  80. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +46 -4
  81. package/.docs/raw/docs/runtimes/concepts/threads.mdx +7 -1
  82. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +54 -12
  83. package/.docs/raw/docs/runtimes/custom/external-store.mdx +62 -4
  84. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +30 -7
  85. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +108 -38
  86. package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +2 -2
  87. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +14 -1
  88. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +64 -50
  89. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +98 -86
  90. package/.docs/raw/docs/tools/backend.mdx +144 -0
  91. package/.docs/raw/docs/tools/defining-tools.mdx +538 -0
  92. package/.docs/raw/docs/tools/dynamic-tools.mdx +110 -0
  93. package/.docs/raw/docs/tools/generative-ui.mdx +214 -0
  94. package/.docs/raw/docs/tools/index.mdx +71 -0
  95. package/.docs/raw/docs/{guides → tools}/interactables.mdx +1 -1
  96. package/.docs/raw/docs/{integrations/tools → tools}/mcp.mdx +145 -50
  97. package/.docs/raw/docs/{guides → tools}/multi-agent.mdx +15 -17
  98. package/.docs/raw/docs/tools/tool-ui.mdx +967 -0
  99. package/.docs/raw/docs/{integrations/tools/react-mcp.mdx → tools/user-managed-mcp.mdx} +7 -7
  100. package/.docs/raw/docs/ui/directive-text.mdx +3 -3
  101. package/.docs/raw/docs/ui/mcp-config.mdx +4 -4
  102. package/.docs/raw/docs/ui/mermaid.mdx +16 -9
  103. package/.docs/raw/docs/ui/part-grouping.mdx +84 -50
  104. package/.docs/raw/docs/ui/reasoning.mdx +4 -5
  105. package/.docs/raw/docs/ui/tool-fallback.mdx +16 -0
  106. package/.docs/raw/docs/ui/tool-group.mdx +5 -6
  107. package/.docs/raw/docs/utilities/heat-graph.mdx +1 -1
  108. package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
  109. package/dist/constants.js.map +1 -1
  110. package/dist/index.d.ts.map +1 -1
  111. package/dist/index.js.map +1 -1
  112. package/dist/prepare-docs/code-examples.d.ts.map +1 -1
  113. package/dist/prepare-docs/code-examples.js.map +1 -1
  114. package/dist/prepare-docs/copy-raw.d.ts.map +1 -1
  115. package/dist/prepare-docs/copy-raw.js.map +1 -1
  116. package/dist/prepare-docs/prepare.js.map +1 -1
  117. package/dist/stdio.js.map +1 -1
  118. package/dist/tools/docs.js.map +1 -1
  119. package/dist/tools/examples.js.map +1 -1
  120. package/dist/tools/tests/test-setup.js.map +1 -1
  121. package/dist/utils/mdx.js.map +1 -1
  122. package/dist/utils/paths.d.ts.map +1 -1
  123. package/dist/utils/paths.js.map +1 -1
  124. package/package.json +5 -5
  125. package/.docs/organized/code-examples/with-parent-id-grouping.md +0 -596
  126. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +0 -151
  127. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +0 -230
  128. package/.docs/raw/docs/guides/generative-ui.mdx +0 -142
  129. package/.docs/raw/docs/guides/tool-ui.mdx +0 -858
  130. package/.docs/raw/docs/guides/tools.mdx +0 -736
  131. /package/.docs/raw/docs/{(docs)/copilots → copilots}/assistant-frame.mdx +0 -0
  132. /package/.docs/raw/docs/{(docs)/copilots → copilots}/make-assistant-visible.mdx +0 -0
  133. /package/.docs/raw/docs/{(docs)/copilots → copilots}/use-assistant-instructions.mdx +0 -0
  134. /package/.docs/raw/docs/{guides → tools}/mcp-apps.mdx +0 -0
@@ -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 { useAssistantDataUI, useAssistantToolUI } from "@/generated/typeDocs";
6
+ import { 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. */}
@@ -26,6 +26,16 @@ directly for a renderer scope, or prefer [useAssistantDataUI](/docs/api-referenc
26
26
  const DataRenderers: () => ResourceElement<ClientOutput<"dataRenderers">, undefined>;
27
27
  ```
28
28
 
29
+ ### getMcpAppFromToolPart
30
+
31
+ Returns MCP app metadata for a tool-call part that points at a `ui://`
32
+ resource.
33
+
34
+ Returns `undefined` when the part has no MCP app metadata or the metadata
35
+ does not reference an assistant-ui MCP app resource.
36
+
37
+ <ParametersTable {...getMcpAppFromToolPart} />
38
+
29
39
  ### makeAssistantDataUI
30
40
 
31
41
  Creates a React component that registers a named data-part renderer when
@@ -44,6 +54,12 @@ const makeAssistantDataUI: <T = any>(dataUI: AssistantDataUIProps<T>) => Assista
44
54
 
45
55
  ### makeAssistantToolUI
46
56
 
57
+ <Callout type="warn">
58
+ <strong>Deprecated.</strong> Put `render`/`renderText` on the matching toolkit entry, or use
59
+ `MessagePrimitive.Parts` inline tool render overrides for per-message UI.
60
+ See https://assistant-ui.com/docs/migrations/toolkit-tools.
61
+ </Callout>
62
+
47
63
  Creates a React component that registers a tool-call renderer when rendered.
48
64
 
49
65
  Use this to package reusable display components for tools whose definitions
@@ -55,11 +71,38 @@ type AssistantToolUIProps = {
55
71
  toolName: string;
56
72
  /** Component rendered for matching tool-call message parts. */
57
73
  render: ToolCallMessagePartComponent<TArgs, TResult>;
74
+ /**
75
+ * How the UI is presented relative to the chain-of-thought trace. Set
76
+ * `"standalone"` to surface it on its own (e.g. human-in-the-loop or
77
+ * generative UI for a backend/MCP tool). Defaults to `"inline"`.
78
+ */
79
+ display?: "standalone" | "inline";
58
80
  };
59
81
 
60
82
  const makeAssistantToolUI: <TArgs, TResult>(tool: AssistantToolUIProps<TArgs, TResult>) => AssistantToolUI;
61
83
  ```
62
84
 
85
+ ### McpAppRenderer
86
+
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
+ <ParametersTable {...McpAppRenderer} />
95
+
96
+ ### McpAppsRemoteHost
97
+
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
+ <ParametersTable {...McpAppsRemoteHost} />
105
+
63
106
  ### useAssistantDataUI
64
107
 
65
108
  Registers a renderer for named `data` message parts while the component is
@@ -69,11 +112,16 @@ mounted.
69
112
 
70
113
  ### useAssistantToolUI
71
114
 
115
+ <Callout type="warn">
116
+ <strong>Deprecated.</strong> Put `render`/`renderText` on the matching toolkit entry, or use
117
+ `MessagePrimitive.Parts` inline tool render overrides for per-message UI.
118
+ See https://assistant-ui.com/docs/migrations/toolkit-tools.
119
+ </Callout>
120
+
72
121
  Registers a tool-call renderer while the component is mounted.
73
122
 
74
- This only affects rendering. Pair it with [useAssistantTool](/docs/api-reference/tools/component-tools#useassistanttool),
75
- [Tools](/docs/api-reference/tools/toolkits#tools), or a backend tool registry to expose the actual tool
76
- definition to the model.
123
+ This only affects rendering. Pair it with [Tools](/docs/api-reference/tools/toolkits#tools) or a backend tool
124
+ registry to expose the actual tool definition to the model.
77
125
 
78
126
  <ParametersTable {...useAssistantToolUI} />
79
127
  {/* 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. */}
@@ -11,7 +11,7 @@ import { ToolDefinition, Tools, tool } from "@/generated/typeDocs";
11
11
  {/* api-manual:start */}
12
12
  A `Toolkit` is a named map of model-facing tool definitions. The `Tools` resource installs a toolkit into an assistant subtree, registering each tool with the model context and each `render` component with the tool-call renderer scope.
13
13
 
14
- Use these APIs when you want a tool's availability to follow your runtime or provider tree rather than the mount state of a specific React component. For tools whose lifetime should follow a specific UI surface, see [Component Tools](/docs/api-reference/tools/component-tools).
14
+ Use these APIs when you want a tool's availability to follow your runtime or provider tree. The older component-scoped registration APIs are deprecated; see [Migrating Tools to Toolkits](/docs/migrations/toolkit-tools).
15
15
  {/* api-manual:end */}
16
16
 
17
17
  {/* api-reference:start */}
@@ -26,7 +26,7 @@ Defines a model tool with its argument schema, execution behavior, and
26
26
  optional model-output conversion.
27
27
 
28
28
  This helper keeps reusable tool definitions type-checked and convenient to
29
- export for a [Toolkit](/docs/api-reference/tools/toolkits#toolkit), [Tools](/docs/api-reference/tools/toolkits#tools), or [useAssistantTool](/docs/api-reference/tools/component-tools#useassistanttool).
29
+ export for a [Toolkit](/docs/api-reference/tools/toolkits#toolkit) registered with [Tools](/docs/api-reference/tools/toolkits#tools).
30
30
  Inference from parameter schemas is currently limited, so provide generic
31
31
  arguments when you need precise args or result types.
32
32
 
@@ -49,11 +49,10 @@ const getWeather = tool<{ city: string }, string>({
49
49
 
50
50
  Tool definition accepted by the React tool registry.
51
51
 
52
- Extends the core tool contract with a render component. Human tools rely on
53
- the renderer to collect input from the user. Frontend tools execute in the
54
- browser and require a UI surface for their progress and result. Backend
55
- tools execute server-side and may omit a renderer. The `render` component is
56
- required for frontend and human tools and optional for backend tools.
52
+ Extends the core tool contract with tool-call display options. Human tools
53
+ rely on `render` to collect input from the user. Frontend tools execute in
54
+ the browser and require either `render` or `renderText` for their progress
55
+ and result. Backend tools execute server-side and may omit a renderer.
57
56
 
58
57
  <ParametersTable {...ToolDefinition} />
59
58
 
@@ -64,7 +63,7 @@ Named collection of tools exposed to the assistant model.
64
63
  Keys are the tool names the model receives and uses in tool calls.
65
64
 
66
65
  ```tsx
67
- const toolkit = {
66
+ const toolkit = defineToolkit({
68
67
  get_weather: {
69
68
  type: "frontend",
70
69
  description: "Get the weather for a city.",
@@ -72,7 +71,7 @@ const toolkit = {
72
71
  execute: async ({ city }: { city: string }) => fetchWeather(city),
73
72
  render: WeatherToolUI,
74
73
  },
75
- } satisfies Toolkit;
74
+ });
76
75
  ```
77
76
 
78
77
  ```ts
@@ -89,4 +88,95 @@ context, while each tool renderer is registered with the tools scope for
89
88
  message rendering.
90
89
 
91
90
  <ParametersTable {...Tools} />
91
+
92
+ ### defineMcpToolkit
93
+
94
+ Defines MCP server tools as a spreadable toolkit fragment.
95
+
96
+ <ParametersTable {...defineMcpToolkit} />
97
+
98
+ ### defineToolkit
99
+
100
+ Toolkit authoring helper. Accepts the permissive ToolkitDefinition
101
+ (a generative `backend` tool may carry its server `execute`) and types the
102
+ result as the canonical [Toolkit](/docs/api-reference/tools/toolkits#toolkit).
103
+
104
+ In a `"use generative"` file, the compiler strips the wrapper per build so it
105
+ can split schemas, renderers, and executors across the client/server boundary.
106
+ Outside generative compilation, it returns the toolkit unchanged and can be
107
+ used for plain frontend/backend/human toolkit objects.
108
+
109
+ <ParametersTable {...defineToolkit} />
110
+
111
+ ### externalTool
112
+
113
+ Marks a generative toolkit entry as an externally executed backend tool.
114
+
115
+ Use this when another system (for example a backend route or LangGraph node)
116
+ already defines and executes the tool, but assistant-ui should render its
117
+ tool calls. The use-generative compiler omits `execute: externalTool()`
118
+ entries from the server build and keeps a `type: "backend"` renderer on the
119
+ client build.
120
+
121
+ ```ts
122
+ function externalTool(): never;
123
+ ```
124
+
125
+ ### hitl
126
+
127
+ <Callout type="warn">
128
+ <strong>Deprecated.</strong> Use [humanTool](/docs/api-reference/tools/toolkits#humantool).
129
+ </Callout>
130
+
131
+ ```ts
132
+ const hitl: typeof humanTool;
133
+ ```
134
+
135
+ ### hitlTool
136
+
137
+ <Callout type="warn">
138
+ <strong>Deprecated.</strong> Use [humanTool](/docs/api-reference/tools/toolkits#humantool).
139
+ </Callout>
140
+
141
+ ```ts
142
+ const hitlTool: typeof humanTool;
143
+ ```
144
+
145
+ ### humanTool
146
+
147
+ Marks a tool as **human-in-the-loop**: the agent pauses and the UI (`render`)
148
+ supplies the result instead of code. Use it as the tool's `execute`:
149
+
150
+ ```tsx
151
+ confirm: { execute: humanTool(), render: (props) => <Confirm {...props} /> }
152
+ ```
153
+
154
+ Unlike [defineToolkit](/docs/api-reference/tools/toolkits#definetoolkit), it has **no runtime implementation**: a
155
+ `"use generative"` compiler (e.g. `@assistant-ui/next` or `@assistant-ui/vite`)
156
+ detects `execute: humanTool()`, drops it, and stamps the tool `type: "human"`.
157
+ Reaching it at runtime means the module wasn't compiled (used outside a
158
+ `"use generative"` file), so it throws.
159
+
160
+ ```ts
161
+ function humanTool(): never;
162
+ ```
163
+
164
+ ### providerTool
165
+
166
+ Marks a tool as provider-executed. The use-generative compiler converts
167
+ `execute: providerTool(...)` into a `type: "provider"` tool entry.
168
+
169
+ <ParametersTable {...providerTool} />
170
+
171
+ ### stubTool
172
+
173
+ Marks a generative toolkit entry as a frontend tool whose executor will be
174
+ supplied by `useAuiToolOverrides(...)`.
175
+
176
+ `stubTool()` has no runtime implementation. It must be used inside a
177
+ `"use generative"` toolkit file so the compiler can strip it.
178
+
179
+ ```ts
180
+ function stubTool(): never;
181
+ ```
92
182
  {/* 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, ExportedMessageRepository, GenerativeUIRender, GenerativeUIRenderError, InMemoryThreadList, McpAppRenderer, McpAppsRemoteHost, SingleThreadList, getMcpAppFromToolPart } from "@/generated/typeDocs";
6
+ import { AssistantCloud, ChainOfThoughtClient, DevToolsHooks, InMemoryThreadList, SingleThreadList } from "@/generated/typeDocs";
7
7
 
8
8
  {/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
9
9
  {/* Do not edit manually. */}
@@ -22,40 +22,15 @@ import { AssistantCloud, ChainOfThoughtClient, DevToolsHooks, ExportedMessageRep
22
22
 
23
23
  <ParametersTable {...ChainOfThoughtClient} />
24
24
 
25
- ### DevToolsHooks
26
-
27
- <ParametersTable {...DevToolsHooks} />
28
-
29
- ### ExportedMessageRepository
30
-
31
- <ParametersTable {...ExportedMessageRepository} />
32
-
33
- ### GenerativeUIRender
34
-
35
- Internal renderer. Resolves a GenerativeUISpec against the consumer
36
- allowlist. Used by `MessagePrimitive.GenerativeUI` and by
37
- `MessagePrimitive.Parts` when handling a `generative-ui` part.
25
+ ### createMessageQueue
38
26
 
39
- <ParametersTable {...GenerativeUIRender} />
40
-
41
- ### GenerativeUIRenderError
42
-
43
- Thrown when a generative-ui spec references a component name that is not
44
- present in the consumer-provided allowlist. The allowlist is the security
45
- boundary in the same-realm rendering path — there is no fallback by
46
- default. Pass `Fallback` to opt into a soft-fail UX.
47
-
48
- <ParametersTable {...GenerativeUIRenderError} />
49
-
50
- ### getMcpAppFromToolPart
51
-
52
- Returns MCP app metadata for a tool-call part that points at a `ui://`
53
- resource.
27
+ ```ts
28
+ const createMessageQueue: (driver: MessageQueueDriver) => MessageQueueController;
29
+ ```
54
30
 
55
- Returns `undefined` when the part has no MCP app metadata or the metadata
56
- does not reference an assistant-ui MCP app resource.
31
+ ### DevToolsHooks
57
32
 
58
- <ParametersTable {...getMcpAppFromToolPart} />
33
+ <ParametersTable {...DevToolsHooks} />
59
34
 
60
35
  ### InMemoryThreadList
61
36
 
@@ -67,33 +42,6 @@ does not reference an assistant-ui MCP app resource.
67
42
  const Interactables: () => ResourceElement<ClientOutput<"interactables">, undefined>;
68
43
  ```
69
44
 
70
- ### makeAssistantVisible
71
-
72
- ```ts
73
- const makeAssistantVisible: <T extends ComponentType<any>>(Component: T, config?: { clickable?: boolean | undefined; editable?: boolean | undefined; }) => T;
74
- ```
75
-
76
- ### McpAppRenderer
77
-
78
- Creates a tool-call renderer for MCP Apps embedded in assistant messages.
79
-
80
- Compose this into the `Tools` resource through its `mcpApp` option. When a
81
- tool-call part carries `mcp.app` metadata for a `ui://` resource, the
82
- renderer loads that resource from the configured host and displays it in a
83
- sandboxed frame.
84
-
85
- <ParametersTable {...McpAppRenderer} />
86
-
87
- ### McpAppsRemoteHost
88
-
89
- Creates the default HTTP host for MCP App widgets.
90
-
91
- The host POSTs widget requests to the configured route as `{ method,
92
- params }`, using the method names expected by the assistant-ui MCP Apps
93
- guide.
94
-
95
- <ParametersTable {...McpAppsRemoteHost} />
96
-
97
45
  ### SingleThreadList
98
46
 
99
47
  A minimal threads scope that wraps a single thread.
@@ -3,8 +3,6 @@ title: AI SDK
3
3
  description: Add cloud persistence to your existing AI SDK app with a single hook.
4
4
  ---
5
5
 
6
- import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
7
-
8
6
  ## Overview
9
7
 
10
8
  The `@assistant-ui/cloud-ai-sdk` package provides a single hook that adds full message and thread persistence to any [AI SDK](https://sdk.vercel.ai/) application:
@@ -38,43 +38,51 @@ const ReadableComponent = makeAssistantVisible(MyComponent);
38
38
 
39
39
  Tools are functions that the assistant can use to interact with your application. They can be provided through various mechanisms:
40
40
 
41
- ```tsx
41
+ ```tsx title="app/form-toolkit.tsx"
42
+ "use generative";
43
+
44
+ import { defineToolkit } from "@assistant-ui/react";
45
+ import { z } from "zod";
46
+
47
+ export default defineToolkit({
48
+ submitForm: {
49
+ description: "Submit the form with the user's details.",
50
+ parameters: z.object({
51
+ email: z.string().email(),
52
+ name: z.string(),
53
+ }),
54
+ execute: async ({ email, name }) => {
55
+ "use client";
56
+ // Implementation
57
+ return { success: true };
58
+ },
59
+ renderText: { running: "Submitting…", complete: "Submitted" },
60
+ },
61
+ });
62
+ ```
63
+
64
+ ```tsx title="app/Form.tsx"
42
65
  import {
66
+ AuiProvider,
43
67
  makeAssistantVisible,
44
- makeAssistantTool,
45
- tool,
68
+ Tools,
69
+ useAui,
46
70
  } from "@assistant-ui/react";
47
- import { z } from "zod";
71
+ import toolkit from "./form-toolkit";
48
72
 
49
73
  // Via makeAssistantVisible's clickable option
50
74
  const ClickableButton = makeAssistantVisible(Button, {
51
75
  clickable: true, // Provides a click tool
52
76
  });
53
77
 
54
- // Via makeAssistantTool
55
- const submitForm = tool({
56
- parameters: z.object({
57
- email: z.string().email(),
58
- name: z.string(),
59
- }),
60
- execute: async ({ email, name }) => {
61
- // Implementation
62
- return { success: true };
63
- },
64
- });
65
-
66
- const SubmitFormTool = makeAssistantTool({
67
- ...submitForm,
68
- toolName: "submitForm"
69
- });
70
-
71
78
  // Use in your component
72
79
  function Form() {
80
+ const aui = useAui({ tools: Tools({ toolkit }) });
81
+
73
82
  return (
74
- <div>
83
+ <AuiProvider value={aui}>
75
84
  <form>{/* form fields */}</form>
76
- <SubmitFormTool />
77
- </div>
85
+ </AuiProvider>
78
86
  );
79
87
  }
80
88
  ```
@@ -134,8 +142,8 @@ Multiple providers can be registered, and their contexts will be composed:
134
142
 
135
143
  2. **Tools**
136
144
 
137
- - Use the tool() helper to define tool schemas and behavior
138
- - Prefer makeAssistantTool for reusable tools
145
+ - Use toolkit entries to define tool schemas and behavior
146
+ - Prefer `Tools({ toolkit })` for reusable tools
139
147
  - Handle errors gracefully
140
148
  - Consider async operations and loading states
141
149
  - Use the built-in click tool when possible
@@ -98,44 +98,50 @@ function SmartTransactionHistory() {
98
98
  }
99
99
  ```
100
100
 
101
- ### 3. Creating Tools (makeAssistantTool)
101
+ ### 3. Creating Tools
102
102
 
103
103
  Let's add transaction-specific tools for the assistant:
104
104
 
105
- ```tsx
106
- import { makeAssistantTool, tool } from "@assistant-ui/react";
105
+ ```tsx title="app/transaction-toolkit.tsx"
106
+ "use generative";
107
+
108
+ import { defineToolkit } from "@assistant-ui/react";
107
109
  import { z } from "zod";
108
110
 
109
- // Define a tool to analyze transactions
110
- const analyzeTransaction = tool({
111
- parameters: z.object({
112
- transactionId: z.string(),
113
- merchantName: z.string(),
114
- }),
115
- execute: async ({ transactionId, merchantName }) => {
116
- // Analyze transaction patterns, merchant reputation, etc.
117
- return {
118
- isSuspicious: false,
119
- merchantRating: 4.5,
120
- similarTransactions: 3,
121
- refundEligible: true,
122
- };
111
+ export default defineToolkit({
112
+ analyzeTransaction: {
113
+ description: "Analyze a transaction's risk and refund eligibility.",
114
+ parameters: z.object({
115
+ transactionId: z.string(),
116
+ merchantName: z.string(),
117
+ }),
118
+ execute: async ({ transactionId, merchantName }) => {
119
+ "use client";
120
+ // Analyze transaction patterns, merchant reputation, etc.
121
+ return {
122
+ isSuspicious: false,
123
+ merchantRating: 4.5,
124
+ similarTransactions: 3,
125
+ refundEligible: true,
126
+ };
127
+ },
128
+ renderText: { running: "Analyzing transaction…", complete: "Analysis ready" },
123
129
  },
124
130
  });
131
+ ```
125
132
 
126
- // Create a tool component
127
- const TransactionAnalyzer = makeAssistantTool({
128
- ...analyzeTransaction,
129
- toolName: "analyzeTransaction",
130
- });
133
+ ```tsx title="app/SmartTransactionHistory.tsx"
134
+ import { AuiProvider, Tools, useAui } from "@assistant-ui/react";
135
+ import toolkit from "./transaction-toolkit";
131
136
 
132
137
  function SmartTransactionHistory() {
138
+ const aui = useAui({ tools: Tools({ toolkit }) });
139
+
133
140
  // Previous instructions...
134
141
  return (
135
- <>
142
+ <AuiProvider value={aui}>
136
143
  <TransactionHistory transactions={transactions} />
137
- <TransactionAnalyzer />
138
- </>
144
+ </AuiProvider>
139
145
  );
140
146
  }
141
147
  ```
@@ -191,6 +197,6 @@ This creates a more intuitive and safer banking experience while maintaining the
191
197
  Learn more about each API:
192
198
 
193
199
  - [makeAssistantVisible](make-assistant-visible) for component understanding
194
- - [makeAssistantTool](make-assistant-tool) for transaction analysis
200
+ - [Tools](/docs/tools/defining-tools) for transaction analysis
195
201
  - [useAssistantInstructions](use-assistant-instructions) for behavior guidance
196
202
  - [Model Context](model-context) for dynamic context management
@@ -26,6 +26,7 @@ Return the same top-level group for reasoning and tool calls, with nested groups
26
26
  ```tsx
27
27
  import {
28
28
  MessagePrimitive,
29
+ groupPartByType,
29
30
  } from "@assistant-ui/react";
30
31
  import { MarkdownText } from "@/components/assistant-ui/markdown-text";
31
32
  import {
@@ -47,13 +48,10 @@ const AssistantMessage: FC = () => {
47
48
  return (
48
49
  <MessagePrimitive.Root>
49
50
  <MessagePrimitive.GroupedParts
50
- groupBy={(part) => {
51
- if (part.type === "reasoning")
52
- return ["group-chainOfThought", "group-reasoning"];
53
- if (part.type === "tool-call")
54
- return ["group-chainOfThought", "group-tool"];
55
- return null;
56
- }}
51
+ groupBy={groupPartByType({
52
+ reasoning: ["group-chainOfThought", "group-reasoning"],
53
+ "tool-call": ["group-chainOfThought", "group-tool"],
54
+ })}
57
55
  >
58
56
  {({ part, children }) => {
59
57
  switch (part.type) {
@@ -162,5 +160,5 @@ See the complete [with-chain-of-thought example](https://github.com/assistant-ui
162
160
  ## Related Guides
163
161
 
164
162
  - [Reasoning](/docs/ui/reasoning) — reasoning UI primitives for grouped parts
165
- - [Generative UI](/docs/guides/tool-ui) — custom UI for tool calls
166
- - [Tools](/docs/guides/tools) — defining and using tools
163
+ - [Generative UI](/docs/tools/tool-ui) — custom UI for tool calls
164
+ - [Tools](/docs/tools/defining-tools) — defining and using tools
@@ -219,6 +219,7 @@ aui.threads().getState();
219
219
  // ThreadListItem actions
220
220
  aui.threadListItem().switchTo();
221
221
  aui.threadListItem().rename(title);
222
+ aui.threadListItem().updateCustom(custom);
222
223
  aui.threadListItem().archive();
223
224
  aui.threadListItem().unarchive();
224
225
  aui.threadListItem().delete();
@@ -517,7 +518,7 @@ The table below covers the most commonly used actions. For the full catalog, see
517
518
  | Scope | Actions | Use Cases |
518
519
  | -------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
519
520
  | ThreadList | `switchToNewThread()`, `switchToThread(id)`, `reload()`, `getLoadThreadsPromise()`, `item(selector)`, `thread("main")`, `getState()` | Thread navigation, creation, and sync |
520
- | ThreadListItem | `switchTo()`, `rename(title)`, `archive()`, `unarchive()`, `delete()`, `getState()` | Thread management operations |
521
+ | ThreadListItem | `switchTo()`, `rename(title)`, `updateCustom(custom)`, `archive()`, `unarchive()`, `delete()`, `getState()` | Thread management operations |
521
522
  | Thread | `append(message)`, `startRun(config)`, `resumeRun(config)`, `cancelRun()`, `reset()`, `export()`, `import(repository)`, `message(selector)`, `composer()`, `getState()` | Message handling and conversation control |
522
523
  | Message | `reload()`, `speak()`, `stopSpeaking()`, `submitFeedback(feedback)`, `switchToBranch(options)`, `getCopyText()`, `part(selector)`, `attachment(selector)`, `composer()`, `setIsCopied(value)`, `setIsHovering(value)`, `getState()` | Message interactions and regeneration |
523
524
  | Part | `addToolResult(result)`, `resumeToolCall(result)`, `getState()` | Tool call result handling |
@@ -49,20 +49,11 @@ Customize how messages render, are edited, branched, and suggested.
49
49
 
50
50
  ## Tools & Generative UI
51
51
 
52
- Connect tools to the LLM and render their outputs as interactive UI.
52
+ Tool calling and generative UI have their own [Tools](/docs/tools) section — defining toolkits, rendering tool calls, interactables, MCP, and multi-agent UIs.
53
53
 
54
54
  <Cards>
55
- <Card title="Tools" href="/docs/guides/tools">
56
- Define tools with the Toolkit API, stream args, handle cancellation, and integrate with AI SDK / LangGraph / LangChain.
57
- </Card>
58
- <Card title="Tool UI" href="/docs/guides/tool-ui">
59
- Render tool calls and `DataMessagePart` into custom components, with fallback handling.
60
- </Card>
61
- <Card title="Interactables" href="/docs/guides/interactables">
62
- Persisted, schema-validated interactive UI driven by AI state.
63
- </Card>
64
- <Card title="Multi-Agent" href="/docs/guides/multi-agent">
65
- Sub-agent message attribution via `ToolCallMessagePart.messages` and LangGraph subgraph events.
55
+ <Card title="Tools" href="/docs/tools">
56
+ Define toolkits, render tool calls, connect MCP servers, and build generative UI.
66
57
  </Card>
67
58
  </Cards>
68
59
 
@@ -144,7 +144,7 @@ Pass the adapter to `TriggerPopover` and declare a `Directive` sub-primitive to
144
144
 
145
145
  ```tsx
146
146
  import { ComposerPrimitive } from "@assistant-ui/react";
147
- import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
147
+ import { unstable_defaultDirectiveFormatter } from "@assistant-ui/react";
148
148
 
149
149
  <ComposerPrimitive.Unstable_TriggerPopoverRoot>
150
150
  <ComposerPrimitive.Root>
@@ -198,7 +198,7 @@ import { unstable_useMentionAdapter } from "@assistant-ui/react";
198
198
 
199
199
  const mention = unstable_useMentionAdapter();
200
200
  // → { adapter, directive } — spread into <ComposerTriggerPopover {...mention} />
201
- // Default: single "Tools" category reading from useAssistantTool registrations
201
+ // Default: single "Tools" category reading from toolkit registrations
202
202
  ```
203
203
 
204
204
  **Custom items only (no tools):**
@@ -302,7 +302,7 @@ When `id` equals `label`, the `{name=…}` attribute is omitted for brevity:
302
302
  Implement `Unstable_DirectiveFormatter` to use a different format:
303
303
 
304
304
  ```ts
305
- import type { Unstable_DirectiveFormatter } from "@assistant-ui/core";
305
+ import type { Unstable_DirectiveFormatter } from "@assistant-ui/react";
306
306
 
307
307
  const slashFormatter: Unstable_DirectiveFormatter = {
308
308
  serialize(item) {
@@ -516,5 +516,5 @@ Mentions and slash commands coexist on the same composer. See [Combining Slash C
516
516
  - [ComposerTriggerPopover UI Component](/docs/ui/composer-trigger-popover) — pre-built shadcn component
517
517
  - [DirectiveText UI Component](/docs/ui/directive-text) — renders mention chips in user messages
518
518
  - [Slash Commands Guide](/docs/guides/slash-commands) — `/` command system built on the same architecture
519
- - [Tools Guide](/docs/guides/tools) — register tools that appear in the mention picker
519
+ - [Tools Guide](/docs/tools/defining-tools) — register tools that appear in the mention picker
520
520
  - [Composer Primitives](/docs/primitives/composer) — underlying composer primitives
@@ -24,7 +24,7 @@ By default `Action` leaves a directive chip in the composer — giving the user
24
24
 
25
25
  ### 1. Define Commands with `unstable_useSlashCommandAdapter`
26
26
 
27
- Declare commands (data + `execute` bundled together, like `useAssistantTool`). The hook returns `{ adapter, action }` — wire both into a single `<TriggerPopover>`:
27
+ Declare commands (data + `execute` bundled together, like a toolkit entry). The hook returns `{ adapter, action }` — wire both into a single `<TriggerPopover>`:
28
28
 
29
29
  ```tsx
30
30
  import {
@@ -308,5 +308,5 @@ The new API provides:
308
308
  ## Related
309
309
 
310
310
  - [Thread Component](/docs/ui/thread) - Main chat interface
311
- - [Tools Guide](/docs/guides/tools) - Configure assistant actions
311
+ - [Tools Guide](/docs/tools/defining-tools) - Configure assistant actions
312
312
  - [Context API](/docs/guides/context-api) - Access assistant state