@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.
- package/.docs/organized/code-examples/waterfall.md +20 -22
- package/.docs/organized/code-examples/with-a2a.md +24 -24
- package/.docs/organized/code-examples/with-ag-ui.md +30 -25
- package/.docs/organized/code-examples/with-ai-sdk-v6.md +11 -9
- package/.docs/organized/code-examples/with-artifacts.md +49 -37
- package/.docs/organized/code-examples/with-assistant-transport.md +63 -51
- package/.docs/organized/code-examples/with-browser-extension.md +22 -10
- package/.docs/organized/code-examples/with-chain-of-thought.md +406 -87
- package/.docs/organized/code-examples/with-cloud-standalone.md +25 -24
- package/.docs/organized/code-examples/with-cloud.md +11 -9
- package/.docs/organized/code-examples/with-custom-thread-list.md +14 -12
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +23 -21
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +14 -13
- package/.docs/organized/code-examples/with-expo.md +44 -29
- package/.docs/organized/code-examples/with-external-store.md +9 -7
- package/.docs/organized/code-examples/with-ffmpeg.md +322 -285
- package/.docs/organized/code-examples/with-generative-ui.md +1066 -256
- package/.docs/organized/code-examples/with-google-adk.md +10 -8
- package/.docs/organized/code-examples/with-heat-graph.md +13 -11
- package/.docs/organized/code-examples/with-image-generation.md +19 -17
- package/.docs/organized/code-examples/with-interactables.md +317 -239
- package/.docs/organized/code-examples/with-langchain.md +14 -12
- package/.docs/organized/code-examples/with-langgraph.md +91 -83
- package/.docs/organized/code-examples/with-livekit.md +24 -22
- package/.docs/organized/code-examples/with-mcp.md +18 -12
- package/.docs/organized/code-examples/with-opencode.md +66 -66
- package/.docs/organized/code-examples/with-react-hook-form.md +19 -17
- package/.docs/organized/code-examples/with-react-ink.md +297 -102
- package/.docs/organized/code-examples/with-react-router.md +17 -15
- package/.docs/organized/code-examples/with-resumable-stream.md +15 -14
- package/.docs/organized/code-examples/with-store.md +78 -76
- package/.docs/organized/code-examples/with-tanstack.md +13 -14
- package/.docs/organized/code-examples/with-tap-runtime.md +26 -24
- package/.docs/raw/docs/(docs)/architecture.mdx +94 -42
- package/.docs/raw/docs/(docs)/cli.mdx +1 -2
- package/.docs/raw/docs/(docs)/installation.mdx +1 -1
- package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +5 -1
- package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +15 -15
- package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +14 -1
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +18 -0
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +33 -0
- package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +45 -0
- package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +41 -41
- package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +19 -1
- package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +122 -122
- package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +43 -2
- package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +6 -0
- package/.docs/raw/docs/(reference)/api-reference/overview.mdx +4 -6
- package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +30 -0
- package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +20 -3
- package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +8 -8
- package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +52 -4
- package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +100 -10
- package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +7 -59
- package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -2
- package/.docs/raw/docs/{(docs)/copilots → copilots}/model-context.mdx +34 -26
- package/.docs/raw/docs/{(docs)/copilots → copilots}/motivation.mdx +32 -26
- package/.docs/raw/docs/guides/chain-of-thought.mdx +7 -9
- package/.docs/raw/docs/guides/context-api.mdx +2 -1
- package/.docs/raw/docs/guides/index.mdx +3 -12
- package/.docs/raw/docs/guides/mentions.mdx +4 -4
- package/.docs/raw/docs/guides/slash-commands.mdx +1 -1
- package/.docs/raw/docs/guides/suggestions.mdx +1 -1
- package/.docs/raw/docs/ink/adapters.mdx +23 -1
- package/.docs/raw/docs/ink/hooks.mdx +101 -85
- package/.docs/raw/docs/ink/migration.mdx +1 -1
- package/.docs/raw/docs/ink/primitives.mdx +2 -2
- package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +1 -1
- package/.docs/raw/docs/integrations/index.mdx +2 -2
- package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +17 -2
- package/.docs/raw/docs/migrations/toolkit-tools.mdx +232 -0
- package/.docs/raw/docs/primitives/chain-of-thought.mdx +10 -16
- package/.docs/raw/docs/primitives/message.mdx +9 -10
- package/.docs/raw/docs/react-native/hooks.mdx +62 -79
- package/.docs/raw/docs/react-native/migration.mdx +1 -1
- package/.docs/raw/docs/react-native/primitives.mdx +2 -2
- package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +3 -0
- package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +41 -0
- package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +122 -1
- package/.docs/raw/docs/runtimes/concepts/architecture.mdx +46 -4
- package/.docs/raw/docs/runtimes/concepts/threads.mdx +7 -1
- package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +54 -12
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +62 -4
- package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +30 -7
- package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +108 -38
- package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +2 -2
- package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +14 -1
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +64 -50
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +98 -86
- package/.docs/raw/docs/tools/backend.mdx +144 -0
- package/.docs/raw/docs/tools/defining-tools.mdx +538 -0
- package/.docs/raw/docs/tools/dynamic-tools.mdx +110 -0
- package/.docs/raw/docs/tools/generative-ui.mdx +214 -0
- package/.docs/raw/docs/tools/index.mdx +71 -0
- package/.docs/raw/docs/{guides → tools}/interactables.mdx +1 -1
- package/.docs/raw/docs/{integrations/tools → tools}/mcp.mdx +145 -50
- package/.docs/raw/docs/{guides → tools}/multi-agent.mdx +15 -17
- package/.docs/raw/docs/tools/tool-ui.mdx +967 -0
- package/.docs/raw/docs/{integrations/tools/react-mcp.mdx → tools/user-managed-mcp.mdx} +7 -7
- package/.docs/raw/docs/ui/directive-text.mdx +3 -3
- package/.docs/raw/docs/ui/mcp-config.mdx +4 -4
- package/.docs/raw/docs/ui/mermaid.mdx +16 -9
- package/.docs/raw/docs/ui/part-grouping.mdx +84 -50
- package/.docs/raw/docs/ui/reasoning.mdx +4 -5
- package/.docs/raw/docs/ui/tool-fallback.mdx +16 -0
- package/.docs/raw/docs/ui/tool-group.mdx +5 -6
- package/.docs/raw/docs/utilities/heat-graph.mdx +1 -1
- package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
- package/dist/constants.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/prepare-docs/code-examples.d.ts.map +1 -1
- package/dist/prepare-docs/code-examples.js.map +1 -1
- package/dist/prepare-docs/copy-raw.d.ts.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.d.ts.map +1 -1
- package/dist/utils/paths.js.map +1 -1
- package/package.json +5 -5
- package/.docs/organized/code-examples/with-parent-id-grouping.md +0 -596
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +0 -151
- package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +0 -230
- package/.docs/raw/docs/guides/generative-ui.mdx +0 -142
- package/.docs/raw/docs/guides/tool-ui.mdx +0 -858
- package/.docs/raw/docs/guides/tools.mdx +0 -736
- /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}/use-assistant-instructions.mdx +0 -0
- /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 [
|
|
75
|
-
|
|
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
|
|
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)
|
|
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
|
|
53
|
-
|
|
54
|
-
browser and require
|
|
55
|
-
tools execute server-side and may omit a renderer.
|
|
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
|
-
}
|
|
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,
|
|
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
|
-
###
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
|
|
56
|
-
does not reference an assistant-ui MCP app resource.
|
|
31
|
+
### DevToolsHooks
|
|
57
32
|
|
|
58
|
-
<ParametersTable {...
|
|
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
|
-
|
|
45
|
-
|
|
68
|
+
Tools,
|
|
69
|
+
useAui,
|
|
46
70
|
} from "@assistant-ui/react";
|
|
47
|
-
import
|
|
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
|
-
<
|
|
83
|
+
<AuiProvider value={aui}>
|
|
75
84
|
<form>{/* form fields */}</form>
|
|
76
|
-
|
|
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
|
|
138
|
-
- Prefer
|
|
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
|
|
101
|
+
### 3. Creating Tools
|
|
102
102
|
|
|
103
103
|
Let's add transaction-specific tools for the assistant:
|
|
104
104
|
|
|
105
|
-
```tsx
|
|
106
|
-
|
|
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
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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
|
-
|
|
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
|
-
- [
|
|
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={(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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/
|
|
166
|
-
- [Tools](/docs/
|
|
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()`
|
|
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
|
-
|
|
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/
|
|
56
|
-
Define
|
|
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/
|
|
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
|
|
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/
|
|
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/
|
|
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
|
|
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/
|
|
311
|
+
- [Tools Guide](/docs/tools/defining-tools) - Configure assistant actions
|
|
312
312
|
- [Context API](/docs/guides/context-api) - Access assistant state
|