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

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

@@ -1035,32 +1035,32 @@ export default nextConfig;
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
-    "@ai-sdk/react": "^2.0.86",
+    "@ai-sdk/openai": "^2.0.68",
+    "@ai-sdk/react": "^2.0.93",
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:^",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "^4.1.16",
-    "ai": "^5.0.86",
+    "@tailwindcss/postcss": "^4.1.17",
+    "ai": "^5.0.93",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "postcss": "^8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "zod": "^4.1.12"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   },

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

@@ -1261,29 +1261,29 @@ export default nextConfig;
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-langgraph": "workspace:^",
     "@assistant-ui/react-markdown": "workspace:^",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "^4.1.16",
-    "assistant-stream": "^0.2.39",
+    "@tailwindcss/postcss": "^4.1.17",
+    "assistant-stream": "^0.2.41",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "postcss": "^8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.1.12"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   },

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

@@ -1083,23 +1083,23 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
+    "@ai-sdk/openai": "^2.0.68",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^5.0.86",
+    "ai": "^5.0.93",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jsonwebtoken": "^9.0.2",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.554.0",
     "nanoid": "5.1.6",
-    "next": "16.0.1",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -1109,7 +1109,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5"
   }
 }

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

@@ -995,19 +995,19 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
+    "@ai-sdk/openai": "^2.0.68",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -1016,7 +1016,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5"
   }
 }

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

@@ -1220,7 +1220,7 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
+    "@ai-sdk/openai": "^2.0.68",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
@@ -1228,25 +1228,25 @@ export default nextConfig;
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/media-query": "^1.1.1",
-    "ai": "^5.0.86",
+    "ai": "^5.0.93",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "json-schema-to-zod": "^2.6.1",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"
@@ -1257,7 +1257,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   }
 }

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

@@ -1669,19 +1669,19 @@ export default nextConfig;
     "@assistant-ui/react-langgraph": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@langchain/langgraph-sdk": "^1.0.0",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.554.0",
     "nanoid": "5.1.6",
-    "next": "16.0.1",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -1692,7 +1692,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   }
 }

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

@@ -1241,19 +1241,19 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
+    "@ai-sdk/openai": "^2.0.68",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -1262,7 +1262,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5"
   }
 }

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

@@ -1640,31 +1640,31 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.60",
+    "@ai-sdk/openai": "^2.0.68",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/media-query": "^1.1.1",
-    "ai": "^5.0.86",
+    "ai": "^5.0.93",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "json-schema-to-zod": "^2.6.1",
-    "lucide-react": "^0.552.0",
-    "next": "16.0.1",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"
@@ -1675,7 +1675,7 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss": "^8",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   }
 }

package/.docs/raw/docs/cloud/authorization.mdx

