@assistant-ui/mcp-docs-server 0.1.3 → 0.1.4

package/.docs/raw/docs/guides/Attachments.mdx

@@ -34,7 +34,8 @@ npx shadcn@latest add "https://r.assistant-ui.com/attachment"
 This adds `/components/assistant-ui/attachment.tsx` to your project.
 
 <Callout type="tip">
-**Next steps:** Feel free to adjust these auto-generated components (styling, layout, behavior) to match your application's design system.
+  **Next steps:** Feel free to adjust these auto-generated components (styling,
+  layout, behavior) to match your application's design system.
 </Callout>
 
   </Step>
@@ -94,7 +95,7 @@ const UserMessage = () => {
   return (
     <MessagePrimitive.Root>
       <UserMessageAttachments />
-      <MessagePrimitive.Content />
+      <MessagePrimitive.Parts />
     </MessagePrimitive.Root>
   );
 };
@@ -242,7 +243,7 @@ class PDFAttachmentAdapter implements AttachmentAdapter {
   async send(attachment: PendingAttachment): Promise<CompleteAttachment> {
     // Option 1: Extract text from PDF (requires pdf parsing library)
     // const text = await this.extractTextFromPDF(attachment.file);
-    
+
     // Option 2: Convert to base64 for API processing
     const base64Data = await this.fileToBase64(attachment.file);
 
@@ -253,8 +254,8 @@ class PDFAttachmentAdapter implements AttachmentAdapter {
       content: [
         {
           type: "text",
-          text: `[PDF Document: ${attachment.name}]\nBase64 data: ${base64Data.substring(0, 50)}...`
-        }
+          text: `[PDF Document: ${attachment.name}]\nBase64 data: ${base64Data.substring(0, 50)}...`,
+        },
       ],
       status: { type: "complete" },
     };
@@ -268,12 +269,12 @@ class PDFAttachmentAdapter implements AttachmentAdapter {
     const arrayBuffer = await file.arrayBuffer();
     const bytes = new Uint8Array(arrayBuffer);
     let binary = "";
-    bytes.forEach(byte => {
+    bytes.forEach((byte) => {
       binary += String.fromCharCode(byte);
     });
     return btoa(binary);
   }
-  
+
   // Optional: Extract text from PDF using a library like pdf.js
   private async extractTextFromPDF(file: File): Promise<string> {
     // Implementation would use pdf.js or similar
@@ -296,33 +297,36 @@ import { useLocalRuntime, ChatModelAdapter } from "@assistant-ui/react";
 const MyModelAdapter: ChatModelAdapter = {
   async run({ messages, abortSignal }) {
     // Convert messages to format expected by your vision-capable API
-    const formattedMessages = messages.map(msg => {
-      if (msg.role === "user" && msg.content.some(part => part.type === "image")) {
+    const formattedMessages = messages.map((msg) => {
+      if (
+        msg.role === "user" &&
+        msg.content.some((part) => part.type === "image")
+      ) {
         // Format for GPT-4V or similar vision models
         return {
           role: "user",
-          content: msg.content.map(part => {
+          content: msg.content.map((part) => {
             if (part.type === "text") {
               return { type: "text", text: part.text };
             }
             if (part.type === "image") {
               return {
                 type: "image_url",
-                image_url: { url: part.image }
+                image_url: { url: part.image },
               };
             }
             return part;
-          })
+          }),
         };
       }
-      
+
       // Regular text messages
       return {
         role: msg.role,
         content: msg.content
-          .filter(c => c.type === "text")
-          .map(c => c.text)
-          .join("\n")
+          .filter((c) => c.type === "text")
+          .map((c) => c.text)
+          .join("\n"),
       };
     });
 
@@ -343,8 +347,8 @@ const MyModelAdapter: ChatModelAdapter = {
 
 // Create runtime with vision image adapter
 const runtime = useLocalRuntime(MyModelAdapter, {
-  adapters: { 
-    attachments: new VisionImageAdapter() 
+  adapters: {
+    attachments: new VisionImageAdapter(),
   },
 });
 ```
@@ -363,12 +367,12 @@ export async function POST(req: Request) {
 
   const result = streamText({
     model: openai("gpt-4-vision-preview"),
-    messages: messages.map(msg => {
+    messages: messages.map((msg) => {
       if (msg.experimental_attachments?.length) {
         // Images are automatically formatted for the model
         return {
           ...msg,
-          experimental_attachments: msg.experimental_attachments
+          experimental_attachments: msg.experimental_attachments,
         };
       }
       return msg;
@@ -637,4 +641,3 @@ Attachments work with all assistant-ui runtimes:
 
 - [Attachment UI Components](/docs/ui/Attachment) - UI implementation details
 - [API Reference](/docs/api-reference) - Detailed type definitions
-

package/.docs/raw/docs/guides/ToolUI.mdx

@@ -43,13 +43,13 @@ const weatherTool = tool({
   execute: async ({ location, unit }) => {
     const weather = await fetchWeatherAPI(location, unit);
     return weather;
-  }
+  },
 });
 
 // Register the tool
 const WeatherTool = makeAssistantTool({
   ...weatherTool,
-  toolName: "getWeather"
+  toolName: "getWeather",
 });
 
 // Create the UI
@@ -77,7 +77,8 @@ const WeatherToolUI = makeAssistantToolUI<
 ```
 
 <Callout type="tip">
-  Tools defined with `makeAssistantTool` can be passed to your backend using the `frontendTools` utility
+  Tools defined with `makeAssistantTool` can be passed to your backend using the
+  `frontendTools` utility
 </Callout>
 
 Learn more about creating tools in the [Tools Guide](/docs/guides/Tools).
@@ -305,8 +306,9 @@ function DynamicToolUI() {
 For tools that need access to parent component props:
 
 <Callout type="tip">
-**Why `useInlineRender`?**
-By default, a tool UI's `render` function is static. Use `useInlineRender` when your UI needs access to dynamic component props (for example, to pass in an `id` or other contextual data).
+  **Why `useInlineRender`?** By default, a tool UI's `render` function is
+  static. Use `useInlineRender` when your UI needs access to dynamic component
+  props (for example, to pass in an `id` or other contextual data).
 </Callout>
 
 ```tsx
@@ -340,7 +342,9 @@ function ProductPage({ productId, productName }) {
 Create tools that collect user input during execution:
 
 <Callout type="tip">
-**Pro tip:** Call `addResult(...)` exactly once to complete the tool call. After it's invoked, the assistant will resume the conversation with your provided data.
+  **Pro tip:** Call `addResult(...)` exactly once to complete the tool call.
+  After it's invoked, the assistant will resume the conversation with your
+  provided data.
 </Callout>
 
 ```tsx
@@ -575,7 +579,7 @@ type ToolUIRenderProps<TArgs, TResult> = {
   argsText: string; // JSON stringified args
 
   // Execution status
-  status: ToolCallContentPartStatus;
+  status: ToolCallMessagePartStatus;
   isError?: boolean;
 
   // Tool result (may be partial during streaming)
@@ -659,8 +663,41 @@ useAssistantToolUI({
   server.
 </Callout>
 
+### Collapsible Tool Groups
+
+Create collapsible sections for consecutive tool calls:
+
+```tsx
+
+```
+
+### Advanced Tool Group UI
+
+Add progress indicators and enhanced styling:
+
+```tsx
+const ToolGroup = ({ startIndex, endIndex, children }) => {
+  return (
+    <details className="tool-group my-4">
+      <summary className="cursor-pointer rounded bg-gray-50 p-3 hover:bg-gray-100">
+        <span className="font-medium">
+          {endIndex - startIndex + 1} tool calls executed
+        </span>
+        <span className="ml-2 text-sm text-gray-500">
+          (#{startIndex + 1}-{endIndex + 1})
+        </span>
+      </summary>
+      <div className="mt-2 space-y-2 pl-4">{children}</div>
+    </details>
+  );
+};
+
+<Thread components={{ ToolGroup }} />;
+```
+
 ## Related Guides
 
 - [Tools Guide](/docs/guides/Tools) - Learn how to create and use tools with AI models
 - [Tool Fallback](/docs/ui/ToolFallback) - Default UI for tools without custom components
-- [API Reference](/docs/api-reference/primitives/ContentPart) - Detailed type definitions and component APIs
+- [API Reference](/docs/api-reference/primitives/MessagePart) - Detailed type definitions and component APIs
+- [Message Primitive](/docs/api-reference/primitives/Message) - Complete Message component documentation

package/.docs/raw/docs/migrations/v0-11.mdx

@@ -0,0 +1,169 @@
+---
+title: Migration to v0.11
+---
+
+## ContentPart renamed to MessagePart
+
+All ContentPart-related types, hooks, and components have been renamed to MessagePart for better semantic clarity and consistency.
+
+### What changed
+
+The following types and components have been renamed:
+
+#### Core Types
+
+- `TextContentPart` → `TextMessagePart`
+- `ReasoningContentPart` → `ReasoningMessagePart`
+- `SourceContentPart` → `SourceMessagePart`
+- `ImageContentPart` → `ImageMessagePart`
+- `FileContentPart` → `FileMessagePart`
+- `Unstable_AudioContentPart` → `Unstable_AudioMessagePart`
+- `ToolCallContentPart` → `ToolCallMessagePart`
+- `ContentPartStatus` → `MessagePartStatus`
+- `ToolCallContentPartStatus` → `ToolCallMessagePartStatus`
+
+#### Thread Message Parts
+
+- `ThreadUserContentPart` → `ThreadUserMessagePart`
+- `ThreadAssistantContentPart` → `ThreadAssistantMessagePart`
+
+#### Runtime and State Types
+
+- `ContentPartRuntime` → `MessagePartRuntime`
+- `ContentPartState` → `MessagePartState`
+
+#### Hooks
+
+- `useContentPart` → `useMessagePart`
+- `useContentPartRuntime` → `useMessagePartRuntime`
+- `useContentPartText` → `useMessagePartText`
+- `useContentPartReasoning` → `useMessagePartReasoning`
+- `useContentPartSource` → `useMessagePartSource`
+- `useContentPartFile` → `useMessagePartFile`
+- `useContentPartImage` → `useMessagePartImage`
+- `useTextContentPart` → `useTextMessagePart`
+
+#### Component Types
+
+- `EmptyContentPartComponent` → `EmptyMessagePartComponent`
+- `TextContentPartComponent` → `TextMessagePartComponent`
+- `ReasoningContentPartComponent` → `ReasoningMessagePartComponent`
+- `SourceContentPartComponent` → `SourceMessagePartComponent`
+- `ImageContentPartComponent` → `ImageMessagePartComponent`
+- `FileContentPartComponent` → `FileMessagePartComponent`
+- `Unstable_AudioContentPartComponent` → `Unstable_AudioMessagePartComponent`
+- `ToolCallContentPartComponent` → `ToolCallMessagePartComponent`
+
+#### Props Types
+
+- `EmptyContentPartProps` → `EmptyMessagePartProps`
+- `TextContentPartProps` → `TextMessagePartProps`
+- `ReasoningContentPartProps` → `ReasoningMessagePartProps`
+- `SourceContentPartProps` → `SourceMessagePartProps`
+- `ImageContentPartProps` → `ImageMessagePartProps`
+- `FileContentPartProps` → `FileMessagePartProps`
+- `Unstable_AudioContentPartProps` → `Unstable_AudioMessagePartProps`
+- `ToolCallContentPartProps` → `ToolCallMessagePartProps`
+
+#### Providers and Context
+
+- `TextContentPartProvider` → `TextMessagePartProvider`
+- `TextContentPartProviderProps` → `TextMessagePartProviderProps`
+- `ContentPartRuntimeProvider` → `MessagePartRuntimeProvider`
+- `ContentPartContext` → `MessagePartContext`
+- `ContentPartContextValue` → `MessagePartContextValue`
+
+#### Primitives
+
+- `ContentPartPrimitive` → `MessagePartPrimitive`
+- `ContentPartPrimitiveText` → `MessagePartPrimitiveText`
+- `ContentPartPrimitiveImage` → `MessagePartPrimitiveImage`
+- `ContentPartPrimitiveInProgress` → `MessagePartPrimitiveInProgress`
+
+### MessagePrimitive.Content renamed to MessagePrimitive.Parts
+
+The `MessagePrimitive.Content` component has been renamed to `MessagePrimitive.Parts` to better reflect its purpose of rendering message parts.
+
+```diff
+-<MessagePrimitive.Content components={{ Text: MyText }} />
++<MessagePrimitive.Parts components={{ Text: MyText }} />
+```
+
+### Migration
+
+To migrate your codebase automatically, use the migration codemod:
+
+```sh
+# IMPORTANT: make sure to commit all changes to git / create a backup before running the codemod
+npx @assistant-ui/cli upgrade
+```
+
+Or run the specific migration:
+
+```sh
+npx @assistant-ui/cli codemod v0-11/content-part-to-message-part .
+```
+
+#### Manual Migration Examples
+
+If you prefer to migrate manually, here are some examples:
+
+**Imports:**
+
+```diff
+-import { TextContentPart, useContentPart, ToolCallContentPartComponent } from "@assistant-ui/react";
++import { TextMessagePart, useMessagePart, ToolCallMessagePartComponent } from "@assistant-ui/react";
+```
+
+**Type annotations:**
+
+```diff
+-function processContent(part: TextContentPart): void {
++function processContent(part: TextMessagePart): void {
+   console.log(part.text);
+ }
+
+-const MyTool: ToolCallContentPartComponent = ({ toolName }) => {
++const MyTool: ToolCallMessagePartComponent = ({ toolName }) => {
+   return <div>{toolName}</div>;
+ };
+```
+
+**Hooks:**
+
+```diff
+ function MyComponent() {
+-  const part = useContentPart();
+-  const text = useContentPartText();
+-  const runtime = useContentPartRuntime();
++  const part = useMessagePart();
++  const text = useMessagePartText();
++  const runtime = useMessagePartRuntime();
+   return null;
+ }
+```
+
+**JSX Components:**
+
+```diff
+-<ContentPartPrimitive.Text />
+-<ContentPartPrimitive.Image />
++<MessagePartPrimitive.Text />
++<MessagePartPrimitive.Image />
+```
+
+**Providers:**
+
+```diff
+-<TextContentPartProvider text="Hello" isRunning={false}>
++<TextMessagePartProvider text="Hello" isRunning={false}>
+   <div>Content</div>
+-</TextContentPartProvider>
++</TextMessagePartProvider>
+```
+
+### Why this change?
+
+The ContentPart naming was inconsistent with the rest of the codebase, where "message parts" are used throughout. This change improves semantic clarity and makes the API more intuitive by aligning terminology across the entire library.
+
+The old ContentPart APIs continue to work but are now deprecated and will be removed in a future major version.

package/.docs/raw/docs/migrations/v0-7.mdx

@@ -24,7 +24,7 @@ Component property types are now neatly organized under the component itself.
 
 ### `useThreadContext`, `useMessageContext`, ... replaced with direct imports of stores
 
-`useAssistantContext`, `useThreadContext`, `useMessageContext` and `useContentPartContext` have been removed in favor of direct exports from `@assistant-ui/react`;
+`useAssistantContext`, `useThreadContext`, `useMessageContext` and `useMessagePartContext` have been removed in favor of direct exports from `@assistant-ui/react`;
 
 ```diff
 -const { useThread } = useThreadContext();
@@ -56,7 +56,7 @@ Component property types are now neatly organized under the component itself.
 ```diff
 -useSwitchToNewThread();
 +const runtime = useAssistantRuntime()
-+runtime.switchToNewThread(); 
++runtime.switchToNewThread();
 ```
 
 ### `runtime.subscribe` removed, `subscribeToMainThread` removed
@@ -106,7 +106,7 @@ The branch IDs are an internal implementation detail. The new Message Runtime AP
 A few methods from `useThreadRuntime` have been moved to `useMessageRuntime()`.
 
 - `threadRuntime.switchToBranch()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).switchToBranch()`.
-- `threadRuntime.addToolResult()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).getContentPartByToolCallId(toolCallId).addToolResult()`.
+- `threadRuntime.addToolResult()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).getMessagePartByToolCallId(toolCallId).addToolResult()`.
 - `threadRuntime.speak()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).speak()`.
 - `threadRuntime.submitFeedback()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).submitFeedback()`.
 - `threadRuntime.getEditComposer()` has been removed in favor of `useThreadRuntime().getMessageById(id).getMessageByIndex(idx).composer`.
@@ -149,15 +149,15 @@ These methods have been removed.
 
 `useMessageStore` has been removed in favor of `useMessageRuntime().getState()`.
 
-## Content Part Context API simplifications
+## Message part Context API simplifications
 
-### Flattened context values `useContentPart().part` -> `useContentPart()`
+### Flattened context values `useMessagePart().part` -> `useMessagePart()`
 
-`ContentPartState` is now itself a content part, so you no longer need to access the nested `useContentPart().part` field.
+`MessagePartState` is now itself a message part, so you no longer need to access the nested `useMessagePart().part` field.
 
 ```diff
--useContentPart(c => c.part.type);
-+useContentPart(c => c.type);
+-useMessagePart(c => c.part.type);
++useMessagePart(c => c.type);
 ```
 
 This also applies to tool UI render functions:

package/.docs/raw/docs/migrations/v0-8.mdx

@@ -27,10 +27,10 @@ import { RSCDisplay } from "@assistant-ui/react-ai-sdk";
 
 
 // if you are using unstyled primitives, update MyThread.tsx
-<MessagePrimitive.Content components={{ Text: RSCDisplay }} />
+<MessagePrimitive.Parts components={{ Text: RSCDisplay }} />
 ```
 
-## Migrate away from UIContentPart
+## Migrate away from UIMessagePart
 
 For instructions on migrating for Vercel AI SDK RSC, see section above.
 This migration guide is for users of `useExternalStoreRuntime`.
@@ -40,13 +40,13 @@ This migration guide is for users of `useExternalStoreRuntime`.
 First, reconsider your approach.
 
 Creating UI components in the `convertMessage` callback is considered an anti-pattern.
-The recommended alternative approach is to pass tool-call content parts, and use `makeAssistantToolUI` to map these tool calls to UI components.
+The recommended alternative approach is to pass tool-call message parts, and use `makeAssistantToolUI` to map these tool calls to UI components.
 
 This ensures that the data layer is separate and decoupled from the UI layer.
 
 #### Example
 
-Consider the following example, where you are using a UIContentPart to show a loading indicator.
+Consider the following example, where you are using a UIMessagePart to show a loading indicator.
 
 ```ts title="bad.ts"
 // THIS IS BAD
@@ -66,11 +66,11 @@ const convertMessage = (message: MyMessage): ThreadMessageLike => {
   // ...
 };
 
-// use the empty content part to show the loading indicator
+// use the empty message part to show the loading indicator
 <Thread assistantMessage={{ components: { Empty: MyLoader } }} />;
 ```
 
-(if you are using unstyled primitives, update MyThread.tsx, and pass the component to MessagePrimitive.Content)
+(if you are using unstyled primitives, update MyThread.tsx, and pass the component to MessagePrimitive.Parts)
 
 #### Example 2
 
@@ -107,13 +107,13 @@ const ChartToolUI = makeAssistantToolUI({
 
 (if you are using unstyled primitives, render the `<ChartToolUI />` component anywhere inside your AssistantRuntimeProvider)
 
-### Fallback Approach: Override ContentPartText
+### Fallback Approach: Override MessagePartText
 
 However, sometimes you receive UI components from an external source.
 
 The example below assumes that your custom `MyMessage` type has a `display` field.
 
-First, we define a dummy `UI_PLACEHOLDER` content part, which we will replace with the UI component later:
+First, we define a dummy `UI_PLACEHOLDER` message part, which we will replace with the UI component later:
 
 ```ts
 const UI_PLACEHOLDER = Object.freeze({
@@ -122,17 +122,17 @@ const UI_PLACEHOLDER = Object.freeze({
 });
 const convertMessage = (message: MyMessage): ThreadMessageLike => ({
   content: [
-    // other content parts,
+    // other message parts,
     UI_PLACEHOLDER,
   ],
 });
 ```
 
-Then, we define a custom `TextContentPartComponent`:
+Then, we define a custom `TextMessagePartComponent`:
 
 ```tsx
-const MyText: TextContentPartComponent = () => {
-  const isUIPlaceholder = useContentPart((p) => p === UI_PLACEHOLDER);
+const MyText: TextMessagePartComponent = () => {
+  const isUIPlaceholder = useMessagePart((p) => p === UI_PLACEHOLDER);
 
   // this assumes that you have a `display` field on your original message objects before conversion.
   const ui = useMessage((m) =>
@@ -155,6 +155,6 @@ We pass this component to our Thread:
 />
 ```
 
-(if you are using unstyled primitives, update MyThread.tsx, and pass the component to MessagePrimitive.Content)
+(if you are using unstyled primitives, update MyThread.tsx, and pass the component to MessagePrimitive.Parts)
 
-Now, the `UI_PLACEHOLDER` content part is replaced with the UI component we defined earlier.
+Now, the `UI_PLACEHOLDER` message part is replaced with the UI component we defined earlier.

package/.docs/raw/docs/migrations/v0-9.mdx

@@ -23,9 +23,9 @@ The following components and types have been moved to `@assistant-ui/react-edge`
   - `CoreUserMessage`
   - `CoreAssistantMessage`
   - `CoreSystemMessage`
-  - `CoreUserContentPart`
-  - `CoreAssistantContentPart`
-  - `CoreToolCallContentPart`
+  - `CoreUserMessagePart`
+  - `CoreAssistantMessagePart`
+  - `CoreToolCallMessagePart`
 - Core message converters
   - `fromCoreMessages`
   - `fromCoreMessage`

package/.docs/raw/docs/runtimes/ai-sdk/rsc.mdx

@@ -206,10 +206,10 @@ export default function RootLayout({
 
 ## Set up RSCDisplay
 
-Pass the `RSCDisplay` component to your `MessagePrimitive.Content`:
+Pass the `RSCDisplay` component to your `MessagePrimitive.Parts`:
 
 ```tsx
-<MessagePrimitive.Content components={{ Text: RSCDisplay }} />
+<MessagePrimitive.Parts components={{ Text: RSCDisplay }} />
 ```
 
 (if you are using react-ui: `<Thread assistantMessage={{ components: { Text: RSCDisplay } }} />`)

package/.docs/raw/docs/runtimes/ai-sdk/use-assistant-hook.mdx

@@ -188,7 +188,7 @@ const MyAssistantMessage = () => {
 
 const WeatherToolUI = makeAssistantToolUI({
   render: () => {
-    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
+    const aiSDKMessage = useMessagePart((p) => getExternalStoreMessages(p)[0]);
     // ...
   },
 });

package/.docs/raw/docs/runtimes/ai-sdk/use-chat-hook.mdx

@@ -131,8 +131,8 @@ const MyAssistantMessage = () => {
 
 const WeatherToolUI = makeAssistantToolUI({
   render: () => {
-    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
+    const aiSDKMessage = useMessagePart((p) => getExternalStoreMessages(p)[0]);
     // ...
   },
 });
-```
+```

package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx

@@ -129,8 +129,8 @@ const MyAssistantMessage = () => {
 
 const WeatherToolUI = makeAssistantToolUI({
   render: () => {
-    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
+    const aiSDKMessage = useMessagePart((p) => getExternalStoreMessages(p)[0]);
     // ...
   },
 });
-```
+```

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -1144,13 +1144,13 @@ const MyComponent = () => {
   messages for display.
 </Callout>
 
-### Content Part Access
+### Message part Access
 
 ```tsx
 const ToolUI = makeAssistantToolUI({
   render: () => {
-    const originalMessages = useContentPart((p) => getExternalStoreMessages(p));
-    // Access original message data for this content part
+    const originalMessages = useMessagePart((p) => getExternalStoreMessages(p));
+    // Access original message data for this message part
   },
 });
 ```
@@ -1500,8 +1500,8 @@ A flexible message format that can be converted to assistant-ui's internal forma
     },
     {
       name: "content",
-      type: "string | readonly ContentPart[]",
-      description: "Message content as string or structured content parts",
+      type: "string | readonly MessagePart[]",
+      description: "Message content as string or structured message parts",
       required: true,
     },
     {

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx

@@ -273,12 +273,12 @@ npx shadcn@latest add button
 Then create a new file under `/components/tools/ToolFallback.tsx` to define the fallback UI.
 
 ```tsx title="@/components/tools/ToolFallback.tsx"
-import { ToolCallContentPartComponent } from "@assistant-ui/react";
+import { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "../ui/button";
 
-export const ToolFallback: ToolCallContentPartComponent = ({
+export const ToolFallback: ToolCallMessagePartComponent = ({
   toolName,
   argsText,
   result,

package/.docs/raw/docs/ui/Attachment.mdx

@@ -13,7 +13,10 @@ The Attachment components let the user attach files and view the attachments.
 <AttachmentSample />
 
 <Callout type="info">
-**Note:** These components provide the UI for attachments, but you also need to configure attachment adapters in your runtime to handle file uploads and processing. See the [Attachments Guide](/docs/guides/Attachments) for complete setup instructions.
+  **Note:** These components provide the UI for attachments, but you also need
+  to configure attachment adapters in your runtime to handle file uploads and
+  processing. See the [Attachments Guide](/docs/guides/Attachments) for complete
+  setup instructions.
 </Callout>
 
 ## Getting Started
@@ -69,7 +72,7 @@ const UserMessage: FC = () => {
       <UserMessageAttachments />
 
       <div className="...">
-        <MessagePrimitive.Content />
+        <MessagePrimitive.Parts />
       </div>
 
       <BranchPicker className="..." />