@assistant-ui/mcp-docs-server 0.1.13 → 0.1.14

package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx

@@ -29,6 +29,12 @@ Once the setup is complete, navigate into your new Mastra project directory (the
 cd your-mastra-server-directory # Replace with the actual directory name
 ```
 
+In the next steps you'll need to use the `@mastra/ai-sdk` package. Add it to your Mastra project:
+
+```bash
+npm install @mastra/ai-sdk@latest
+```
+
 You now have a basic Mastra server project ready.
 
 <Callout title="API Keys">
@@ -47,10 +53,9 @@ You now have a basic Mastra server project ready.
 
 Next, let's define an agent within your Mastra server project. We'll create a `chefAgent` similar to the one used in the full-stack guide.
 
-Open or create the agent file (e.g., `src/agents/chefAgent.ts` within your Mastra project) and add the following code:
+Open or create the agent file (e.g., `src/mastra/agents/chefAgent.ts` within your Mastra project) and add the following code:
 
-```typescript title="src/agents/chefAgent.ts"
-import { openai } from "@ai-sdk/openai";
+```typescript title="src/mastra/agents/chefAgent.ts"
 import { Agent } from "@mastra/core/agent";
 
 export const chefAgent = new Agent({
@@ -58,7 +63,7 @@ export const chefAgent = new Agent({
   instructions:
     "You are Michel, a practical and experienced home chef. " +
     "You help people cook with whatever ingredients they have available.",
-  model: openai("gpt-4o-mini"),
+  model: "openai/gpt-4o-mini",
 });
 ```
 
@@ -70,11 +75,11 @@ This defines the agent's behavior, but it's not yet active in the Mastra server.
 
 ### Register the Agent
 
-Now, you need to register the `chefAgent` with your Mastra instance so the server knows about it. Open your main Mastra configuration file (this is often `src/index.ts` in projects created with `create-mastra`).
+Now, you need to register the `chefAgent` with your Mastra instance so the server knows about it. Open your main Mastra configuration file (this is often `src/mastra/index.ts` in projects created with `create-mastra`).
 
 Import the `chefAgent` and add it to the `agents` object when initializing Mastra:
 
-```typescript title="src/index.ts"
+```typescript title="src/mastra/index.ts"
 import { Mastra } from "@mastra/core";
 import { chefAgent } from "./agents/chefAgent"; // Adjust path if necessary
 
@@ -83,7 +88,34 @@ export const mastra = new Mastra({
 });
 ```
 
-Make sure you adapt this code to fit the existing structure of your `src/index.ts` file generated by `create-mastra`. The key is to import your agent and include it in the `agents` configuration object.
+Make sure you adapt this code to fit the existing structure of your `src/mastra/index.ts` file generated by `create-mastra`. The key is to import your agent and include it in the `agents` configuration object.
+
+</Step>
+
+<Step>
+
+### Register the Chat Route
+
+Still inside `src/mastra/index.ts`, register a chat route for the `chefAgent` now. You can do this by using `chatRoute()` from `@mastra/ai-sdk`. You need to place this inside `server.apiRoutes` of your Mastra configuration:
+
+```typescript title="src/mastra/index.ts" {3,7-13}
+import { Mastra } from "@mastra/core";
+import { chefAgent } from "./agents/chefAgent";
+import { chatRoute } from "@mastra/ai-sdk";
+
+export const mastra = new Mastra({
+  agents: { chefAgent },
+  server: {
+    apiRoutes: [
+      chatRoute({
+        path: "/chat/:agentId",
+      }),
+    ],
+  },
+});
+```
+
+Make sure you adapt this code to fit the existing structure of your `src/mastra/index.ts` file generated by `create-mastra`. This will make all agents available in AI SDK-compatible formats, including the `chefAgent` at the endpoint `/chat/chefAgent`.
 
 </Step>
 
@@ -97,7 +129,7 @@ With the agent defined and registered, start the Mastra development server:
 npm run dev
 ```
 
-By default, the Mastra server will run on `http://localhost:4111`. Your `chefAgent` should now be accessible via a POST request endpoint, typically `http://localhost:4111/api/agents/chefAgent/stream`. Keep this server running for the next steps where we'll set up the assistant-ui frontend to connect to it.
+By default, the Mastra server will run on `http://localhost:4111`. Keep this server running for the next steps where we'll set up the assistant-ui frontend to connect to it.
 
 </Step>
 
@@ -135,38 +167,25 @@ In the next step, we will configure this frontend to communicate with the separa
 
 The default assistant-ui setup configures the chat runtime to use a local API route (`/api/chat`) within the Next.js project. Since our Mastra agent is running on a separate server, we need to update the frontend to point to that server's endpoint.
 
-Open the main page file in your assistant-ui frontend project (usually `app/page.tsx` or `src/app/page.tsx`). Find the `useChatRuntime` hook and change the `api` property to the full URL of your Mastra agent's stream endpoint:
+Open the file in your assistant-ui frontend project that contains the `useChatRuntime` hook (usually `app/assistant.tsx` or `src/app/assistant.tsx`). Find the `useChatRuntime` hook and change the `api` property to the full URL of your Mastra agent's stream endpoint:
 
-```tsx {10} title="app/page.tsx"
+```tsx {8} title="app/assistant.tsx"
 "use client";
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  useChatRuntime,
-  AssistantChatTransport,
-} from "@assistant-ui/react-ai-sdk";
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { ThreadList } from "@/components/assistant-ui/thread-list";
-
-export default function Home() {
-  // Point the runtime to the Mastra server endpoint
+
+// Rest of the imports...
+
+export const Assistant = () => {
   const runtime = useChatRuntime({
     transport: new AssistantChatTransport({
-      api: "MASTRA_ENDPOINT",
+      api: "http://localhost:4111/chat/chefAgent",
     }),
   });
 
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <main className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
-        <ThreadList />
-        <Thread />
-      </main>
-    </AssistantRuntimeProvider>
-  );
-}
+  // Rest of the component...
+};
 ```
 
-Replace `"http://localhost:4111/api/agents/chefAgent/stream"` with the actual URL if your Mastra server runs on a different port or host, or if your agent has a different name.
+Replace `"http://localhost:4111/chat/chefAgent"` with the actual URL if your Mastra server runs on a different port or host, or if your agent has a different name.
 
 Now, the assistant-ui frontend will send chat requests directly to your running Mastra server.
 

package/.docs/raw/docs/ui/Reasoning.mdx

@@ -0,0 +1,174 @@
+---
+title: Reasoning
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+## Overview
+
+The Reasoning component displays AI reasoning or thinking messages in a collapsible UI. Consecutive reasoning message parts are automatically grouped together with smooth animations and a shimmer effect while streaming.
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `reasoning`
+
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add reasoning
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/reasoning
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/reasoning"
+```
+
+  </Tab>
+</Tabs>
+
+This adds a `/components/assistant-ui/reasoning.tsx` file to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Pass the `Reasoning` and `ReasoningGroup` components to the `MessagePrimitive.Parts` component:
+
+```tsx title="/app/components/assistant-ui/thread.tsx" {2,10-11}
+import { MessagePrimitive } from "@assistant-ui/react";
+import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning";
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <div className="...">
+        <MessagePrimitive.Parts 
+          components={{ 
+            Reasoning: Reasoning,
+            ReasoningGroup: ReasoningGroup
+          }} 
+        />
+      </div>
+      <AssistantActionBar />
+
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## How It Works
+
+The component consists of two parts:
+
+1. **Reasoning**: Renders individual reasoning message part content
+2. **ReasoningGroup**: Wraps consecutive reasoning parts in a collapsible container
+
+Consecutive reasoning parts are automatically grouped together by the `ReasoningGroup` component, similar to how `ToolGroup` handles tool calls.
+
+### Reasoning
+
+The Reasoning component doesn't accept additional props—it renders the reasoning text content with markdown support.
+
+## Examples
+
+### Basic Usage
+
+```tsx title="/app/components/assistant-ui/thread.tsx"
+<MessagePrimitive.Parts 
+  components={{ 
+    Reasoning,
+    ReasoningGroup 
+  }} 
+/>
+```
+
+### Custom Styling
+
+Since the component is copied to your project, you can customize it directly by modifying the `reasoning.tsx` file. The internal components (`ReasoningRoot`, `ReasoningTrigger`, `ReasoningContent`, `ReasoningText`) accept `className` props for styling:
+
+```tsx title="/components/assistant-ui/reasoning.tsx"
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  // ... existing code ...
+  return (
+    <ReasoningRoot className="rounded-lg border bg-muted/50 p-4">
+      <ReasoningTrigger 
+        active={isReasoningStreaming} 
+        className="font-semibold text-foreground"
+      />
+      <ReasoningContent 
+        aria-busy={isReasoningStreaming}
+        className="mt-2"
+      >
+        <ReasoningText className="text-base">{children}</ReasoningText>
+      </ReasoningContent>
+    </ReasoningRoot>
+  );
+};
+```
+
+You can also customize the individual internal components:
+
+```tsx title="/components/assistant-ui/reasoning.tsx"
+const ReasoningRoot: FC<PropsWithChildren<{ className?: string }>> = ({ 
+  // ... existing code ...
+  return (
+    <Collapsible
+      // ...
+      className={cn("aui-reasoning-root mb-4 w-full rounded-lg border bg-muted/50 p-4", className)}
+      // ...
+    >
+      {children}
+    </Collapsible>
+  );
+};
+
+const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
+  // ... existing code ...
+  <CollapsibleTrigger
+    className={cn(
+      "aui-reasoning-trigger group/trigger -mb-2 flex max-w-[75%] items-center gap-2 py-2 text-sm font-semibold text-foreground transition-colors hover:text-foreground",
+      className,
+    )}
+  >
+    {/* ... existing content ... */}
+  </CollapsibleTrigger>
+);
+```
+
+## Technical Details
+
+### Scroll Lock
+
+The component uses the `useScrollLock` hook (exported from `@assistant-ui/react`) to prevent page jumps when collapsing the reasoning section. This maintains the scroll position during the collapse animation.
+
+### Animation Timing
+
+The component uses CSS custom properties for animation timing:
+- `--animation-duration`: Controls expand/collapse animation (default: 200ms)
+- `--shimmer-duration`: Controls the shimmer effect speed (default: 1000ms)
+
+These can be customized by modifying the CSS variables in your component.
+
+## Related Components
+
+- [ToolGroup](/docs/ui/ToolGroup) - Similar grouping pattern for tool calls
+- [PartGrouping](/docs/ui/PartGrouping) - Experimental API for grouping message parts

package/dist/chunk-M2RKUM66.js

@@ -2,9 +2,9 @@ import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 
 // src/constants.ts
-var __dirname = dirname(fileURLToPath(import.meta.url));
-var ROOT_DIR = join(__dirname, "../../../");
-var PACKAGE_DIR = join(__dirname, "../");
+var __dirname$1 = dirname(fileURLToPath(import.meta.url));
+var ROOT_DIR = join(__dirname$1, "../../../");
+var PACKAGE_DIR = join(__dirname$1, "../");
 var EXAMPLES_PATH = join(ROOT_DIR, "examples");
 var DOCS_BASE = join(PACKAGE_DIR, ".docs");
 var DOCS_PATH = join(DOCS_BASE, "raw/docs");

package/dist/chunk-NVNFQ5ZO.js

@@ -377,9 +377,9 @@ var examplesTools = {
     }
   }
 };
-var __dirname = dirname(fileURLToPath(import.meta.url));
+var __dirname$1 = dirname(fileURLToPath(import.meta.url));
 var packageJson = JSON.parse(
-  readFileSync(join(__dirname, "../package.json"), "utf-8")
+  readFileSync(join(__dirname$1, "../package.json"), "utf-8")
 );
 var server = new McpServer({
   name: "assistant-ui-docs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "MCP server for assistant-ui documentation and examples",
   "type": "module",
   "main": "dist/index.js",
@@ -8,17 +8,17 @@
     "assistant-ui-mcp": "./dist/stdio.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.20.2",
+    "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.1.12",
     "gray-matter": "^4.0.3",
     "cross-env": "^10.1.0"
   },
   "devDependencies": {
-    "@types/node": "^24.10.0",
-    "tsup": "^8.5.0",
+    "@types/node": "^24.10.1",
+    "tsup": "^8.5.1",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.10"
   },
   "files": [
     "dist",