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

package/.docs/organized/code-examples/with-ag-ui.md

@@ -419,8 +419,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-ai-sdk-v6.md

@@ -299,7 +299,7 @@ export default nextConfig;
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
@@ -312,8 +312,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-assistant-transport.md

@@ -427,8 +427,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-chain-of-thought.md

@@ -0,0 +1,598 @@
+# Example: with-chain-of-thought
+
+## app/api/chat/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import {
+  streamText,
+  convertToModelMessages,
+  tool,
+  stepCountIs,
+  zodSchema,
+} from "ai";
+import type { UIMessage } from "ai";
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import { z } from "zod";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    tools,
+  }: { messages: UIMessage[]; tools: Record<string, any> } = await req.json();
+
+  const result = streamText({
+    // Use a reasoning model to showcase chain of thought
+    model: openai("o4-mini"),
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
+    tools: {
+      // Frontend tools registered via makeAssistantTool (e.g. execute_js)
+      ...frontendTools(tools),
+
+      // Backend-only tools
+      get_current_weather: tool({
+        description: "Get the current weather for a city",
+        inputSchema: zodSchema(
+          z.object({
+            city: z.string(),
+          }),
+        ),
+        execute: async ({ city }) => {
+          return `The weather in ${city} is sunny, 72°F`;
+        },
+      }),
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+```
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../packages/ui/src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Chain of Thought Example",
+  description: "Example using ChainOfThoughtPrimitive with AI SDK",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="h-dvh">{children}</body>
+    </html>
+  );
+}
+
+```
+
+## app/MyThread.tsx
+
+```tsx
+"use client";
+
+import { type FC, type PropsWithChildren, useState } from "react";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Button } from "@/components/ui/button";
+import {
+  AuiIf,
+  ChainOfThoughtPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  SquareIcon,
+} from "lucide-react";
+
+export const MyThread: FC = () => {
+  return (
+    <ThreadPrimitive.Root
+      className="flex h-full flex-col bg-background"
+      style={{ ["--thread-max-width" as string]: "44rem" }}
+    >
+      <ThreadPrimitive.Viewport className="flex flex-1 flex-col overflow-y-scroll scroll-smooth px-4 pt-8">
+        <ThreadPrimitive.Messages
+          components={{ UserMessage, AssistantMessage }}
+        />
+
+        <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 pb-4">
+          <ThreadPrimitive.ScrollToBottom asChild>
+            <TooltipIconButton
+              tooltip="Scroll to bottom"
+              variant="outline"
+              className="absolute -top-12 self-center rounded-full p-4 disabled:invisible"
+            >
+              <ArrowDownIcon />
+            </TooltipIconButton>
+          </ThreadPrimitive.ScrollToBottom>
+          <Composer />
+        </ThreadPrimitive.ViewportFooter>
+      </ThreadPrimitive.Viewport>
+    </ThreadPrimitive.Root>
+  );
+};
+
+const Text: FC<{ text: string }> = ({ text }) => {
+  return <p>{text}</p>;
+};
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="mx-auto w-full max-w-(--thread-max-width) py-3">
+      <div className="flex justify-end">
+        <div className="max-w-[80%] rounded-2xl bg-primary px-4 py-2 text-primary-foreground">
+          <MessagePrimitive.Parts components={{ Text }} />
+        </div>
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="mx-auto w-full max-w-(--thread-max-width) py-3">
+      <div className="flex flex-col gap-2 px-2 leading-relaxed">
+        {/*
+          The ChainOfThought component is passed to MessagePrimitive.Parts.
+          When set, consecutive reasoning + tool-call parts are grouped together
+          and rendered through this component instead of individually.
+        */}
+        <MessagePrimitive.Parts
+          components={{
+            Text: MarkdownText,
+            ChainOfThought,
+          }}
+        />
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+/**
+ * ChainOfThought component — rendered by MessagePrimitive.Parts when it
+ * encounters consecutive reasoning + tool-call parts.
+ *
+ * Uses ChainOfThoughtPrimitive.Root, AccordionTrigger, and Parts to create
+ * a collapsible accordion that groups all "thinking" steps together.
+ */
+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">
+        <AuiIf condition={({ chainOfThought }) => chainOfThought.collapsed}>
+          <ChevronRightIcon className="size-4 shrink-0" />
+        </AuiIf>
+        <AuiIf condition={({ chainOfThought }) => !chainOfThought.collapsed}>
+          <ChevronDownIcon className="size-4 shrink-0" />
+        </AuiIf>
+        Thinking
+      </ChainOfThoughtPrimitive.AccordionTrigger>
+      <AuiIf condition={({ chainOfThought }) => !chainOfThought.collapsed}>
+        <ChainOfThoughtPrimitive.Parts
+          components={{
+            Reasoning,
+            tools: { Fallback: ToolFallback },
+            Layout: PartLayout,
+          }}
+        />
+      </AuiIf>
+    </ChainOfThoughtPrimitive.Root>
+  );
+};
+
+const PartLayout: FC<PropsWithChildren> = ({ children }) => {
+  const partType = useAuiState(({ part }) => part.type);
+  const [open, setOpen] = useState(true);
+
+  const label = partType === "reasoning" ? "Thinking" : "Taking action";
+
+  return (
+    <div className="border-t">
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center gap-2 px-4 py-1.5 text-muted-foreground text-xs hover:bg-muted/50"
+        onClick={() => setOpen((o) => !o)}
+      >
+        {open ? (
+          <ChevronDownIcon className="size-3" />
+        ) : (
+          <ChevronRightIcon className="size-3" />
+        )}
+        {label}
+      </button>
+      {open && children}
+    </div>
+  );
+};
+
+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 Composer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20">
+      <ComposerPrimitive.Input
+        placeholder="Send a message..."
+        className="mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground"
+        rows={1}
+        autoFocus
+      />
+      <div className="relative mx-2 mb-2 flex items-center justify-end">
+        <AuiIf condition={({ thread }) => !thread.isRunning}>
+          <ComposerPrimitive.Send asChild>
+            <TooltipIconButton
+              tooltip="Send"
+              side="bottom"
+              variant="default"
+              size="icon"
+              className="size-8 rounded-full"
+            >
+              <ArrowUpIcon className="size-4" />
+            </TooltipIconButton>
+          </ComposerPrimitive.Send>
+        </AuiIf>
+        <AuiIf condition={({ thread }) => thread.isRunning}>
+          <ComposerPrimitive.Cancel asChild>
+            <Button
+              type="button"
+              variant="default"
+              size="icon"
+              className="size-8 rounded-full"
+            >
+              <SquareIcon className="size-3 fill-current" />
+            </Button>
+          </ComposerPrimitive.Cancel>
+        </AuiIf>
+      </div>
+    </ComposerPrimitive.Root>
+  );
+};
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import {
+  AssistantRuntimeProvider,
+  makeAssistantTool,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { z } from "zod";
+import { MyThread } from "./MyThread";
+import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
+
+const ExecuteJsTool = makeAssistantTool({
+  toolName: "execute_js",
+  description: "Execute JavaScript code and return the result",
+  parameters: z.object({
+    code: z.string().describe("The JavaScript code to execute"),
+  }),
+  execute: async ({ code }) => {
+    try {
+      // biome-ignore lint/security/noGlobalEval: example code
+      const result = eval(code);
+      return { success: true, result: String(result) };
+    } catch (e) {
+      return { success: false, error: String(e) };
+    }
+  },
+  render: ({ args, result, status }) => (
+    <div className="my-2 rounded-lg border bg-muted/30 p-4 text-sm">
+      <p className="mb-1 font-semibold">execute_js</p>
+      <pre className="whitespace-pre-wrap rounded bg-background p-2 font-mono text-xs">
+        {args.code}
+      </pre>
+      {status.type !== "running" && result && (
+        <div className="mt-2 border-t pt-2">
+          <p className="font-semibold text-muted-foreground">
+            {result.success ? "Result:" : "Error:"}
+          </p>
+          <pre className="whitespace-pre-wrap font-mono text-xs">
+            {result.success ? result.result : result.error}
+          </pre>
+        </div>
+      )}
+    </div>
+  ),
+});
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ExecuteJsTool />
+      <div className="h-full">
+        <MyThread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
+## components.json
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
+  }
+}
+
+```
+
+## lib/utils.ts
+
+```typescript
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+```
+
+## next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-chain-of-thought",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.25",
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "ai": "^6.0.73",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/assistant-ui/*": [
+        "../../packages/ui/src/components/assistant-ui/*"
+      ],
+      "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"],
+      "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
+      "assistant-stream": ["../../packages/assistant-stream/src"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+

package/.docs/organized/code-examples/with-cloud.md

@@ -326,7 +326,7 @@ export default nextConfig;
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
@@ -338,8 +338,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-custom-thread-list.md

@@ -413,7 +413,7 @@ export default nextConfig;
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "assistant-stream": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -427,8 +427,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-elevenlabs-scribe.md

@@ -548,23 +548,23 @@ export default nextConfig;
   "type": "module",
   "dependencies": {
     "@ai-sdk/openai": "^3.0.25",
-    "@ai-sdk/react": "^3.0.71",
+    "@ai-sdk/react": "^3.0.75",
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:^",
     "@assistant-ui/ui": "workspace:*",
-    "@elevenlabs/client": "^0.13.1",
+    "@elevenlabs/client": "^0.14.0",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/postcss": "^4.1.18",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
-    "motion": "^12.31.0",
+    "motion": "^12.33.0",
     "next": "^16.1.6",
     "postcss": "^8.5.6",
     "react": "^19.2.4",
@@ -575,8 +575,8 @@ export default nextConfig;
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"

package/.docs/organized/code-examples/with-external-store.md

@@ -323,8 +323,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-ffmpeg.md

@@ -527,7 +527,7 @@ export default nextConfig;
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
@@ -540,8 +540,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-langgraph.md

@@ -807,7 +807,7 @@ export default nextConfig;
     "@assistant-ui/react-langgraph": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.5.5",
+    "@langchain/langgraph-sdk": "^1.5.6",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -824,8 +824,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-parent-id-grouping.md

@@ -483,8 +483,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-react-hook-form.md

@@ -540,7 +540,7 @@ export default nextConfig;
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.69",
+    "ai": "^6.0.73",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
@@ -548,15 +548,15 @@ export default nextConfig;
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.1",
-    "react-resizable-panels": "^4.5.9",
+    "react-resizable-panels": "^4.6.0",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-react-router.md

@@ -772,7 +772,7 @@ export default function Home() {
     "eventsource-parser": "^3.0.6",
     "isbot": "^5.1.34",
     "lucide-react": "^0.563.0",
-    "openai": "^6.17.0",
+    "openai": "^6.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router": "7.13.0",
@@ -783,8 +783,8 @@ export default function Home() {
   "devDependencies": {
     "@react-router/dev": "7.13.0",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",

package/.docs/organized/code-examples/with-store.md

@@ -492,8 +492,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

package/.docs/organized/code-examples/with-tanstack.md

@@ -67,13 +67,13 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-router": "^1.158.0",
-    "@tanstack/react-start": "^1.158.0",
+    "@tanstack/react-router": "^1.158.1",
+    "@tanstack/react-start": "^1.158.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
     "nitro": "^3.0.1-alpha.2",
-    "openai": "^6.17.0",
+    "openai": "^6.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "remark-gfm": "^4.0.1",
@@ -83,8 +83,8 @@
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",

package/.docs/organized/code-examples/with-tap-runtime.md

@@ -619,8 +619,8 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

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)/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -33,12 +33,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.3",
+    "@modelcontextprotocol/sdk": "^1.26.0",
     "gray-matter": "^4.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@types/node": "^25.2.0",
+    "@types/node": "^25.2.1",
     "tsx": "^4.21.0",
     "vitest": "^4.0.18",
     "@assistant-ui/x-buildutils": "0.0.1"