@assistant-ui/mcp-docs-server 0.1.20 → 0.1.22

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

@@ -3,7 +3,6 @@ title: makeAssistantToolUI
 description: Register custom UI components to render tool executions and their status.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.
 

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

@@ -3,7 +3,6 @@ title: makeAssistantTool
 description: Create React components that provide reusable tools to the assistant.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 `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.
 

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

@@ -3,7 +3,6 @@ title: DevTools
 description: Inspect runtime state, context, and events in the browser.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 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.
 

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

@@ -4,7 +4,6 @@ description: Let users attach files, images, and documents to messages.
 ---
 
 import { AttachmentSample } from "@/components/docs/samples/attachment";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 Enable users to attach files to their messages, enhancing conversations with images, documents, and other content.
 

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

@@ -0,0 +1,162 @@
+---
+title: Chain of Thought
+description: Group reasoning and tool calls into a collapsible accordion UI.
+---
+
+LLMs often produce reasoning steps and tool calls in succession. Chain of Thought lets you visually group these consecutive parts into a single collapsible accordion, giving users a clean "thinking" UI.
+
+## Overview
+
+When a model like OpenAI's `o4-mini` responds, it may emit a sequence of reasoning tokens and tool calls before producing its final text answer. By default, these parts render individually. `ChainOfThoughtPrimitive` groups consecutive reasoning + tool-call parts together and renders them through a single component.
+
+Key benefits:
+
+- **Cleaner UI** — Collapse intermediate steps behind a "Thinking" toggle
+- **Better context** — Users see that reasoning and tool calls are related
+- **Built-in accordion** — Expand/collapse with a single click; collapsed by default
+
+## Quick Start
+
+<Steps>
+  <Step>
+
+### Pass a ChainOfThought component to MessagePrimitive.Parts
+
+`MessagePrimitive.Parts` accepts a `ChainOfThought` component. When provided, consecutive reasoning and tool-call parts are automatically grouped and rendered through it.
+
+```tsx
+import {
+  AuiIf,
+  ChainOfThoughtPrimitive,
+  MessagePrimitive,
+} from "@assistant-ui/react";
+import type { FC } from "react";
+
+const Reasoning: FC<{ text: string }> = ({ text }) => {
+  return (
+    <p className="whitespace-pre-wrap px-4 py-2 text-muted-foreground text-sm italic">
+      {text}
+    </p>
+  );
+};
+
+const ChainOfThought: FC = () => {
+  return (
+    <ChainOfThoughtPrimitive.Root className="my-2 rounded-lg border">
+      <ChainOfThoughtPrimitive.AccordionTrigger className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 font-medium text-sm hover:bg-muted/50">
+        Thinking
+      </ChainOfThoughtPrimitive.AccordionTrigger>
+      <AuiIf condition={({ chainOfThought }) => !chainOfThought.collapsed}>
+        <ChainOfThoughtPrimitive.Parts
+          components={{ Reasoning, tools: { Fallback: ToolFallback } }}
+        />
+      </AuiIf>
+    </ChainOfThoughtPrimitive.Root>
+  );
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root>
+      <MessagePrimitive.Parts
+        components={{
+          Text: MarkdownText,
+          ChainOfThought, // groups reasoning + tool parts
+        }}
+      />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+  <Step>
+
+### Use a reasoning model
+
+Chain of Thought is most useful with models that produce reasoning tokens (e.g. OpenAI `o4-mini`). Here's an example backend route using the Vercel AI SDK:
+
+```tsx title="app/api/chat/route.ts"
+import { openai } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages } from "ai";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: openai("o4-mini"),
+    messages: await convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+  </Step>
+</Steps>
+
+## API Reference
+
+### ChainOfThoughtPrimitive.Root
+
+Container element for the chain of thought group. Renders a `<div>`.
+
+### ChainOfThoughtPrimitive.AccordionTrigger
+
+A button that toggles the collapsed/expanded state. Collapsed by default.
+
+### ChainOfThoughtPrimitive.Parts
+
+Renders the grouped parts when expanded (nothing when collapsed).
+
+```tsx
+<AuiIf condition={({ chainOfThought }) => !chainOfThought.collapsed}>
+  <ChainOfThoughtPrimitive.Parts
+    components={{
+      Reasoning,
+      tools: { Fallback: ToolFallback },
+      Layout: ({ children }) => (
+        <div className="border-l-2 border-muted pl-4">{children}</div>
+      ),
+    }}
+  />
+</AuiIf>
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `components.Reasoning` | `FC<{ text: string }>` | Component to render reasoning parts |
+| `components.tools.Fallback` | `ToolCallMessagePartComponent` | Fallback component for tool-call parts |
+| `components.Layout` | `ComponentType<PropsWithChildren>` | Wrapper component around each rendered part when expanded |
+
+## Reading Collapsed State
+
+Use `AuiIf` to conditionally render based on the accordion state:
+
+```tsx
+import { AuiIf, ChainOfThoughtPrimitive } from "@assistant-ui/react";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+
+const ChainOfThoughtAccordionTrigger = () => {
+  return (
+    <ChainOfThoughtPrimitive.AccordionTrigger className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm">
+      <AuiIf condition={({ chainOfThought }) => chainOfThought.collapsed}>
+        <ChevronRightIcon className="size-4" />
+      </AuiIf>
+      <AuiIf condition={({ chainOfThought }) => !chainOfThought.collapsed}>
+        <ChevronDownIcon className="size-4" />
+      </AuiIf>
+      Thinking
+    </ChainOfThoughtPrimitive.AccordionTrigger>
+  );
+};
+```
+
+## Full Example
+
+See the complete [with-chain-of-thought example](https://github.com/Yonom/assistant-ui/tree/main/examples/with-chain-of-thought) for a working implementation with tool calls and reasoning.
+
+## Related Guides
+
+- [Generative UI](/docs/guides/tool-ui) — Custom UI for tool calls
+- [Tools](/docs/guides/tools) — Defining and using tools

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

@@ -57,7 +57,7 @@ npx assistant-ui@latest create -t mcp
     href="/docs/installation"
   />
   <Card
-    title="AI-Assisted Development"
+    title="Agent Skills"
     description="Use AI tools to build with assistant-ui faster"
     href="/docs/llm"
   />

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

@@ -3,7 +3,6 @@ title: Installation
 description: Get assistant-ui running in 5 minutes with npm and your first chat component.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Quick Start
 

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

@@ -1,5 +1,5 @@
 ---
-title: "AI-Assisted Development"
+title: "Agent Skills"
 description: Use AI tools to build with assistant-ui faster. AI-accessible documentation, Claude Code skills, and MCP integration.
 ---
 

package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx

@@ -3,7 +3,6 @@ title: <AssistantRuntimeProvider />
 description: Root provider that connects your runtime to assistant-ui components.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AssistantRuntimeProvider } from "@/generated/typeDocs";
 
 The `AssistantRuntimeProvider` provides data and APIs used by assistant-ui components.

package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx

@@ -3,7 +3,6 @@ title: <TextMessagePartProvider />
 description: Context provider for reusing text components outside of message content.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AssistantRuntimeProvider } from "@/generated/typeDocs";
 
 The `TextMessagePartProvider` provides data and APIs for `TextMessagePart` components.

