@assistant-ui/mcp-docs-server 0.1.24 → 0.1.25

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 (135) hide show
  1. package/.docs/organized/code-examples/waterfall.md +4 -2
  2. package/.docs/organized/code-examples/with-a2a.md +676 -0
  3. package/.docs/organized/code-examples/with-ag-ui.md +5 -6
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +27 -15
  5. package/.docs/organized/code-examples/with-artifacts.md +4 -4
  6. package/.docs/organized/code-examples/with-assistant-transport.md +2 -2
  7. package/.docs/organized/code-examples/with-chain-of-thought.md +33 -25
  8. package/.docs/organized/code-examples/with-cloud-standalone.md +9 -6
  9. package/.docs/organized/code-examples/with-cloud.md +4 -4
  10. package/.docs/organized/code-examples/with-custom-thread-list.md +6 -6
  11. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +7 -7
  12. package/.docs/organized/code-examples/with-expo.md +565 -514
  13. package/.docs/organized/code-examples/with-external-store.md +2 -2
  14. package/.docs/organized/code-examples/with-ffmpeg.md +4 -4
  15. package/.docs/organized/code-examples/with-google-adk.md +353 -0
  16. package/.docs/organized/code-examples/with-heat-graph.md +304 -0
  17. package/.docs/organized/code-examples/with-langgraph.md +24 -22
  18. package/.docs/organized/code-examples/with-parent-id-grouping.md +3 -3
  19. package/.docs/organized/code-examples/with-react-hook-form.md +4 -4
  20. package/.docs/organized/code-examples/with-react-ink.md +265 -0
  21. package/.docs/organized/code-examples/with-react-router.md +5 -5
  22. package/.docs/organized/code-examples/with-store.md +28 -17
  23. package/.docs/organized/code-examples/with-tanstack.md +7 -7
  24. package/.docs/organized/code-examples/with-tap-runtime.md +5 -3
  25. package/.docs/raw/blog/2025-01-31-changelog/index.mdx +1 -1
  26. package/.docs/raw/blog/2026-03-launch-week/index.mdx +227 -0
  27. package/.docs/raw/docs/(docs)/architecture.mdx +1 -1
  28. package/.docs/raw/docs/(docs)/cli.mdx +14 -9
  29. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +8 -3
  30. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +5 -1
  31. package/.docs/raw/docs/(docs)/copilots/{make-assistant-readable.mdx → make-assistant-visible.mdx} +14 -5
  32. package/.docs/raw/docs/(docs)/copilots/model-context.mdx +11 -11
  33. package/.docs/raw/docs/(docs)/copilots/motivation.mdx +2 -2
  34. package/.docs/raw/docs/(docs)/devtools.mdx +3 -2
  35. package/.docs/raw/docs/(docs)/guides/attachments.mdx +9 -11
  36. package/.docs/raw/docs/(docs)/guides/branching.mdx +11 -6
  37. package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +18 -16
  38. package/.docs/raw/docs/(docs)/guides/context-api.mdx +81 -43
  39. package/.docs/raw/docs/(docs)/guides/dictation.mdx +5 -5
  40. package/.docs/raw/docs/(docs)/guides/editing.mdx +16 -7
  41. package/.docs/raw/docs/(docs)/guides/latex.mdx +3 -0
  42. package/.docs/raw/docs/(docs)/guides/message-timing.mdx +2 -1
  43. package/.docs/raw/docs/(docs)/guides/multi-agent.mdx +173 -0
  44. package/.docs/raw/docs/(docs)/guides/quoting.mdx +55 -206
  45. package/.docs/raw/docs/(docs)/guides/speech.mdx +1 -4
  46. package/.docs/raw/docs/(docs)/guides/suggestions.mdx +9 -15
  47. package/.docs/raw/docs/(docs)/guides/tool-ui.mdx +17 -7
  48. package/.docs/raw/docs/(docs)/guides/tools.mdx +24 -9
  49. package/.docs/raw/docs/(docs)/index.mdx +3 -3
  50. package/.docs/raw/docs/(docs)/installation.mdx +69 -46
  51. package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx +20 -6
  52. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +24 -4
  53. package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx +1 -1
  54. package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx +20 -19
  55. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +28 -53
  56. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +4 -4
  57. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +7 -1
  58. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +20 -14
  59. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +1 -1
  60. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +99 -45
  61. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +52 -40
  62. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +343 -23
  63. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +4 -6
  64. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +4 -2
  65. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +3 -5
  66. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +169 -22
  67. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +14 -4
  68. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +15 -26
  69. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +39 -21
  70. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +33 -9
  71. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +48 -21
  72. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +36 -7
  73. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +30 -10
  74. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +12 -10
  75. package/.docs/raw/docs/(reference)/migrations/deprecation-policy.mdx +1 -1
  76. package/.docs/raw/docs/(reference)/migrations/react-langgraph-v0-7.mdx +9 -4
  77. package/.docs/raw/docs/(reference)/migrations/v0-11.mdx +7 -5
  78. package/.docs/raw/docs/(reference)/migrations/v0-12.mdx +9 -7
  79. package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +159 -0
  80. package/.docs/raw/docs/(reference)/react-compatibility.mdx +5 -134
  81. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +84 -6
  82. package/.docs/raw/docs/cloud/ai-sdk.mdx +14 -4
  83. package/.docs/raw/docs/cloud/langgraph.mdx +13 -3
  84. package/.docs/raw/docs/ink/adapters.mdx +41 -0
  85. package/.docs/raw/docs/ink/custom-backend.mdx +203 -0
  86. package/.docs/raw/docs/ink/hooks.mdx +448 -0
  87. package/.docs/raw/docs/ink/index.mdx +239 -0
  88. package/.docs/raw/docs/ink/migration.mdx +140 -0
  89. package/.docs/raw/docs/ink/primitives.mdx +699 -0
  90. package/.docs/raw/docs/react-native/adapters.mdx +63 -87
  91. package/.docs/raw/docs/react-native/custom-backend.mdx +11 -14
  92. package/.docs/raw/docs/react-native/hooks.mdx +214 -232
  93. package/.docs/raw/docs/react-native/index.mdx +118 -159
  94. package/.docs/raw/docs/react-native/migration.mdx +144 -0
  95. package/.docs/raw/docs/react-native/primitives.mdx +431 -302
  96. package/.docs/raw/docs/runtimes/a2a/index.mdx +294 -0
  97. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +9 -9
  98. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +14 -3
  99. package/.docs/raw/docs/runtimes/assistant-transport.mdx +59 -25
  100. package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +13 -6
  101. package/.docs/raw/docs/runtimes/custom/external-store.mdx +138 -38
  102. package/.docs/raw/docs/runtimes/custom/local.mdx +184 -42
  103. package/.docs/raw/docs/runtimes/data-stream.mdx +92 -19
  104. package/.docs/raw/docs/runtimes/google-adk/index.mdx +624 -0
  105. package/.docs/raw/docs/runtimes/helicone.mdx +6 -6
  106. package/.docs/raw/docs/runtimes/langgraph/index.mdx +38 -27
  107. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +1 -1
  108. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +15 -20
  109. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +7 -11
  110. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +8 -11
  111. package/.docs/raw/docs/runtimes/langserve.mdx +6 -7
  112. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +18 -3
  113. package/.docs/raw/docs/ui/file.mdx +5 -4
  114. package/.docs/raw/docs/ui/image.mdx +5 -4
  115. package/.docs/raw/docs/ui/markdown.mdx +3 -1
  116. package/.docs/raw/docs/ui/model-selector.mdx +8 -8
  117. package/.docs/raw/docs/ui/part-grouping.mdx +7 -10
  118. package/.docs/raw/docs/ui/quote.mdx +210 -0
  119. package/.docs/raw/docs/ui/reasoning.mdx +12 -11
  120. package/.docs/raw/docs/ui/sources.mdx +88 -17
  121. package/.docs/raw/docs/ui/streamdown.mdx +16 -7
  122. package/.docs/raw/docs/ui/thread-list.mdx +11 -13
  123. package/.docs/raw/docs/ui/thread.mdx +28 -33
  124. package/.docs/raw/docs/ui/tool-fallback.mdx +5 -6
  125. package/.docs/raw/docs/ui/tool-group.mdx +9 -8
  126. package/.docs/raw/docs/utilities/heat-graph.mdx +236 -0
  127. package/.docs/raw/docs/utilities/tw-shimmer.mdx +211 -0
  128. package/package.json +4 -4
  129. package/.docs/raw/docs/(reference)/legacy/styled/assistant-modal.mdx +0 -77
  130. package/.docs/raw/docs/(reference)/legacy/styled/decomposition.mdx +0 -635
  131. package/.docs/raw/docs/(reference)/legacy/styled/markdown.mdx +0 -77
  132. package/.docs/raw/docs/(reference)/legacy/styled/scrollbar.mdx +0 -72
  133. package/.docs/raw/docs/(reference)/legacy/styled/thread-width.mdx +0 -22
  134. package/.docs/raw/docs/(reference)/legacy/styled/thread.mdx +0 -77
  135. /package/.docs/raw/docs/cloud/{overview.mdx → index.mdx} +0 -0