@@ -70,7 +70,7 @@ export const POST = async (req: Request) => {
  
   if (!userId) throw new Error("User not authenticated");
  
-  const workspaceId = orgId ? `${orgId}:${userId}` : userId;
+  const workspaceId = orgId ? `${orgId}_${userId}` : userId;
   const assistantCloud = new AssistantCloud({
     apiKey: process.env["ASSISTANT_API_KEY"]!,
     userId,
@@ -91,7 +91,7 @@ const cloud = new AssistantCloud({
   baseUrl: process.env["NEXT_PUBLIC_ASSISTANT_BASE_URL"]!,
   authToken: () =>
     fetch("/api/assistant-ui-token", { method: "POST" }).then((r) =>
-      r.json().then((data) => data.token)
+      r.text(),
     ),
 });
 

package/.docs/raw/docs/guides/context-api.mdx

@@ -35,7 +35,7 @@ assistant-ui organizes state into **scopes** - logical boundaries that provide a
         └── ✏️  Composer (composer) - New message input
             └── 📎 Attachment (attachment) - Files being added
 
-🔧 ToolUIs (toolUIs) - Custom UI components for tool calls
+🔧 Tools (tools) - Custom UI components for tool calls
 ```
 
 **How scopes work:**
@@ -212,9 +212,9 @@ api.threadListItem().unarchive();
 api.threadListItem().delete();
 api.threads().getState();
 
-// ToolUIs actions
-api.toolUIs().setToolUI(toolName, render);
-api.toolUIs().getState();
+// Tools actions
+api.tools().setToolUI(toolName, render);
+api.tools().getState();
 ```
 
 ### useAssistantEvent
@@ -272,7 +272,7 @@ Each scope provides access to specific state and actions:
 - **Part** (`part`): Content part within a message (text, tool calls, etc.)
 - **Composer** (`composer`): Text input for sending or editing messages
 - **Attachment** (`attachment`): File or media attached to a message or composer
-- **ToolUIs** (`toolUIs`): Tool UI components
+- **Tools** (`tools`): Tool UI components
 
 ### Scope Resolution
 

package/.docs/raw/docs/migrations/v0-12.mdx

@@ -20,8 +20,8 @@ The following hooks have been removed:
 
 - `useMessageUtils` → Use `useAssistantState(({ message }) => message.isHovering)` / `useAssistantState(({ message }) => message.isCopied)`
 - `useMessageUtilsStore` → Use `useAssistantApi()` with `api.message().setIsHovering()` / `api.message().setIsCopied()`
-- `useToolUIs` → Use `useAssistantState(({ toolUIs }) => toolUIs)` and `useAssistantApi()` with `api.toolUIs()`
-- `useToolUIsStore` → Use `useAssistantApi()` with `api.toolUIs()`
+- `useToolUIs` → Use `useAssistantState(({ tools }) => tools)` and `useAssistantApi()` with `api.tools()`
+- `useToolUIsStore` → Use `useAssistantApi()` with `api.tools()`
 
 **Deprecated Hooks:**
 

package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx

@@ -109,6 +109,15 @@ When the hook mounts it calls `list()` on your adapter, hydrates existing thread
       async delete(remoteId) {
         await fetch(`/api/threads/${remoteId}`, { method: "DELETE" });
       },
+      async fetch(remoteId) {
+        const response = await fetch(`/api/threads/${remoteId}`);
+        const thread = await response.json();
+        return {
+          status: thread.is_archived ? "archived" : "regular",
+          remoteId: thread.id,
+          title: thread.title,
+        };
+      },
       async generateTitle(remoteId, messages) {
         return createAssistantStream(async (controller) => {
           const response = await fetch(`/api/threads/${remoteId}/title`, {

package/.docs/raw/docs/runtimes/custom/local.mdx

@@ -538,7 +538,12 @@ export function MyRuntimeProvider({ children }) {
 ```
 
 <Callout type="info" title="Returning a title from generateTitle">
-  The `generateTitle` method must return an <code>AssistantStream</code> containing the title text. The easiest, type-safe way is to use <code>createAssistantStream</code> and call <code>controller.appendText(newTitle)</code> followed by <code>controller.close()</code>. Returning a raw <code>ReadableStream</code> won't update the thread list UI.
+  The `generateTitle` method must return an <code>AssistantStream</code>{" "}
+  containing the title text. The easiest, type-safe way is to use{" "}
+  <code>createAssistantStream</code> and call{" "}
+  <code>controller.appendText(newTitle)</code> followed by{" "}
+  <code>controller.close()</code>. Returning a raw <code>ReadableStream</code>{" "}
+  won't update the thread list UI.
 </Callout>
 
 #### Understanding the Architecture
@@ -854,9 +859,9 @@ function MyCustomRuntimeProvider({ children }) {
 </Callout>
 
 <Callout type="warning">
-  **`useThreadRuntime` vs `useLocalThreadRuntime`:** 
-  - `useThreadRuntime` - Access the current thread's runtime from within components 
-  - `useLocalThreadRuntime` - Create a new single-thread runtime instance
+  **`useThreadRuntime` vs `useLocalThreadRuntime`:** - `useThreadRuntime` -
+  Access the current thread's runtime from within components -
+  `useLocalThreadRuntime` - Create a new single-thread runtime instance
 </Callout>
 
 ## Integration Examples
@@ -999,6 +1004,74 @@ async run({ messages }) {  // ❌ Wrong for streaming
 ```
 </Callout>
 
+### Tool UI Flickers or Disappears During Streaming
+
+A common issue when implementing a streaming `ChatModelAdapter` is seeing a tool's UI appear for a moment and then disappear. This is caused by failing to accumulate the `tool_calls` correctly across multiple stream chunks. State must be stored **outside** the streaming loop to persist.
+
+**❌ Incorrect: Forgetting Previous Tool Calls**
+
+This implementation incorrectly re-creates the `content` array for every chunk. If a later chunk contains only text, tool calls from previous chunks are lost, causing the UI to disappear.
+
+```tsx
+// This implementation incorrectly re-creates the `content` array for every chunk.
+// If a later chunk contains only text, tool calls from previous chunks are lost.
+async *run({ messages, abortSignal, context }) {
+  const stream = await backendApi({ messages, abortSignal, context });
+  let text = "";
+
+  for await (const chunk of stream) {
+    // ❌ DON'T: This overwrites toolCalls with only the current chunk's data
+    const toolCalls = chunk.tool_calls || [];
+    const content = [{ type: "text", text }];
+    for (const toolCall of toolCalls) {
+      content.push({
+        type: "tool-call",
+        toolName: toolCall.name,
+        toolCallId: toolCall.id,
+        args: toolCall.args,
+      });
+    }
+    yield { content }; // This yield might not contain the tool call anymore
+  }
+}
+```
+
+**✅ Correct: Accumulating State**
+
+This implementation uses a `Map` outside the loop to remember all tool calls.
+
+```tsx
+// This implementation uses a Map outside the loop to remember all tool calls.
+async *run({ messages, abortSignal, context }) {
+  const stream = await backendApi({ messages, abortSignal, context });
+  let text = "";
+  // ✅ DO: Declare state outside the loop
+  const toolCallsMap = new Map();
+
+  for await (const chunk of stream) {
+    text += chunk.content || "";
+
+    // ✅ DO: Add/update tool calls in the persistent map
+    for (const toolCall of chunk.tool_calls || []) {
+      toolCallsMap.set(toolCall.toolCallId, {
+        type: "tool-call",
+        toolName: toolCall.name,
+        toolCallId: toolCall.toolCallId,
+        args: toolCall.args,
+      });
+    }
+
+    // ✅ DO: Build content from accumulated state
+    const content = [
+      ...(text ? [{ type: "text", text }] : []),
+      ...Array.from(toolCallsMap.values()),
+    ];
+
+    yield { content }; // Yield the complete, correct state every time
+  }
+}
+```
+
 ### Debug Tips
 
 1. **Log adapter calls** to trace execution:

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/mastra/full-stack-integration.mdx

@@ -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 UI message stream response
-  return result.toUIMessageStreamResponse();
+  // 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 `toUIMessageStreamResponse()`.
+- The result is still returned in a format compatible with assistant-ui using `createUIMessageStreamResponse()` and `toAISdkFormat()`.
 
 Your API route is now powered by Mastra!