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

package/.docs/raw/docs/runtimes/langgraph/index.mdx

@@ -136,7 +136,7 @@ export const OPTIONS = () => {
 
 // ---cut---
 import { Client } from "@langchain/langgraph-sdk";
-import { LangChainMessage } from "@assistant-ui/react-langgraph";
+import { LangChainMessage, LangGraphSendMessageConfig } from "@assistant-ui/react-langgraph";
 
 const createClient = () => {
   const apiUrl = process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] || "/api";
@@ -160,6 +160,7 @@ export const getThreadState = async (
 export const sendMessage = async (params: {
   threadId: string;
   messages: LangChainMessage;
+  config?: LangGraphSendMessageConfig;
 }) => {
   const client = createClient();
   return client.runs.stream(
@@ -170,6 +171,7 @@ export const sendMessage = async (params: {
         messages: params.messages,
       },
       streamMode: "messages",
+      ...params.config
     },
   );
 };
@@ -195,12 +197,13 @@ import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 
 export function MyAssistant() {
   const runtime = useLangGraphRuntime({
-    stream: async (messages, { initialize }) => {
+    stream: async (messages, { initialize, config }) => {
       const { externalId } = await initialize();
       if (!externalId) throw new Error("Thread not found");
       return sendMessage({
         threadId: externalId,
         messages,
+        config
       });
     },
     create: async () => {
@@ -306,11 +309,11 @@ The `useLangGraphRuntime` hook now includes built-in thread management capabilit
 
 ```typescript
 const runtime = useLangGraphRuntime({
-  stream: async (messages, { initialize }) => {
+  stream: async (messages, { initialize, config }) => {
     // initialize() creates or loads a thread and returns its IDs
     const { remoteId, externalId } = await initialize();
     // Use externalId (your backend's thread ID) for API calls
-    return sendMessage({ threadId: externalId, messages });
+    return sendMessage({ threadId: externalId, messages, config });
   },
   create: async () => {
     // Called when creating a new thread

package/.docs/raw/docs/runtimes/langserve.mdx

@@ -26,7 +26,7 @@ cd my-app
   </Step>
   <Step>
 
-### Install `@langchain/core`, `ai-sdk` and `@assistant-ui/react`
+### Install `@langchain/core`, AI SDK and `@assistant-ui/react`
 
 ```sh npm2yarn
 npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/react @langchain/core
@@ -71,19 +71,14 @@ export async function POST(req: Request) {
 
 import { useChat } from "@ai-sdk/react";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
 export function MyRuntimeProvider({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const chat = useChat({
-    api: "/api/chat",
-    unstable_AISDKInterop: true,
-  });
-
-  const runtime = useVercelUseChatRuntime(chat);
+  const runtime = useChatRuntime();
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>

package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx

@@ -52,7 +52,7 @@ export async function POST(req: Request) {
     messages,
   });
 
-  return result.toDataStreamResponse();
+  return result.toUIMessageStreamResponse();
 }
 ```
 
@@ -63,10 +63,10 @@ This default route uses the Vercel AI SDK directly with OpenAI. In the following
 
 ### Install Mastra Packages
 
-Add the Mastra core, memory, the AI SDK OpenAI provider packages to your project:
+Add the `@mastra/core` package and its peer dependency `zod` (which you can use later inside tools for example). Also add `@mastra/ai-sdk` to convert Mastra's stream to an AI SDK-compatible format:
 
 ```bash npm2yarn
-npm install @mastra/core@latest @mastra/memory@latest @ai-sdk/openai
+npm install @mastra/core@latest @mastra/ai-sdk@latest zod@latest
 ```
 
 </Step>
@@ -123,7 +123,6 @@ These files will be used in the next steps to define your Mastra agent and confi
 Now, let's define the behavior of our AI agent. Open the `mastra/agents/chefAgent.ts` file and add the following code:
 
 ```typescript title="mastra/agents/chefAgent.ts"
-import { openai } from "@ai-sdk/openai";
 import { Agent } from "@mastra/core/agent";
 
 export const chefAgent = new Agent({
@@ -131,14 +130,14 @@ 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",
 });
 ```
 
 This code creates a new Mastra `Agent` named `chef-agent`.
 
 - `instructions`: Defines the agent's persona and primary goal.
-- `model`: Specifies the language model the agent will use (in this case, OpenAI's GPT-4o Mini via the AI SDK).
+- `model`: Specifies the language model the agent will use (in this case, OpenAI's GPT-4o Mini via Mastra's model router).
 
 Make sure you have set up your OpenAI API key as described in the [Getting Started guide](/docs/getting-started).
 
@@ -151,7 +150,6 @@ Next, register the agent with your Mastra instance. Open the `mastra/index.ts` f
 
 ```typescript title="mastra/index.ts"
 import { Mastra } from "@mastra/core";
-
 import { chefAgent } from "./agents/chefAgent";
 
 export const mastra = new Mastra({
@@ -169,6 +167,8 @@ This code initializes Mastra and makes the `chefAgent` available for use in your
 Now, update your API route (`app/api/chat/route.ts`) to use the Mastra agent you just configured. Replace the existing content with the following:
 
 ```typescript title="app/api/chat/route.ts"
+import { createUIMessageStreamResponse } from "ai";
+import { toAISdkFormat } from "@mastra/ai-sdk";
 import { mastra } from "@/mastra"; // Adjust the import path if necessary
 
 // Allow streaming responses up to 30 seconds
@@ -182,10 +182,12 @@ export async function POST(req: Request) {
   const agent = mastra.getAgent("chefAgent");
 
   // Stream the response using the agent
-  const result = await agent.stream(messages);
+  const stream = await agent.stream(messages);
 
-  // Return the result as a data stream response
-  return result.toDataStreamResponse();
+  // Create a Response that streams the UI message stream to the client
+  return createUIMessageStreamResponse({
+    stream: toAISdkFormat(stream, { from: "agent" }),
+  });
 }
 ```
 
@@ -194,7 +196,7 @@ Key changes:
 - We import the `mastra` instance created in `mastra/index.ts`. Make sure the import path (`@/mastra`) is correct for your project setup (you might need `~/mastra`, `../../../mastra`, etc., depending on your path aliases and project structure).
 - We retrieve the `chefAgent` using `mastra.getAgent("chefAgent")`.
 - Instead of calling the AI SDK's `streamText` directly, we call `agent.stream(messages)` to process the chat messages using the agent's configuration and model.
-- The result is still returned in a format compatible with assistant-ui using `toDataStreamResponse()`.
+- The result is still returned in a format compatible with assistant-ui using `createUIMessageStreamResponse()` and `toAISdkFormat()`.
 
 Your API route is now powered by Mastra!
 

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/PartGrouping.mdx

@@ -515,12 +515,12 @@ Adjust group appearance based on content:
 
 ```tsx
 import { FC, PropsWithChildren } from "react";
-import { useMessage } from "@assistant-ui/react";
+import { useAssistantState } from "@assistant-ui/react";
 
 const DynamicGroup: FC<
   PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
 > = ({ groupKey, indices, children }) => {
-  const parts = useMessage((m) => m.content);
+  const parts = useAssistantState(({ message }) => message.content);
   const groupParts = indices.map((i) => parts[i]);
 
   // Analyze group content

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.12",
+  "version": "0.1.14",
   "description": "MCP server for assistant-ui documentation and examples",
   "type": "module",
   "main": "dist/index.js",
@@ -8,18 +8,17 @@
     "assistant-ui-mcp": "./dist/stdio.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.20.1",
+    "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.1.12",
     "gray-matter": "^4.0.3",
     "cross-env": "^10.1.0"
   },
   "devDependencies": {
-    "@types/node": "^24.9.1",
-    "tsup": "^8.5.0",
+    "@types/node": "^24.10.1",
+    "tsup": "^8.5.1",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.1",
-    "eslint": "^9.38.0"
+    "vitest": "^4.0.10"
   },
   "files": [
     "dist",