@@ -96,9 +96,9 @@ const MyWeatherToolUI = makeAssistantToolUI({
96
96
  <pre className="whitespace-pre-wrap break-all text-center">
97
97
  get_weather({JSON.stringify(args)})
98
98
  </pre>
99
- {"result" in result && (
99
+ {result !== undefined && (
100
100
  <pre className="whitespace-pre-wrap break-all text-center">
101
- {JSON.stringify(result.result)}
101
+ {JSON.stringify(result)}
102
102
  </pre>
103
103
  )}
104
104
  </div>
@@ -116,18 +116,13 @@ You can map data events to UI components, similar to tool UIs. There are two app
116
116
  Pass a `data` config to `MessagePrimitive.Parts`:
117
117
 
118
118
  ```tsx
119
- <MessagePrimitive.Parts
120
- components={{
121
- data: {
122
- by_name: {
123
- my_chart: ({ name, data }) => <ChartComponent data={data} />,
124
- },
125
- Fallback: ({ name, data }) => (
126
- <pre>{JSON.stringify(data, null, 2)}</pre>
127
- ),
128
- },
119
+ <MessagePrimitive.Parts>
120
+ {({ part }) => {
121
+ if (part.type === "data" && part.name === "my_chart") return <ChartComponent data={part.data} />;
122
+ if (part.type === "data") return <pre>{JSON.stringify(part.data, null, 2)}</pre>;
123
+ return null;
129
124
  }}
130
- />
125
+ </MessagePrimitive.Parts>
131
126
  ```
132
127
 
133
128
  #### Global registration
@@ -169,6 +164,27 @@ function MyComponent() {
169
164
 
170
165
  Each data component receives the full data part as props: `{ type: "data", name: string, data: T, status: MessagePartStatus }`.
171
166
 
167
+ ### Messages (Sub-Agent)
168
+
169
+ Renders nested messages from a tool call part's `messages` field. This is used in multi-agent setups where a sub-agent's conversation is embedded inside a tool call.
170
+
171
+ ```tsx
172
+ import { MessagePartPrimitive } from "@assistant-ui/react";
173
+
174
+ <MessagePartPrimitive.Messages>
175
+ {({ message }) => {
176
+ if (message.role === "user") return <MyUserMessage />;
177
+ return <MyAssistantMessage />;
178
+ }}
179
+ </MessagePartPrimitive.Messages>;
180
+ ```
181
+
182
+ This primitive must be used inside a tool call part context (e.g. inside a `makeAssistantToolUI` render function). It reads the `messages` field from the current `ToolCallMessagePart` and renders them in a readonly thread context.
183
+
184
+ Parent tool UI registrations are inherited — tools registered via `makeAssistantToolUI` at the parent level are available inside sub-agent messages.
185
+
186
+ See the [Multi-Agent Guide](/docs/guides/multi-agent) for detailed usage.
187
+
172
188
  ## Context Provider
173
189
 
174
190
  Message part context is provided by `MessagePrimitive.Parts` or `TextMessagePartProvider`
@@ -178,57 +194,53 @@ Message part context is provided by `MessagePrimitive.Parts` or `TextMessagePart
178
194
  ```tsx
179
195
  import { MessagePrimitive } from "@assistant-ui/react";
180
196
 
181
- <MessagePrimitive.Parts
182
- components={{
183
- Text: MyText,
184
- Reasoning: MyReasoning,
185
- Audio: MyAudio,
186
- tools: {
187
- by_name: {
188
- get_weather: MyWeatherToolUI,
189
- },
190
- Fallback: MyFallbackToolUI,
191
- },
192
- data: {
193
- by_name: {
194
- my_chart: MyChartComponent,
195
- },
196
- Fallback: GenericDataComponent,
197
- },
197
+ <MessagePrimitive.Parts>
198
+ {({ part }) => {
199
+ if (part.type === "text") return <MyText />;
200
+ if (part.type === "reasoning") return <MyReasoning {...part} />;
201
+ if (part.type === "audio") return <MyAudio {...part} />;
202
+ if (part.type === "tool-call" && part.toolName === "get_weather") return <MyWeatherToolUI {...part} />;
203
+ if (part.type === "tool-call") return <MyFallbackToolUI {...part} />;
204
+ if (part.type === "data" && part.name === "my_chart") return <MyChartComponent {...part} />;
205
+ if (part.type === "data") return <GenericDataComponent {...part} />;
206
+ return null;
198
207
  }}
199
- />;
208
+ </MessagePrimitive.Parts>;
200
209
  ```
201
210
 
202
211
  ### TextMessagePartProvider
203
212
 
204
- This is a helper context provider to allow you to reuse the message part components outside a message message part.
213
+ This is a helper context provider to allow you to reuse the message part components outside a message part.
205
214
 
206
215
  ```tsx
207
216
  import { TextMessagePartProvider } from "@assistant-ui/react";
208
217
 
209
218
  <TextMessagePartProvider text="Hello world" isRunning={false}>
210
- <MessagePart.Text />
219
+ <MessagePartPrimitive.Text />
211
220
  </TextMessagePartProvider>;
212
221
  ```
213
222
 
214
223
  ## Runtime API
215
224
 
216
- ### `useMessagePartRuntime`
225
+ ### `useAui` (Message Part Actions)
217
226
 
218
227
  ```tsx
219
- import { useMessagePartRuntime } from "@assistant-ui/react";
228
+ import { useAui } from "@assistant-ui/react";
220
229
 
221
- const MessagePartRuntime = useMessagePartRuntime();
230
+ const aui = useAui();
231
+ aui.part().addToolResult(result);
232
+ const partState = aui.part().getState();
222
233
  ```
223
234
 
224
235
  <ParametersTable {...MessagePartRuntime} />
225
236
 
226
- ### `useMessagePart`
237
+ ### `useAuiState` (Message Part State)
227
238
 
228
239
  ```tsx
229
- import { useMessagePart } from "@assistant-ui/react";
240
+ import { useAuiState } from "@assistant-ui/react";
230
241
 
231
- const MessagePart = useMessagePart();
242
+ const type = useAuiState((s) => s.part.type);
243
+ const status = useAuiState((s) => s.part.status);
232
244
  ```
233
245
 
234
246
  <ParametersTable {...TextMessagePartState} />
@@ -240,7 +252,7 @@ const MessagePart = useMessagePart();
240
252
  ```tsx
241
253
  import { useMessagePartText } from "@assistant-ui/react";
242
254
 
243
- const MessagePartText = useMessagePartText();
255
+ const { text, status } = useMessagePartText();
244
256
  ```
245
257
 
246
258
  <ParametersTable {...TextMessagePartState} />
@@ -32,7 +32,7 @@ const AssistantMessage = () => (
32
32
 
33
33
  ### Root
34
34
 
35
- Containts all parts of the message.
35
+ Contains all parts of the message.
36
36
 
37
37
  This primitive renders a `<div>` element unless `asChild` is set.
38
38
 
@@ -47,69 +47,105 @@ This primitive renders a `<div>` element unless `asChild` is set.
47
47
 
48
48
  ### Parts
49
49
 
50
- The content of the message. This renders a separate component for each content part of the message.
50
+ The content of the message. This renders a separate component for each message part.
51
51
 
52
52
  <ParametersTable
53
- type="MessagePrimitiveContentProps"
53
+ type="MessagePrimitivePartsProps"
54
54
  parameters={[
55
55
  {
56
56
  name: "components",
57
57
  required: false,
58
- type: "ContentPartComponents",
59
- description: "The components to render for each content part.",
58
+ type: "MessagePartComponents",
59
+ description: "The components to render for each message part.",
60
60
  children: [
61
61
  {
62
- type: "ContentPartComponents",
62
+ type: "MessagePartComponents",
63
63
  parameters: [
64
64
  {
65
65
  name: "Text",
66
- type: "TextContentPartComponent",
66
+ type: "TextMessagePartComponent",
67
67
  description:
68
- "The component to render for each text content part.",
68
+ "The component to render for each text message part.",
69
69
  },
70
70
  {
71
71
  name: "Image",
72
- type: "ImageContentPartComponent",
72
+ type: "ImageMessagePartComponent",
73
73
  description:
74
- "The component to render for each image content part.",
74
+ "The component to render for each image message part.",
75
75
  },
76
76
  {
77
77
  name: "Source",
78
- type: "SourceContentPartComponent",
78
+ type: "SourceMessagePartComponent",
79
79
  description:
80
- "The component to render for each source content part.",
80
+ "The component to render for each source message part.",
81
81
  },
82
82
  {
83
83
  name: "File",
84
- type: "FileContentPartComponent",
84
+ type: "FileMessagePartComponent",
85
85
  description:
86
- "The component to render for each file content part.",
86
+ "The component to render for each file message part.",
87
87
  },
88
88
  {
89
89
  name: "Unstable_Audio",
90
- type: "Unstable_AudioContentPartComponent",
90
+ type: "Unstable_AudioMessagePartComponent",
91
91
  description:
92
- "The component to render for each audio content part.",
92
+ "The component to render for each audio message part.",
93
+ },
94
+ {
95
+ name: "Reasoning",
96
+ type: "ReasoningMessagePartComponent",
97
+ description:
98
+ "The component to render for each reasoning message part. Cannot be used alongside ChainOfThought.",
93
99
  },
94
100
  {
95
101
  name: "tools",
96
102
  type: "object",
97
103
  description:
98
- "The component to render for each tool call content part.",
104
+ "Configuration for tool call rendering. Cannot be used alongside ChainOfThought.",
99
105
  children: [
100
106
  {
101
107
  parameters: [
102
108
  {
103
109
  name: "by_name",
104
- type: "Record<string, ToolCallContentPartComponent>",
110
+ type: "Record<string, ToolCallMessagePartComponent>",
105
111
  description:
106
- "The components to render for each tool call content part.",
112
+ "Map of tool names to their specific components.",
107
113
  },
108
114
  {
109
115
  name: "Fallback",
110
- type: "ToolCallContentPartComponent",
116
+ type: "ToolCallMessagePartComponent",
111
117
  description:
112
- "The fallback component to render for tool call content parts.",
118
+ "Fallback component for tool calls not matched by by_name.",
119
+ },
120
+ {
121
+ name: "Override",
122
+ type: "ComponentType<ToolCallMessagePartProps>",
123
+ description:
124
+ "Override component that handles all tool calls. When set, by_name and Fallback are ignored.",
125
+ },
126
+ ],
127
+ },
128
+ ],
129
+ },
130
+ {
131
+ name: "data",
132
+ type: "object",
133
+ description:
134
+ "Configuration for data part rendering.",
135
+ children: [
136
+ {
137
+ parameters: [
138
+ {
139
+ name: "by_name",
140
+ type: "Record<string, DataMessagePartComponent>",
141
+ description:
142
+ "Map of data event names to their specific components.",
143
+ },
144
+ {
145
+ name: "Fallback",
146
+ type: "DataMessagePartComponent",
147
+ description:
148
+ "Fallback component for data events not matched by by_name.",
113
149
  },
114
150
  ],
115
151
  },
@@ -119,7 +155,7 @@ The content of the message. This renders a separate component for each content p
119
155
  name: "ToolGroup",
120
156
  type: "ComponentType<PropsWithChildren<{ startIndex: number; endIndex: number }>>",
121
157
  description:
122
- "Component for rendering grouped consecutive tool calls. When provided, consecutive tool-call content parts will be automatically grouped and wrapped with this component.",
158
+ "Deprecated: This feature is still experimental and subject to change. Component for rendering grouped consecutive tool calls. When provided, consecutive tool-call message parts will be automatically grouped and wrapped with this component. Cannot be used alongside ChainOfThought.",
123
159
  children: [
124
160
  {
125
161
  type: "ToolGroupProps",
@@ -147,10 +183,83 @@ The content of the message. This renders a separate component for each content p
147
183
  },
148
184
  ],
149
185
  },
186
+ {
187
+ name: "ReasoningGroup",
188
+ type: "ReasoningGroupComponent",
189
+ description:
190
+ "Component for rendering grouped consecutive reasoning parts. Cannot be used alongside ChainOfThought.",
191
+ children: [
192
+ {
193
+ type: "ReasoningGroupProps",
194
+ parameters: [
195
+ {
196
+ name: "startIndex",
197
+ type: "number",
198
+ description: "Index of the first reasoning part in the group.",
199
+ required: true,
200
+ },
201
+ {
202
+ name: "endIndex",
203
+ type: "number",
204
+ description: "Index of the last reasoning part in the group.",
205
+ required: true,
206
+ },
207
+ {
208
+ name: "children",
209
+ type: "ReactNode",
210
+ description:
211
+ "The rendered reasoning part components within the group.",
212
+ required: true,
213
+ },
214
+ ],
215
+ },
216
+ ],
217
+ },
218
+ {
219
+ name: "ChainOfThought",
220
+ type: "ComponentType",
221
+ description:
222
+ "When set, groups all consecutive reasoning and tool-call parts into a single collapsible component. Mutually exclusive with Reasoning, tools, ToolGroup, and ReasoningGroup.",
223
+ },
224
+ {
225
+ name: "Empty",
226
+ type: "EmptyMessagePartComponent",
227
+ description:
228
+ "Component to render when the message has no parts, or when unstable_showEmptyOnNonTextEnd is enabled and the last part is not text or reasoning.",
229
+ },
150
230
  ],
151
231
  },
152
232
  ],
153
233
  },
234
+ {
235
+ name: "unstable_showEmptyOnNonTextEnd",
236
+ required: false,
237
+ type: "boolean",
238
+ description:
239
+ "When enabled, shows the Empty component if the last part in the message is anything other than Text or Reasoning. Defaults to true.",
240
+ },
241
+ ]}
242
+ />
243
+
244
+ ### Quote
245
+
246
+ Renders a quote block if the message has quote metadata (`message.metadata.custom.quote`). Place this above `MessagePrimitive.Parts`.
247
+
248
+ ```tsx
249
+ <MessagePrimitive.Quote>
250
+ {({ text, messageId }) => <QuoteBlock text={text} messageId={messageId} />}
251
+ </MessagePrimitive.Quote>
252
+ ```
253
+
254
+ <ParametersTable
255
+ type="MessagePrimitiveQuoteProps"
256
+ parameters={[
257
+ {
258
+ name: "children",
259
+ required: true,
260
+ type: "(quote: QuoteInfo) => ReactNode",
261
+ description: "Render function called when a quote is present. Receives { text, messageId }.",
262
+ },
154
263
  ]}
155
264
  />
156
265
 
@@ -180,7 +289,7 @@ Renders a single message part at the specified index.
180
289
  {
181
290
  name: "components",
182
291
  required: false,
183
- type: "ContentPartComponents",
292
+ type: "MessagePartComponents",
184
293
  description: "The components to render for the message part.",
185
294
  },
186
295
  ]}
@@ -291,6 +400,217 @@ type QuoteInfo = {
291
400
  See the [Quoting guide](/docs/guides/quoting) for a complete walkthrough.
292
401
  </Callout>
293
402
 
403
+ ### Unstable_PartsGrouped
404
+
405
+ Renders the parts of a message grouped by a custom grouping function. Use this component when you need to visually group related message parts together — for example, grouping parts that share a common parent ID, or collecting consecutive tool calls under a single header.
406
+
407
+ The `groupingFunction` prop controls how parts are grouped. It receives the full array of message parts and must return an array of group descriptors, each with a `groupKey` (or `undefined` for ungrouped parts) and an array of `indices` into the message parts array. The optional `components.Group` component is then rendered once per group and receives the `groupKey`, `indices`, and the rendered part children.
408
+
409
+ <Callout type="warn">
410
+ This API is unstable and may change in a future release.
411
+ </Callout>
412
+
413
+ ```tsx
414
+ <MessagePrimitive.Unstable_PartsGrouped
415
+ groupingFunction={(parts) => {
416
+ const groups = new Map<string, number[]>();
417
+ parts.forEach((part, i) => {
418
+ const key = part.parentId ?? `__ungrouped_${i}`;
419
+ const indices = groups.get(key) ?? [];
420
+ indices.push(i);
421
+ groups.set(key, indices);
422
+ });
423
+ return Array.from(groups.entries()).map(([key, indices]) => ({
424
+ groupKey: key.startsWith("__ungrouped_") ? undefined : key,
425
+ indices,
426
+ }));
427
+ }}
428
+ components={{
429
+ Text: ({ text }) => <p>{text}</p>,
430
+ Group: ({ groupKey, indices, children }) => {
431
+ if (!groupKey) return <>{children}</>;
432
+ return (
433
+ <div className="parent-group">
434
+ <h4>Parent: {groupKey}</h4>
435
+ {children}
436
+ </div>
437
+ );
438
+ },
439
+ }}
440
+ />
441
+ ```
442
+
443
+ <ParametersTable
444
+ type="MessagePrimitive.Unstable_PartsGrouped.Props"
445
+ parameters={[
446
+ {
447
+ name: "groupingFunction",
448
+ required: true,
449
+ type: "GroupingFunction",
450
+ description:
451
+ "A function that receives the array of message parts and returns an array of groups. Each group has a groupKey (string or undefined for ungrouped parts) and an indices array of part positions.",
452
+ },
453
+ {
454
+ name: "components",
455
+ required: false,
456
+ type: "object",
457
+ description: "The components to render for each message part type and for group wrappers.",
458
+ children: [
459
+ {
460
+ parameters: [
461
+ {
462
+ name: "Text",
463
+ type: "TextMessagePartComponent",
464
+ description: "The component to render for each text message part.",
465
+ },
466
+ {
467
+ name: "Reasoning",
468
+ type: "ReasoningMessagePartComponent",
469
+ description: "The component to render for each reasoning message part.",
470
+ },
471
+ {
472
+ name: "Source",
473
+ type: "SourceMessagePartComponent",
474
+ description: "The component to render for each source message part.",
475
+ },
476
+ {
477
+ name: "Image",
478
+ type: "ImageMessagePartComponent",
479
+ description: "The component to render for each image message part.",
480
+ },
481
+ {
482
+ name: "File",
483
+ type: "FileMessagePartComponent",
484
+ description: "The component to render for each file message part.",
485
+ },
486
+ {
487
+ name: "Unstable_Audio",
488
+ type: "Unstable_AudioMessagePartComponent",
489
+ description: "The component to render for each audio message part.",
490
+ },
491
+ {
492
+ name: "Empty",
493
+ type: "EmptyMessagePartComponent",
494
+ description: "Component to render when the message has no parts.",
495
+ },
496
+ {
497
+ name: "tools",
498
+ type: "object",
499
+ description: "Configuration for tool call rendering.",
500
+ children: [
501
+ {
502
+ parameters: [
503
+ {
504
+ name: "by_name",
505
+ type: "Record<string, ToolCallMessagePartComponent>",
506
+ description: "Map of tool names to their specific components.",
507
+ },
508
+ {
509
+ name: "Fallback",
510
+ type: "ToolCallMessagePartComponent",
511
+ description:
512
+ "Fallback component for tool calls not matched by by_name.",
513
+ },
514
+ {
515
+ name: "Override",
516
+ type: "ComponentType<ToolCallMessagePartProps>",
517
+ description:
518
+ "Override component that handles all tool calls. When set, by_name and Fallback are ignored.",
519
+ },
520
+ ],
521
+ },
522
+ ],
523
+ },
524
+ {
525
+ name: "data",
526
+ type: "object",
527
+ description: "Configuration for data part rendering.",
528
+ children: [
529
+ {
530
+ parameters: [
531
+ {
532
+ name: "by_name",
533
+ type: "Record<string, DataMessagePartComponent>",
534
+ description:
535
+ "Map of data event names to their specific components.",
536
+ },
537
+ {
538
+ name: "Fallback",
539
+ type: "DataMessagePartComponent",
540
+ description:
541
+ "Fallback component for data events not matched by by_name.",
542
+ },
543
+ ],
544
+ },
545
+ ],
546
+ },
547
+ {
548
+ name: "Group",
549
+ type: "ComponentType<PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>>",
550
+ description:
551
+ "Component for rendering a group of message parts. Receives the groupKey (undefined for ungrouped parts), the indices of all parts in the group, and the rendered part children.",
552
+ children: [
553
+ {
554
+ type: "GroupProps",
555
+ parameters: [
556
+ {
557
+ name: "groupKey",
558
+ type: "string | undefined",
559
+ description:
560
+ "The group key, or undefined for ungrouped parts.",
561
+ required: true,
562
+ },
563
+ {
564
+ name: "indices",
565
+ type: "number[]",
566
+ description:
567
+ "Array of indices of the message parts belonging to this group.",
568
+ required: true,
569
+ },
570
+ {
571
+ name: "children",
572
+ type: "ReactNode",
573
+ description:
574
+ "The rendered message part components within the group.",
575
+ required: true,
576
+ },
577
+ ],
578
+ },
579
+ ],
580
+ },
581
+ ],
582
+ },
583
+ ],
584
+ },
585
+ ]}
586
+ />
587
+
588
+ ### Unstable_PartsGroupedByParentId
589
+
590
+ A convenience wrapper around `MessagePrimitive.Unstable_PartsGrouped` that groups message parts by their `parentId` field. Parts without a `parentId` appear individually at their chronological position; parts sharing the same `parentId` are collected into a single group at the position of their first occurrence.
591
+
592
+ <Callout type="warn">
593
+ This API is unstable and may change in a future release.
594
+ </Callout>
595
+
596
+ ```tsx
597
+ <MessagePrimitive.Unstable_PartsGroupedByParentId
598
+ components={{
599
+ Group: ({ groupKey, children }) => {
600
+ if (!groupKey) return <>{children}</>;
601
+ return (
602
+ <div className="parent-group border rounded p-4">
603
+ <h4>Parent ID: {groupKey}</h4>
604
+ {children}
605
+ </div>
606
+ );
607
+ },
608
+ }}
609
+ />
610
+ ```
611
+
612
+ Accepts the same `components` prop as [`MessagePrimitive.Unstable_PartsGrouped`](#unstable_partsgrouped), but without a `groupingFunction` prop (the parent-ID grouping function is applied automatically).
613
+
294
614
  ### Error
295
615
 
296
616
  Renders children only if the message has an error status.
@@ -120,11 +120,9 @@ const ThreadWelcome = () => {
120
120
  <div>
121
121
  <h1>How can I help you?</h1>
122
122
  <div className="grid grid-cols-2 gap-2">
123
- <ThreadPrimitive.Suggestions
124
- components={{
125
- Suggestion: SuggestionCard,
126
- }}
127
- />
123
+ <ThreadPrimitive.Suggestions>
124
+ {() => <SuggestionCard />}
125
+ </ThreadPrimitive.Suggestions>
128
126
  </div>
129
127
  </div>
130
128
  );
@@ -149,4 +147,4 @@ const SuggestionCard = () => {
149
147
  ## See Also
150
148
 
151
149
  - [Suggestions Guide](/docs/guides/suggestions) - Configure and customize suggestions
152
- - [ThreadPrimitive.Suggestions](/docs/reference/api-reference/primitives/thread#threadprimitive-suggestions) - Render all suggestions
150
+ - [ThreadPrimitive.Suggestions](/docs/api-reference/primitives/thread#threadprimitive-suggestions) - Render all suggestions
@@ -59,13 +59,15 @@ This primitive renders a `<button>` element unless `asChild` is set.
59
59
 
60
60
  Displays the title of the thread.
61
61
 
62
- This primitive renders a `<span>` element unless `asChild` is set. The title is automatically derived from the first user message in the thread.
62
+ This primitive renders as a React Fragment with no wrapper DOM element. It outputs the thread's title text directly, or the `fallback` content if no title is available.
63
63
 
64
64
  <ParametersTable
65
65
  type="ThreadListItemPrimitiveTitleProps"
66
66
  parameters={[
67
67
  {
68
- name: "asChild",
68
+ name: "fallback",
69
+ type: "ReactNode",
70
+ description: "Content to display when the thread has no title.",
69
71
  },
70
72
  ]}
71
73
  />
@@ -14,11 +14,9 @@ import { ThreadListPrimitive } from "@assistant-ui/react";
14
14
  const ThreadList = () => (
15
15
  <ThreadListPrimitive.Root>
16
16
  <ThreadListPrimitive.New />
17
- <ThreadListPrimitive.Items
18
- components={{
19
- ThreadListItem: MyThreadListItem
20
- }}
21
- />
17
+ <ThreadListPrimitive.Items>
18
+ {() => <MyThreadListItem />}
19
+ </ThreadListPrimitive.Items>
22
20
  </ThreadListPrimitive.Root>
23
21
  );
24
22
  ```