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

package/.docs/raw/docs/(docs)/guides/attachments.mdx

@@ -94,14 +94,31 @@ const UserMessage = () => {
 
 ## Built-in Attachment Adapters
 
+### AI SDK Runtime (Default)
+
+When using `useChatRuntime`, the built-in adapter accepts all file types and converts them to base64 data URLs. This works well for images and small files.
+
+<Callout type="warn">
+  Most models only support **image** attachments. Sending unsupported file types (audio, video, PDF, etc.) will result in an API error. Check your model provider's documentation for supported input types.
+</Callout>
+
+To restrict accepted file types, pass a custom adapter:
+
+```tsx
+const runtime = useChatRuntime({
+  adapters: {
+    attachments: new SimpleImageAttachmentAdapter(), // only images
+  },
+});
+```
+
 ### SimpleImageAttachmentAdapter
 
-Handles image files and converts them to data URLs for display in the chat UI. By default, images are shown inline but not sent to the LLM - use the VisionImageAdapter example above to send images to vision-capable models.
+Handles image files and converts them to data URLs for display in the chat UI.
 
 ```tsx
 const imageAdapter = new SimpleImageAttachmentAdapter();
 // Accepts: image/* (JPEG, PNG, GIF, etc.)
-// Output: { type: "image", url: "data:image/..." }
 ```
 
 ### SimpleTextAttachmentAdapter
@@ -111,7 +128,6 @@ Processes text files and wraps content in formatted tags:
 ```tsx
 const textAdapter = new SimpleTextAttachmentAdapter();
 // Accepts: text/plain, text/html, text/markdown, etc.
-// Output: Content wrapped in <attachment>...</attachment> tags
 ```
 
 ### CompositeAttachmentAdapter
@@ -122,7 +138,6 @@ Combines multiple adapters to support various file types:
 const compositeAdapter = new CompositeAttachmentAdapter([
   new SimpleImageAttachmentAdapter(),
   new SimpleTextAttachmentAdapter(),
-  // Add more adapters as needed
 ]);
 ```
 
@@ -157,7 +172,7 @@ class VisionImageAdapter implements AttachmentAdapter {
       type: "image",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -224,7 +239,7 @@ class PDFAttachmentAdapter implements AttachmentAdapter {
       type: "document",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -360,7 +375,7 @@ class UploadAttachmentAdapter implements AttachmentAdapter {
       type: "file",
       name: file.name,
       file,
-      status: { type: "running", progress: 0 },
+      status: { type: "running", reason: "uploading", progress: 0 },
     } as PendingAttachment;
 
     // Simulate upload progress
@@ -372,7 +387,7 @@ class UploadAttachmentAdapter implements AttachmentAdapter {
         type: "file",
         name: file.name,
         file,
-        status: { type: "running", progress },
+        status: { type: "running", reason: "uploading", progress },
       } as PendingAttachment;
     }
 
@@ -382,7 +397,7 @@ class UploadAttachmentAdapter implements AttachmentAdapter {
       type: "file",
       name: file.name,
       file,
-      status: { type: "running", progress: 100 },
+      status: { type: "running", reason: "uploading", progress: 100 },
     } as PendingAttachment;
   }
 
@@ -436,7 +451,6 @@ class ValidatedImageAdapter implements AttachmentAdapter {
         status: {
           type: "incomplete",
           reason: "error",
-          error: new Error("File size exceeds 5MB limit"),
         },
       };
     }
@@ -456,7 +470,6 @@ class ValidatedImageAdapter implements AttachmentAdapter {
         status: {
           type: "incomplete",
           reason: "error",
-          error,
         },
       };
     }
@@ -467,7 +480,7 @@ class ValidatedImageAdapter implements AttachmentAdapter {
       type: "image",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -514,7 +527,7 @@ const handleMultipleFiles = async (files: FileList) => {
   const filesToAdd = Array.from(files).slice(0, maxFiles);
 
   for (const file of filesToAdd) {
-    await aui.composer().addAttachment({ file });
+    await aui.composer().addAttachment(file);
   }
 };
 ```
@@ -529,7 +542,7 @@ Attachments are sent to the backend as file content parts.
 
 Attachments work with all assistant-ui runtimes:
 
-- **AI SDK Runtime**: `useChatRuntime`, `useAssistantRuntime`
+- **AI SDK Runtime**: `useChatRuntime`
 - **External Store**: `useExternalStoreRuntime`
 - **LangGraph**: `useLangGraphRuntime`
 - **Custom Runtimes**: Any runtime implementing the attachment interface
@@ -540,6 +553,52 @@ Attachments work with all assistant-ui runtimes:
   processing logic to fit your specific needs.
 </Callout>
 
+## Large File Uploads
+
+The built-in adapters convert files to base64 data URLs in memory. For large files (long audio, video, etc.), this can cause performance issues. Instead, upload to a server and pass the URL:
+
+```tsx
+class ServerUploadAdapter implements AttachmentAdapter {
+  accept = "*";
+  private urls = new Map<string, string>();
+
+  async *add({ file }: { file: File }) {
+    const id = crypto.randomUUID();
+    yield {
+      id, type: "file" as const, name: file.name, file,
+      contentType: file.type,
+      status: { type: "running" as const, reason: "uploading" as const, progress: 0 },
+    };
+
+    const form = new FormData();
+    form.append("file", file);
+    const { url } = await fetch("/api/upload", { method: "POST", body: form }).then(r => r.json());
+    this.urls.set(id, url);
+
+    yield {
+      id, type: "file" as const, name: file.name, file,
+      contentType: file.type,
+      status: { type: "requires-action" as const, reason: "composer-send" as const },
+    };
+  }
+
+  async send(attachment: PendingAttachment): Promise<CompleteAttachment> {
+    const url = this.urls.get(attachment.id)!;
+    this.urls.delete(attachment.id);
+    return {
+      ...attachment, status: { type: "complete" },
+      content: [{ type: "file", data: url, mimeType: attachment.contentType ?? "", filename: attachment.name }],
+    };
+  }
+
+  async remove() {}
+}
+```
+
+<Callout type="tip">
+  [assistant-ui Cloud](/docs/cloud/ai-sdk-assistant-ui) includes `CloudFileAttachmentAdapter` which handles large file uploads via presigned URLs out of the box.
+</Callout>
+
 ## Best Practices
 
 1. **File Size Limits**: Always validate file sizes to prevent memory issues
@@ -552,4 +611,4 @@ Attachments work with all assistant-ui runtimes:
 ## Resources
 
 - [Attachment UI Components](/docs/ui/attachment) - UI implementation details
-- [API Reference](/docs/api-reference) - Detailed type definitions
+- [API Reference](/docs/api-reference/overview) - Detailed type definitions

package/.docs/raw/docs/(docs)/guides/branching.mdx

@@ -30,7 +30,7 @@ const Message = () => {
       ...
       <BranchPicker /> {/* <-- show the branch picker */}
       ...
-    </EditComposerPrimitive.Root>
+    </MessagePrimitive.Root>
   );
 };
 