package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx

@@ -5,7 +5,6 @@ description: Hooks for connecting to data stream protocol endpoints and Assistan
 
 Data Stream protocol integration for assistant-ui.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## API Reference
 
@@ -238,4 +237,4 @@ By default, filters out disabled tools and backend-only tools. Use the `filter`
 const allTools = toToolsJSONSchema(tools, {
   filter: () => true, // Include all tools
 });
-```
+```

package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx

@@ -5,7 +5,6 @@ description: React Hook Form integration for AI-assisted form filling.
 
 A React Hook Form integration for @assistant-ui.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## API Reference
 

package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx

@@ -5,7 +5,6 @@ description: Vercel AI SDK v5 integration with chat runtime hooks and transport
 
 Vercel AI SDK integration for assistant-ui.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 <Callout type="info">
   This package provides integration with AI SDK v5. For AI SDK v4, see the [AI

package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx

@@ -4,9 +4,6 @@ title: ActionBarMorePrimitive
 
 A dropdown menu for additional actions that don't fit in the main action bar.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";
-import { Code } from "@radix-ui/themes";
 
 ## Anatomy
 
@@ -97,18 +94,10 @@ This primitive renders a `<button>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-state]",
-      values: <Code>"open" | "closed"</Code>,
-    },
-    {
-      attribute: "[data-disabled]",
-      values: "Present when disabled",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-state]` | `"open" \| "closed"` |
+| `[data-disabled]` | Present when disabled |
 
 ### Content
 
@@ -154,22 +143,11 @@ This primitive renders a `<div>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-state]",
-      values: <Code>"open" | "closed"</Code>,
-    },
-    {
-      attribute: "[data-side]",
-      values: <Code>"top" | "right" | "bottom" | "left"</Code>,
-    },
-    {
-      attribute: "[data-align]",
-      values: <Code>"start" | "center" | "end"</Code>,
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-state]` | `"open" \| "closed"` |
+| `[data-side]` | `"top" \| "right" \| "bottom" \| "left"` |
+| `[data-align]` | `"start" \| "center" \| "end"` |
 
 Refer to Radix UI's Documentation for [DropdownMenu.Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) for more details.
 
@@ -205,18 +183,10 @@ This primitive renders a `<div>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-disabled]",
-      values: "Present when disabled",
-    },
-    {
-      attribute: "[data-highlighted]",
-      values: "Present when highlighted",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-disabled]` | Present when disabled |
+| `[data-highlighted]` | Present when highlighted |
 
 Refer to Radix UI's Documentation for [DropdownMenu.Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) for more details.
 
@@ -323,5 +293,3 @@ const MoreActionsWithHooks = () => {
   );
 };
 ```
-
-

package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx

@@ -5,9 +5,6 @@ description: Buttons for message actions like copy, edit, reload, speak, and fee
 
 Buttons to interact with the message.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";
-import { Code } from "@radix-ui/themes";
 
 ## Anatomy
 
@@ -93,14 +90,9 @@ This primitive renders a `<div>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-floating]",
-      values: "Present when floating",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-floating]` | Present when floating |
 
 ### Edit
 
@@ -154,14 +146,9 @@ This primitive renders a `<button>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-copied]",
-      values: "Present when the message was recently copied.",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-copied]` | Present when the message was recently copied. |
 
 #### Copied state
 
@@ -232,14 +219,9 @@ This primitive renders a `<button>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-submitted]",
-      values: "Present when positive feedback was submitted.",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-submitted]` | Present when positive feedback was submitted. |
 
 ### Feedback Negative
 
@@ -256,14 +238,9 @@ This primitive renders a `<button>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-submitted]",
-      values: "Present when negative feedback was submitted.",
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-submitted]` | Present when negative feedback was submitted. |
 
 ### ExportMarkdown
 

package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx

@@ -5,7 +5,6 @@ description: Conditional rendering component based on thread, message, or compos
 
 Conditionally render children based on assistant state.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx

@@ -5,9 +5,6 @@ description: A popover chat interface for floating assistant UI in the corner of
 
 A modal chat UI usually displayed in the bottom right corner of the screen.
 
-import { Code } from "@radix-ui/themes";
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";
 
 ## Anatomy
 
@@ -79,14 +76,9 @@ This primitive renders a `<button>` element unless `asChild` is set.
   ]}
 />
 
-<DataAttributesTable
-  data={[
-    {
-      attribute: "[data-state]",
-      values: <Code>"open" | "closed"</Code>,
-    },
-  ]}
-/>
+| Data attribute | Values |
+| --- | --- |
+| `[data-state]` | `"open" \| "closed"` |
 
 ### Anchor
 

package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx

@@ -5,9 +5,6 @@ description: Components for displaying and managing file attachments in messages
 
 Buttons to interact with attachments.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";
-import { Code } from "@radix-ui/themes";
 
 <Callout>
   **Dual Use!** Attachments can appear in both messages and composers.

package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx

@@ -5,7 +5,6 @@ description: Navigate between conversation branches with previous/next controls.
 
 View and switch between branches.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx

@@ -6,9 +6,6 @@ description: Primitives for the text input, send button, and attachments.
 The user interface to add new messages or edit existing ones.
 
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { KeyboardTable } from "@/components/docs/tables/KeyboardTable";
-import { Code } from "@radix-ui/themes";
 
 <Callout>
   **Dual Use!** A Composer placed directly inside a `Thread` will compose new
@@ -88,18 +85,10 @@ This primitive renders a `<textarea>` element unless `asChild` is set.
 
 #### Keyboard Shortcuts
 
-<KeyboardTable
-  data={[
-    {
-      keys: ["Enter"],
-      description: "Sends the message.",
-    },
-    {
-      keys: ["Escape"],
-      description: "Sends a cancel action.",
-    },
-  ]}
-/>
+| Key | Description |
+| --- | --- |
+| <Kbd>Enter</Kbd> | Sends the message. |
+| <Kbd>Escape</Kbd> | Sends a cancel action. |
 
 ### Send
 
@@ -126,7 +115,7 @@ This primitive renders a `<button>` element unless `asChild` is set.
 
 Sends a cancel action.
 
-In edit composers, this action exits the edit mode.  
+In edit composers, this action exits the edit mode.
 In thread composers, this action stops the current run.
 
 This primitive renders a `<button>` element unless `asChild` is set.

package/.docs/raw/docs/(reference)/api-reference/primitives/composition.mdx

@@ -3,7 +3,6 @@ title: Composition
 description: How to compose primitives with custom components using asChild.
 ---
 
-import { Code } from "@radix-ui/themes";
 
 `assistant-ui` primitives are composable. This means that all props are forwarded, classes are merged, and event handlers are chained.
 

package/.docs/raw/docs/(reference)/api-reference/primitives/error.mdx

@@ -5,7 +5,6 @@ description: Components for displaying error messages in the chat interface.
 
 A component for displaying error messages in the UI.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx

@@ -3,7 +3,6 @@ title: MessagePartPrimitive
 description: Primitives for text, images, tool calls, and other message content.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import {
   MessagePartRuntime,
   TextMessagePartState,
@@ -11,7 +10,7 @@ import {
   ToolCallMessagePartState,
 } from "@/generated/typeDocs";
 
-Each message can have any number of message parts.  
+Each message can have any number of message parts.
 Message parts are usually one of text, reasoning, audio or tool-call.
 
 ## Message part Types

package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx

@@ -5,7 +5,6 @@ description: Components for rendering message content, parts, and attachments.
 
 A single message in a conversation. Messages may consist of multiple parts.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx

@@ -2,7 +2,6 @@
 title: SuggestionPrimitive
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 Primitives for rendering individual suggestions. These primitives must be used within a suggestion context provided by `ThreadPrimitive.Suggestions`.
 

package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item-more.mdx

@@ -5,7 +5,6 @@ description: Dropdown menu for additional thread actions like archive and delete
 
 A dropdown menu for displaying additional actions on a thread list item. Built on top of [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx

@@ -5,7 +5,6 @@ description: Individual thread item with title, archive, and delete controls.
 
 A single thread item within a thread list.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 
@@ -158,4 +157,4 @@ const ArchivedThreadListItem = () => {
     </ThreadListItemPrimitive.Root>
   );
 };
-```
+```

package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx

@@ -5,7 +5,6 @@ description: Display and manage multiple conversation threads with create and ar
 
 Displays a list of conversation threads.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 
@@ -126,4 +125,4 @@ Renders a single thread list item at the specified index.
       description: "The components to render for the thread list item.",
     },
   ]}
-/>
+/>

package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx

@@ -5,7 +5,6 @@ description: Primitives for the message list, viewport, and welcome screen.
 
 A conversation between a user and an assistant.
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Anatomy
 

package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx

@@ -3,7 +3,6 @@ title: AssistantRuntime
 description: Root runtime for managing threads, tool UIs, and assistant state.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AssistantRuntime, AssistantToolUIsState } from "@/generated/typeDocs";
 
 The `AssistantRuntime` is the root runtime of the application.