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

package/.docs/raw/blog/2026-03-launch-week/index.mdx

@@ -0,0 +1,227 @@
+---
+title: "Launch Week: assistant-ui goes multi-platform"
+description: "React Native, terminal UIs, and more — assistant-ui is no longer just for the web."
+author: Simon Farshid
+date: 2026-03-09T12:00:00
+---
+
+import Image from "next/image";
+
+This week, we're shipping one major feature every day. The theme: **assistant-ui everywhere**.
+
+For two years, assistant-ui has been the go-to library for building AI chat on the web. Starting this week, that changes. Same runtime, same adapters, same developer experience — now on every platform your users are.
+
+---
+
+## Day 1 — React Native
+
+**Build AI chat for iOS and Android.**
+
+We're launching `@assistant-ui/react-native` — native React Native bindings that bring the full assistant-ui experience to mobile.
+
+Everything you know from the web version carries over:
+
+- **Same runtime, same adapters.** Your `ChatModelAdapter`, AI SDK integration, or LangGraph setup works out of the box. No rewrites.
+- **Native primitives.** `View`, `Pressable`, `Text`, `FlatList` — not web views, not wrappers. Real native components.
+- **Full feature set.** Streaming, tool calls, message branching, thread management, attachments — all there.
+
+Get started in one command:
+
+```sh
+npx assistant-ui@latest create --example with-expo my-chat-app
+```
+
+Or add it to an existing Expo project:
+
+```sh
+npx expo install @assistant-ui/react-native @assistant-ui/react-ai-sdk
+```
+
+The API mirrors the web version closely. If you've built with `@assistant-ui/react`, you already know how to use it.
+
+[Read the docs →](/docs/react-native)
+
+---
+
+## Day 2 — React Ink (Terminal UI)
+
+**Build AI chat for the terminal.**
+
+We're launching `@assistant-ui/react-ink` — terminal UI bindings powered by [Ink](https://github.com/vadimdemedes/ink), the React renderer for CLIs.
+
+Build rich, interactive AI chat interfaces that run in any terminal:
+
+- **Composable primitives.** `ThreadRoot`, `ComposerInput`, `MessageContent` — the same component model, adapted for the terminal.
+- **Markdown rendering.** Ship with `@assistant-ui/react-ink-markdown` for formatted headings, code blocks with syntax highlighting, tables, and lists — all in your terminal.
+- **Tool calls with live feedback.** Built-in `ToolFallback` component shows spinners and formatted JSON output while tools execute.
+- **Shared backend.** Same adapters, same runtime core. Switch platforms without touching your backend code.
+
+Get started:
+
+```sh
+npx assistant-ui@latest create --ink my-chat-app
+```
+
+[Read the docs →](/docs/ink)
+
+---
+
+## Day 3 — Assistant Cloud Redesign
+
+**A new dashboard for managing your AI assistants at scale.**
+
+We've completely redesigned [Assistant Cloud](https://cloud.assistant-ui.com), the hosted backend for assistant-ui. Thread persistence, analytics, user management, and more, all in one place.
+
+<Image
+  src="/images/cloud-dashboard.png"
+  alt="Assistant Cloud dashboard showing analytics, threads, and run tracking"
+  width={1200}
+  height={675}
+  className="mx-auto rounded-xl border drop-shadow"
+/>
+
+### What is Assistant Cloud?
+
+Assistant Cloud gives your assistant-ui app a production-ready backend. Drop in a few lines of config and get:
+
+- **Thread persistence.** Conversations survive page refreshes. Users can pick up where they left off.
+- **Thread list.** A ChatGPT-style sidebar, powered by your data — no extra backend work.
+- **Auto-generated titles.** Every thread gets a title, automatically.
+- **User authorization.** Works with Clerk, Auth0, Supabase, Firebase, or anonymous mode for demos.
+
+### What's new in the redesign
+
+The new dashboard at `cloud.assistant-ui.com` is a full control center for your AI deployments:
+
+- **Analytics dashboard.** Total cost, token usage, run count, average duration — with model distribution charts and usage trends over time.
+- **Thread browser.** Search and inspect every conversation. View full message history, metadata, and timestamps.
+- **User analytics.** Per-user metrics: runs, threads created, tokens consumed, costs incurred.
+- **Run tracking.** Every LLM invocation logged with model, provider, cost, input/output tokens, cached tokens, reasoning tokens, and duration.
+- **Assistant configuration.** Create multiple assistants with different models, system prompts, temperature, and top-p settings.
+- **LLM provider management.** Configure OpenAI, Anthropic, Google, and other providers — with encrypted credential storage.
+- **API key management.** Generate, track, and revoke project API keys.
+- **Auth rules.** Configure JWT validation with JWKS URL, audience, and issuer settings.
+
+### Getting started
+
+Add thread persistence to your existing assistant-ui app:
+
+```sh
+npx assistant-ui@latest cloud
+```
+
+Or integrate directly with the AI SDK using `useCloudChat`:
+
+```sh
+npm install @assistant-ui/cloud-ai-sdk @ai-sdk/react ai
+```
+
+Works with any assistant-ui runtime — AI SDK, LangGraph, or custom backends. No migration required.
+
+[Read the docs →](/docs/cloud) 
+
+[Sign up here →](https://cloud.assistant-ui.com)
+
+---
+
+## Day 4 — <span className="shimmer">tw-shimmer</span>
+
+**Beautiful shimmer effects for Tailwind CSS v4. Zero dependencies, pure CSS.**
+
+We're launching [`tw-shimmer`](https://www.npmjs.com/package/tw-shimmer) — a Tailwind CSS v4 plugin that adds polished shimmer animations for both text and skeleton loaders. No JavaScript runtime, no dependencies — just add a class and go.
+
+- **Sine-eased gradients.** 17 carefully calculated gradient stops following a sine ease-in-out curve. No banding, no harsh edges — just smooth, organic highlights.
+- **OKLCH color mixing.** Perceptually uniform color transitions that look great in any color scheme.
+- **Text + Background.** Shimmer text labels or skeleton placeholders with the same API.
+- **Auto-sizing.** CSS container queries automatically derive speed and spread from container width — no JavaScript measurement needed.
+- **Fully customizable.** Speed, spread, angle, color, duration, and repeat delay — all controllable via Tailwind utilities or CSS variables.
+
+Install and add to your CSS:
+
+```sh
+npm install tw-shimmer
+```
+
+```css title="app/globals.css"
+@import "tailwindcss";
+@import "tw-shimmer";
+```
+
+Then use it:
+
+```html
+<!-- Text shimmer -->
+<span class="shimmer text-foreground/60">Loading...</span>
+
+<!-- Skeleton loader -->
+<div class="shimmer-container flex gap-3">
+  <div class="shimmer-bg bg-muted size-12 rounded-full" />
+  <div class="flex-1 space-y-2">
+    <div class="shimmer-bg bg-muted h-4 w-1/4 rounded" />
+    <div class="shimmer-bg bg-muted h-4 w-full rounded" />
+  </div>
+</div>
+```
+
+[See the interactive demo →](/tw-shimmer)
+
+[Read the docs →](/docs/utilities/tw-shimmer)
+
+---
+
+## Day 5 — Cloud AI SDK
+
+**Add cloud persistence to any AI SDK app. Just change your import.**
+
+We're launching `@assistant-ui/cloud-ai-sdk` — a standalone package that adds full thread persistence and management to any Vercel AI SDK application with a single hook change. No providers, no context, no runtime objects.
+
+### Before
+
+```tsx
+import { useChat } from "@ai-sdk/react";
+
+const { messages, sendMessage } = useChat();
+```
+
+### After
+
+```tsx
+import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
+
+const { messages, sendMessage, threads } = useCloudChat();
+```
+
+That's it. One import change gives you:
+
+- **Automatic thread creation.** Threads are created on the first message — no manual setup.
+- **Full message persistence.** Conversations survive page refreshes. Users pick up where they left off.
+- **Built-in thread list.** `threads.threads` gives you a ChatGPT-style thread sidebar, sorted by recency.
+- **Auto-generated titles.** Every thread gets an AI-generated title after the first response.
+- **Zero config.** Set one env var (`NEXT_PUBLIC_ASSISTANT_BASE_URL`) and you're done.
+- **Works with any UI.** Keep your existing components — `useCloudChat` returns the same interface as `useChat`.
+
+The package exports just two hooks (`useCloudChat` and `useThreads`) and four types. It works independently of assistant-ui's runtime and primitives — any React UI works.
+
+Get started:
+
+```sh
+npm install @assistant-ui/cloud-ai-sdk @ai-sdk/react ai
+```
+
+[Read the docs →](/docs/cloud/ai-sdk)
+
+[See the launch page →](/cloud-ai-sdk)
+
+---
+
+## One runtime, every platform
+
+The big picture: assistant-ui is now a **universal AI chat framework**. Web, mobile, terminal — one codebase for your backend, one set of adapters, one way to register tools. The only thing that changes is the UI layer.
+
+```
+@assistant-ui/react          → Web (React + Radix UI)
+@assistant-ui/react-native   → Mobile (React Native)
+@assistant-ui/react-ink      → Terminal (Ink)
+```
+
+We'll be updating this post throughout the week as we ship new announcements. Follow [@assistant-ui](https://x.com/assistantui) for daily updates or join our [Discord](https://discord.gg/S9dwgCNEFs) for early access.

package/.docs/raw/docs/(docs)/architecture.mdx

@@ -30,7 +30,7 @@ Stylized and functional chat components built on top of Shadcn components that h
 A React state management context for assistant chat. The runtime handles data conversions between the local state and calls to backends and LLMs. We offer different runtime solutions that work with various frameworks like Vercel AI SDK, LangGraph, LangChain, Helicone, local runtime, and an ExternalStore when you need full control of the frontend message state. [You can view the runtimes we support](/docs/runtimes/pick-a-runtime)
 
 ### 3. Assistant Cloud
-A hosted service that enhances your assistant experience with comprehensive thread management and message history. Assistant Cloud stores complete message history, automatically persists threads, supports human-in-the-loop workflows, and integrates with common auth providers to seamlessly allow users to resume conversations at any point. [Cloud Docs](/docs/cloud/overview)
+A hosted service that enhances your assistant experience with comprehensive thread management and message history. Assistant Cloud stores complete message history, automatically persists threads, supports human-in-the-loop workflows, and integrates with common auth providers to seamlessly allow users to resume conversations at any point. [Cloud Docs](/docs/cloud)
 
 
 ### There are three common ways to architect your assistant-ui application:

package/.docs/raw/docs/(docs)/cli.mdx

@@ -45,7 +45,7 @@ Use the `create` command to scaffold a new Next.js project with assistant-ui pre
 npx assistant-ui@latest create [project-directory]
 ```
 
-This command uses `create-next-app` with assistant-ui starter templates.
+This command scaffolds a project from assistant-ui starter templates or examples.
 
 **Available Templates**
 
@@ -77,6 +77,8 @@ Use `--example` to create a project from one of the monorepo examples with full
 | `with-ffmpeg` | FFmpeg video processing tool | `npx assistant-ui create my-app -e with-ffmpeg` |
 | `with-elevenlabs-scribe` | ElevenLabs voice transcription | `npx assistant-ui create my-app -e with-elevenlabs-scribe` |
 | `with-parent-id-grouping` | Message part grouping | `npx assistant-ui create my-app -e with-parent-id-grouping` |
+| `with-expo` | Expo / React Native | `npx assistant-ui create my-app -e with-expo` |
+| `with-react-ink` | Terminal UI chat | `npx assistant-ui create my-app -e with-react-ink` |
 | `with-react-router` | React Router v7 integration | `npx assistant-ui create my-app -e with-react-router` |
 | `with-tanstack` | TanStack Start integration | `npx assistant-ui create my-app -e with-tanstack` |
 
@@ -113,14 +115,17 @@ Arguments:
   project-directory         name of the project directory
 
 Options:
-  -t, --template <template>  template to use (default, minimal, cloud, cloud-clerk, langgraph, mcp)
-  -e, --example <example>    create from an example (e.g., with-langgraph)
-  --use-npm                  explicitly use npm
-  --use-pnpm                 explicitly use pnpm
-  --use-yarn                 explicitly use yarn
-  --use-bun                  explicitly use bun
-  --skip-install             skip installing packages
-  -h, --help                 display help for command
+  -t, --template <template>      template to use (default, minimal, cloud, cloud-clerk, langgraph, mcp)
+  -e, --example <example>        create from an example (e.g., with-langgraph)
+  -p, --preset <name-or-url>     preset name or URL (e.g., chatgpt)
+  --native                       create an Expo / React Native project
+  --ink                          create a React Ink terminal project
+  --use-npm                      explicitly use npm
+  --use-pnpm                     explicitly use pnpm
+  --use-yarn                     explicitly use yarn
+  --use-bun                      explicitly use bun
+  --skip-install                 skip installing packages
+  -h, --help                     display help for command
 ```
 
 ## add

package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx

@@ -3,6 +3,10 @@ title: makeAssistantToolUI
 description: Register custom UI components to render tool executions and their status.
 ---
 
+<Callout type="warn">
+  `makeAssistantToolUI` is deprecated. Use the `Tools()` API instead. See the
+  [Tools guide](/docs/guides/tools) for the recommended approach.
+</Callout>
 
 The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.
 
@@ -81,7 +85,7 @@ const MyToolUI = makeAssistantToolUI({
               name: "status",
               type: "ToolCallMessagePartStatus",
               description:
-                'The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"',
+                'The execution status object with a type property: "running", "complete", "incomplete", or "requires-action"',
             },
             {
               name: "addResult",
@@ -115,7 +119,7 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react";
 const GetWeatherUI = makeAssistantToolUI({
   toolName: "get_weather",
   render: ({ args, result, status }) => {
-    if (status.type === "requires_action")
+    if (status.type === "requires-action")
       return <p>Getting weather for {args.location}...</p>;
     if (status.type === "running") return <p>Loading...</p>;
     if (status.type === "incomplete" && status.reason === "error")
@@ -127,8 +131,9 @@ const GetWeatherUI = makeAssistantToolUI({
 });
 
 function App() {
+  const runtime = /* your runtime setup */;
   return (
-    <AssistantRuntimeProvider>
+    <AssistantRuntimeProvider runtime={runtime}>
       {/* ...your other components */}
       <GetWeatherUI />
     </AssistantRuntimeProvider>

package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx

@@ -3,6 +3,10 @@ title: makeAssistantTool
 description: Create React components that provide reusable tools to the assistant.
 ---
 
+<Callout type="warn">
+  `makeAssistantTool` is deprecated. Use the `Tools()` API instead. See the
+  [Tools guide](/docs/guides/tools) for the recommended approach.
+</Callout>
 
 `makeAssistantTool` creates a React component that provides a tool to the assistant. This is useful for defining reusable tools that can be composed into your application.
 
@@ -121,7 +125,7 @@ function Form() {
               name: "status",
               type: "ToolCallMessagePartStatus",
               description:
-                'The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"',
+                'The execution status object with a type property: "running", "complete", "incomplete", or "requires-action"',
             },
             {
               name: "addResult",

package/.docs/raw/docs/(docs)/copilots/{make-assistant-readable.mdx → make-assistant-visible.mdx}

@@ -21,6 +21,11 @@ const ReadableButton = makeAssistantVisible(Button);
 const ClickableButton = makeAssistantVisible(Button, {
   clickable: true, // Enables the click tool
 });
+
+// With editable configuration
+const EditableInput = makeAssistantVisible(Input, {
+  editable: true, // Enables the edit tool
+});
 ```
 
 ## API Reference
@@ -30,6 +35,7 @@ const ClickableButton = makeAssistantVisible(Button, {
 - `Component`: The base React component to enhance
 - `config`: Optional configuration object
   - `clickable`: When true, enables the assistant to programmatically click the component
+  - `editable`: When true, enables the assistant to programmatically set the value of an input or textarea within the component
 
 ### Behavior
 
@@ -37,13 +43,14 @@ The HOC will:
 
 1. Make the component's HTML structure available to the assistant via the system context
 2. Optionally provide a `click` tool if `clickable` is true
-3. Handle nested readable components (only the outermost component's HTML is provided)
-4. Forward refs and maintain component props
+3. Optionally provide an `edit` tool if `editable` is true, which sets the value of an `<input>` or `<textarea>` inside the component
+4. Handle nested readable components (only the outermost component's HTML is provided)
+5. Forward refs and maintain component props
 
 ## Example
 
 ```tsx
-// Create a readable form input
+// Create a readable form input that the assistant can also edit
 const Input = ({ label, ...props }) => (
   <div>
     <label>{label}</label>
@@ -51,12 +58,12 @@ const Input = ({ label, ...props }) => (
   </div>
 );
 
-const ReadableInput = makeAssistantVisible(Input);
+const EditableInput = makeAssistantVisible(Input, { editable: true });
 
 // Use in your component
 function Form() {
   return (
-    <ReadableInput label="Email" type="email" placeholder="Enter your email" />
+    <EditableInput label="Email" type="email" placeholder="Enter your email" />
   );
 }
 ```
@@ -69,4 +76,6 @@ When a component is made readable:
 - The component's `outerHTML` is provided as system context
 - If `clickable` is true, a unique `data-click-id` is added and a `click` tool is provided
 - The click tool uses `querySelector` and simulates a click event
+- If `editable` is true, a unique `data-edit-id` is added and an `edit` tool is provided
+- The edit tool uses `querySelector` to find an `<input>` or `<textarea>` and sets its value, dispatching `input` and `change` events
 - All props and refs are properly forwarded to maintain component functionality

package/.docs/raw/docs/(docs)/copilots/model-context.mdx

@@ -79,20 +79,20 @@ import { useAui, tool } from "@assistant-ui/react";
 import { useEffect } from "react";
 import { z } from "zod";
 
+// Define tool outside the component (no runtime dependencies)
+const myTool = tool({
+  parameters: z.object({
+    query: z.string(),
+  }),
+  execute: async ({ query }) => {
+    const result = await searchDatabase(query);
+    return { result };
+  },
+});
+
 function MyComponent() {
   const aui = useAui();
 
-  // Define tool using the tool() helper
-  const myTool = tool({
-    parameters: z.object({
-      query: z.string(),
-    }),
-    execute: async ({ query }) => {
-      const result = await searchDatabase(query);
-      return { result };
-    },
-  });
-
   useEffect(() => {
     // Register context provider
     return aui.modelContext().register({

package/.docs/raw/docs/(docs)/copilots/motivation.mdx

@@ -161,7 +161,7 @@ function SmartTransactionHistory({ userProfile }) {
         `,
       }),
     });
-  }, [api, userProfile]);
+  }, [aui, userProfile]);
 
   // Previous components...
 }
@@ -189,7 +189,7 @@ This creates a more intuitive and safer banking experience while maintaining the
 
 Learn more about each API:
 
-- [makeAssistantVisible](make-assistant-readable) for component understanding
+- [makeAssistantVisible](make-assistant-visible) for component understanding
 - [makeAssistantTool](make-assistant-tool) for transaction analysis
 - [useAssistantInstructions](use-assistant-instructions) for behavior guidance
 - [Model Context](model-context) for dynamic context management

package/.docs/raw/docs/(docs)/devtools.mdx

@@ -4,7 +4,7 @@ description: Inspect runtime state, context, and events in the browser.
 ---
 
 
-Hey, the assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to `console.log`. It's an easy way to see how data flows to the assistant-ui's runtime layer.
+The assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to `console.log`. It's an easy way to see how data flows to the assistant-ui's runtime layer.
 
 ![Screenshot of the DevTools UI showing logs and state panels](../../../../../.github/assets/devtoolsui.png)
 
@@ -27,8 +27,9 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { DevToolsModal } from "@assistant-ui/react-devtools";
 
 export function AssistantApp() {
+  const runtime = /* your runtime setup */;
   return (
-    <AssistantRuntimeProvider>
+    <AssistantRuntimeProvider runtime={runtime}>
       <DevToolsModal />
       {/* ...your assistant-ui... */}
     </AssistantRuntimeProvider>

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

@@ -157,7 +157,7 @@ class VisionImageAdapter implements AttachmentAdapter {
       type: "image",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -224,7 +224,7 @@ class PDFAttachmentAdapter implements AttachmentAdapter {
       type: "document",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -360,7 +360,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 +372,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 +382,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 +436,6 @@ class ValidatedImageAdapter implements AttachmentAdapter {
         status: {
           type: "incomplete",
           reason: "error",
-          error: new Error("File size exceeds 5MB limit"),
         },
       };
     }
@@ -456,7 +455,6 @@ class ValidatedImageAdapter implements AttachmentAdapter {
         status: {
           type: "incomplete",
           reason: "error",
-          error,
         },
       };
     }
@@ -467,7 +465,7 @@ class ValidatedImageAdapter implements AttachmentAdapter {
       type: "image",
       name: file.name,
       file,
-      status: { type: "running" },
+      status: { type: "requires-action", reason: "composer-send" },
     };
   }
 
@@ -514,7 +512,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 +527,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
@@ -552,4 +550,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>
 ```