@@ -48,13 +48,18 @@ const BranchPicker = () => {
 
 ## API
 
-You can access the current branch state or navigate via the API as well.  
-These APIs rely on the message state and may only be called inside a message component.
+You can access the current branch state or navigate via the API as well.
+These APIs rely on the message scope and may only be called inside a message component.
 
 ```tsx
-const hasBranches = useMessageIf({ hasBranches: true }); // whether branchCount is >= 2
+import { useAui, useAuiState } from "@assistant-ui/react";
+
+// read branch state
+const { branchNumber, branchCount } = useAuiState((s) => s.message);
 
 // navigation
-const goToNextBranch = useGoToNextBranch(); // null if there is no next branch
-const goToPreviousBranch = useGoToPreviousBranch(); // null if there is no previous branch
+const aui = useAui();
+aui.message().switchToBranch({ position: "next" });
+aui.message().switchToBranch({ position: "previous" });
+aui.message().switchToBranch({ branchId: "some-id" });
 ```

package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx

@@ -47,9 +47,13 @@ const ChainOfThought: FC = () => {
         Thinking
       </ChainOfThoughtPrimitive.AccordionTrigger>
       <AuiIf condition={(s) => !s.chainOfThought.collapsed}>
-        <ChainOfThoughtPrimitive.Parts
-          components={{ Reasoning, tools: { Fallback: ToolFallback } }}
-        />
+        <ChainOfThoughtPrimitive.Parts>
+          {({ part }) => {
+            if (part.type === "reasoning") return <Reasoning {...part} />;
+            if (part.type === "tool-call") return <ToolFallback {...part} />;
+            return null;
+          }}
+        </ChainOfThoughtPrimitive.Parts>
       </AuiIf>
     </ChainOfThoughtPrimitive.Root>
   );
@@ -58,12 +62,12 @@ const ChainOfThought: FC = () => {
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root>
-      <MessagePrimitive.Parts
-        components={{
-          Text: MarkdownText,
-          ChainOfThought, // groups reasoning + tool parts
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "text") return <MarkdownText />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };
@@ -111,15 +115,13 @@ Renders the grouped parts when expanded (nothing when collapsed).
 
 ```tsx
 <AuiIf condition={(s) => !s.chainOfThought.collapsed}>
-  <ChainOfThoughtPrimitive.Parts
-    components={{
-      Reasoning,
-      tools: { Fallback: ToolFallback },
-      Layout: ({ children }) => (
-        <div className="border-l-2 border-muted pl-4">{children}</div>
-      ),
+  <ChainOfThoughtPrimitive.Parts>
+    {({ part }) => {
+      if (part.type === "reasoning") return <Reasoning {...part} />;
+      if (part.type === "tool-call") return <ToolFallback {...part} />;
+      return null;
     }}
-  />
+  </ChainOfThoughtPrimitive.Parts>
 </AuiIf>
 ```
 

package/.docs/raw/docs/(docs)/guides/context-api.mdx

@@ -30,13 +30,18 @@ assistant-ui organizes state into **scopes** - logical boundaries that provide a
     └── 💬 Thread (thread) - Active conversation with messages
         ├── 🔵 Message (message) - User or assistant message
         │   ├── 📝 Part (part) - Content within a message (text, tool calls, etc.)
+        │   ├── 🧠 ChainOfThought (chainOfThought) - Reasoning steps within a message
+        │   │   └── 📝 Part (part) - Individual reasoning/tool-call step
         │   ├── 📎 Attachment (attachment) - Files attached to messages
         │   └── ✏️  Composer (composer) - Edit mode for existing messages
         │       └── 📎 Attachment (attachment) - Files in edit mode
         └── ✏️  Composer (composer) - New message input
             └── 📎 Attachment (attachment) - Files being added
 
+💡 Suggestions (suggestions) - Follow-up message suggestions
+    └── 💬 Suggestion (suggestion) - Individual suggestion item
 🔧 Tools (tools) - Custom UI components for tool calls
+🧩 ModelContext (modelContext) - Model context and tool registration
 ```
 
 **How scopes work:**
@@ -166,12 +171,12 @@ The API object is stable and doesn't cause re-renders. Use it for:
 // Thread actions
 aui.thread().append(message);
 aui.thread().startRun(config);
+aui.thread().resumeRun(config);
 aui.thread().cancelRun();
-aui.thread().switchToNewThread();
-aui.thread().switchToThread(threadId);
 aui.thread().getState();
-aui.thread().message(idOrIndex);
-aui.thread().composer;
+aui.thread().message({ index: idx });
+aui.thread().message({ id: messageId });
+aui.thread().composer();
 
 // Message actions
 aui.message().reload();
@@ -180,12 +185,14 @@ aui.message().stopSpeaking();
 aui.message().submitFeedback({ type: "positive" | "negative" });
 aui.message().switchToBranch({ position, branchId });
 aui.message().getState();
-aui.message().part(indexOrToolCallId);
-aui.message().composer;
+aui.message().part({ index: idx });
+aui.message().part({ toolCallId });
+aui.message().composer();
 
 // Part actions
-api.part().addResult(result);
-api.part().getState();
+aui.part().addToolResult(result);
+aui.part().resumeToolCall(result);
+aui.part().getState();
 
 // Composer actions
 aui.composer().send();
@@ -193,8 +200,8 @@ aui.composer().setText(text);
 aui.composer().setRole(role);
 aui.composer().addAttachment(file); // File object
 aui.composer().addAttachment({ name, content }); // external source
-aui.composer().clearAttachments();
-aui.composer().reset();
+await aui.composer().clearAttachments();
+await aui.composer().reset();
 aui.composer().getState();
 
 // Attachment actions
@@ -212,7 +219,23 @@ aui.threadListItem().rename(title);
 aui.threadListItem().archive();
 aui.threadListItem().unarchive();
 aui.threadListItem().delete();
-aui.threads().getState();
+aui.threadListItem().getState();
+
+// Suggestions actions
+aui.suggestions().getState();
+aui.suggestions().suggestion({ index: 0 });
+
+// Suggestion actions
+aui.suggestion().getState();
+
+// ChainOfThought actions
+aui.chainOfThought().getState();
+aui.chainOfThought().setCollapsed(collapsed);
+aui.chainOfThought().part({ index: 0 });
+
+// ModelContext actions
+aui.modelContext().getState();
+aui.modelContext().register(provider);
 
 // Tools actions
 aui.tools().setToolUI(toolName, render);
@@ -228,26 +251,29 @@ import { useAuiEvent } from "@assistant-ui/react";
 
 // Listen to current scope events (most common)
 useAuiEvent("composer.send", (event) => {
-  console.log("Current composer sent message:", event.message);
+  console.log("Composer sent message in thread:", event.threadId);
+});
+
+// Listen to thread events
+useAuiEvent("thread.runStart", (event) => {
+  console.log("Run started in thread:", event.threadId);
 });
 
 // Listen to all events of a type across all scopes
 useAuiEvent({ event: "composer.send", scope: "*" }, (event) => {
-  console.log("Any composer sent a message:", event);
+  console.log("Any composer sent a message:", event.threadId);
 });
 
 // Listen to ALL events (useful for debugging or analytics)
 useAuiEvent("*", (event) => {
-  console.log("Event occurred:", event.type, "from:", event.source);
-  // Send to analytics, logging, etc.
+  console.log("Event occurred:", event.event, event.payload);
 });
 
 // Practical example: Track user interactions
 function AnalyticsTracker() {
   useAuiEvent("composer.send", (event) => {
     analytics.track("message_sent", {
-      messageLength: event.message.content.length,
-      hasAttachments: event.message.attachments.length > 0,
+      threadId: event.threadId,
     });
   });
 
@@ -272,9 +298,13 @@ Each scope provides access to specific state and actions:
 - **Thread** (`thread`): Conversation with messages
 - **Message** (`message`): Individual message (user or assistant)
 - **Part** (`part`): Content part within a message (text, tool calls, etc.)
+- **ChainOfThought** (`chainOfThought`): Reasoning steps grouped within a message
 - **Composer** (`composer`): Text input for sending or editing messages
 - **Attachment** (`attachment`): File or media attached to a message or composer
+- **Suggestions** (`suggestions`): Collection of follow-up message suggestions
+- **Suggestion** (`suggestion`): Individual follow-up suggestion
 - **Tools** (`tools`): Tool UI components
+- **ModelContext** (`modelContext`): Model context and tool registration
 
 ### Scope Resolution
 
@@ -301,7 +331,7 @@ Before accessing a scope, check if it's available:
 const aui = useAui();
 
 // Check if message scope exists
-if (api.message.source) {
+if (aui.message.source) {
   // Safe to use message scope
   const { role } = aui.message().getState();
 }
@@ -325,9 +355,9 @@ const partByToolCall = aui.message().part({ toolCallId: "call_123" });
 // Access attachment by index
 const attachment = aui.composer().attachment({ index: 0 }).getState();
 
-// Access thread from thread list
-const thread = aui.threads().thread("main");
+// Access thread list item by ID or index
 const threadItem = aui.threads().item({ id: "thread_123" });
+const threadByIndex = aui.threads().item({ index: 0 });
 ```
 
 ## Common Patterns
@@ -400,7 +430,7 @@ function MessageCounter() {
 
 ### Resolution Dynamics
 
-When you call `api.scope()`, the API resolves the current scope at that moment. This resolution happens each time you call the function, which matters when dealing with changing contexts:
+When you call `aui.scope()`, the API resolves the current scope at that moment. This resolution happens each time you call the function, which matters when dealing with changing contexts:
 
 ```tsx
 const aui = useAui();
@@ -458,27 +488,35 @@ const isRunning = useAuiState((s) => s.thread.isRunning);
 
 ### Scope States
 
-| Scope          | Key State Properties                                                              | Description                                      |
-| -------------- | --------------------------------------------------------------------------------- | ------------------------------------------------ |
-| ThreadList     | `mainThreadId`, `threadIds`, `isLoading`, `threadItems`                           | Manages all available conversation threads       |
-| ThreadListItem | `id`, `title`, `status`, `remoteId`, `externalId`                                 | Individual thread metadata and status            |
-| Thread         | `isRunning`, `isLoading`, `isDisabled`, `messages`, `capabilities`, `suggestions` | Active conversation state and message history    |
-| Message        | `role`, `content`, `status`, `attachments`, `parentId`, `branchNumber`, `isLast`  | Individual message content and metadata          |
-| Composer       | `text`, `role`, `attachments`, `isEmpty`, `canCancel`, `type`, `isEditing`        | Text input state for new/edited messages         |
-| Part           | `type`, `content`, `status`, `text`, `toolCallId`, `toolName`                     | Content parts within messages (text, tool calls) |
-| Attachment     | `id`, `type`, `name`, `url`, `size`, `mimeType`                                   | File attachments metadata and content            |
+| Scope          | Key State Properties                                                                             | Description                                        |
+| -------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
+| ThreadList     | `mainThreadId`, `newThreadId`, `threadIds`, `archivedThreadIds`, `isLoading`, `threadItems`     | Manages all available conversation threads         |
+| ThreadListItem | `id`, `title`, `status`, `remoteId`, `externalId`                                               | Individual thread metadata and status              |
+| Thread         | `isRunning`, `isLoading`, `isDisabled`, `isEmpty`, `messages`, `capabilities`, `suggestions`    | Active conversation state and message history      |
+| Message        | `role`, `content`, `status`, `attachments`, `parts`, `parentId`, `branchNumber`, `branchCount`, `isLast`, `index` | Individual message content and metadata |
+| Part           | `type`, `status`, `text`, `toolCallId`, `toolName`                                              | Content parts within messages (text, tool calls)   |
+| ChainOfThought | `parts`, `collapsed`, `status`                                                                   | Reasoning steps grouped within a message           |
+| Composer       | `text`, `role`, `attachments`, `isEmpty`, `canCancel`, `type`, `isEditing`                      | Text input state for new/edited messages           |
+| Attachment     | `id`, `type`, `name`, `contentType`, `status`                                                   | File attachments metadata and content              |
+| Suggestions    | `suggestions`                                                                                    | Collection of follow-up message suggestions        |
+| Suggestion     | `title`, `label`, `prompt`                                                                       | Individual suggestion with title, label, and prompt |
+| ModelContext   | *(empty — use `register()` / `getToolCallParams()` methods)*                                     | Model context and tool registration                |
 
 ### Available Actions by Scope
 
-| Scope          | Actions                                                                   | Use Cases                                 |
-| -------------- | ------------------------------------------------------------------------- | ----------------------------------------- |
-| ThreadList     | `switchToNewThread()`, `switchToThread(id)`, `getState()`                 | Thread navigation and creation            |
-| ThreadListItem | `switchTo()`, `rename(title)`, `archive()`, `unarchive()`, `delete()`     | Thread management operations              |
-| Thread         | `append(message)`, `startRun()`, `cancelRun()`, `switchToNewThread()`     | Message handling and conversation control |
-| Message        | `reload()`, `speak()`, `stopSpeaking()`, `submitFeedback(feedback)`       | Message interactions and regeneration     |
-| Composer       | `send()`, `setText(text)`, `addAttachment(file \| attachment)`, `reset()` | Text input and message composition        |
-| Part           | `addResult(result)`, `getState()`                                         | Tool call result handling                 |
-| Attachment     | `remove()`, `getState()`                                                  | File management                           |
+| Scope          | Actions                                                                                                           | Use Cases                                  |
+| -------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| ThreadList     | `switchToNewThread()`, `switchToThread(id)`, `item(selector)`, `thread("main")`, `getState()`                    | Thread navigation and creation             |
+| ThreadListItem | `switchTo()`, `rename(title)`, `archive()`, `unarchive()`, `delete()`, `getState()`                              | Thread management operations               |
+| Thread         | `append(message)`, `startRun(config)`, `resumeRun(config)`, `cancelRun()`, `reset()`, `export()`, `import(repository)`, `message(selector)`, `composer()`, `getState()` | Message handling and conversation control |
+| Message        | `reload()`, `speak()`, `stopSpeaking()`, `submitFeedback(feedback)`, `switchToBranch(options)`, `getCopyText()`, `part(selector)`, `attachment(selector)`, `composer()`, `setIsCopied(value)`, `setIsHovering(value)`, `getState()` | Message interactions and regeneration |
+| Part           | `addToolResult(result)`, `resumeToolCall(result)`, `getState()`                                                   | Tool call result handling                  |
+| ChainOfThought | `setCollapsed(collapsed)`, `part({ index })`, `getState()`                                                        | Expand/collapse reasoning steps            |
+| Composer       | `send()`, `setText(text)`, `setRole(role)`, `addAttachment(file \| attachment)`, `clearAttachments()` (async), `reset()` (async), `getState()` | Text input and message composition |
+| Attachment     | `remove()`, `getState()`                                                                                          | File management                            |
+| Suggestions    | `suggestion({ index })`, `getState()`                                                                             | Access follow-up suggestions               |
+| Suggestion     | `getState()`                                                                                                      | Read individual suggestion data            |
+| ModelContext   | `register(provider)`, `getState()`                                                                                | Register model context providers           |
 
 ### Common Events
 
@@ -508,7 +546,7 @@ function SafeMessageButton() {
   const aui = useAui();
 
   const role = useAuiState((s) =>
-    api.message.source !== undefined ? s.message.role : "none",
+    aui.message.source !== undefined ? s.message.role : "none",
   );
 
   return <div>Role: {role}</div>;
@@ -558,18 +596,18 @@ const value = useAuiState((s) => s.scope.property);
 
 // Perform action
 const aui = useAui();
-api.scope().action();
+aui.scope().action();
 
 // Listen to events
 useAuiEvent("source.event", (e) => {});
 
 // Check scope availability
-if (api.scope.source) {
+if (aui.scope.source) {
   /* scope exists */
 }
 
 // Get state imperatively
-const state = api.scope().getState();
+const state = aui.scope().getState();
 
 // Navigate scopes
 aui.thread().message({ id: "..." }).getState();

package/.docs/raw/docs/(docs)/guides/dictation.mdx

@@ -38,7 +38,7 @@ const runtime = useChatRuntime({
 The dictation feature uses `ComposerPrimitive.Dictate` and `ComposerPrimitive.StopDictation` components.
 
 ```tsx
-import { ComposerPrimitive } from "@assistant-ui/react";
+import { AuiIf, ComposerPrimitive } from "@assistant-ui/react";
 import { MicIcon, SquareIcon } from "lucide-react";
 
 const ComposerWithDictation = () => (
@@ -46,18 +46,18 @@ const ComposerWithDictation = () => (
     <ComposerPrimitive.Input />
 
     {/* Show Dictate button when not dictating */}
-    <ComposerPrimitive.If dictation={false}>
+    <AuiIf condition={(s) => s.composer.dictation == null}>
       <ComposerPrimitive.Dictate>
         <MicIcon />
       </ComposerPrimitive.Dictate>
-    </ComposerPrimitive.If>
+    </AuiIf>
 
     {/* Show Stop button when dictating */}
-    <ComposerPrimitive.If dictation>
+    <AuiIf condition={(s) => s.composer.dictation != null}>
       <ComposerPrimitive.StopDictation>
         <SquareIcon className="animate-pulse" />
       </ComposerPrimitive.StopDictation>
-    </ComposerPrimitive.If>
+    </AuiIf>
 
     <ComposerPrimitive.Send />
   </ComposerPrimitive.Root>

package/.docs/raw/docs/(docs)/guides/editing.mdx

@@ -9,8 +9,8 @@ Give the user the ability to edit their message.
 
 You can show an editor interface by using `ComposerPrimitive`.
 
-```tsx {1,11,25,31-43}
-import { ComposerPrimitive } from "@assistant-ui/react";
+```tsx {1-2,11,25,31-52}
+import { ComposerPrimitive, useAuiState } from "@assistant-ui/react";
 ...
 
 const Thread = () => {
@@ -18,10 +18,12 @@ const Thread = () => {
     <ThreadPrimitive.Root>
       <ThreadPrimitive.Viewport>
         ...
-        <ThreadPrimitive.Messages components={{
-          ...,
-          EditComposer, // <-- Show our new component during edit mode
-        }} />
+        <ThreadPrimitive.Messages>
+          {({ message }) => {
+            // Show our new component during edit mode
+            return <MessageWithEditComposer />;
+          }}
+        </ThreadPrimitive.Messages>
       </ThreadPrimitive.Viewport>
       ...
     </ThreadPrimitive.Root>
@@ -40,7 +42,14 @@ const UserMessage = () => {
   );
 };
 
-// define a new component
+// define a wrapper component that handles both display and edit mode
+const MessageWithEditComposer = () => {
+  const isEditing = useAuiState((s) => s.composer.isEditing);
+  if (isEditing) return <EditComposer />;
+  return <UserMessage />;
+};
+
+// define the edit composer component
 const EditComposer = () => {
   return (
     // you can return a MessagePrimitive including a ComposerPrimitive, or only a ComposerPrimitive