@mastra/mcp-docs-server 0.13.30 → 0.13.31

package/.docs/raw/frameworks/agentic-uis/ai-sdk.mdx

@@ -9,213 +9,396 @@ import { Callout, Tabs } from "nextra/components";
 
 Mastra integrates with [Vercel's AI SDK](https://sdk.vercel.ai) to support model routing, React Hooks, and data streaming methods.
 
-## AI SDK v5
-
-Mastra also supports AI SDK v5 see the following section for v5 specific methods: [Vercel AI SDK v5](/docs/frameworks/agentic-uis/ai-sdk#vercel-ai-sdk-v5)
-
-<Callout type="warning">
-  The code examples contained with this page assume you're using the Next.js App Router at the root of your
-  project, e.g., `app` rather than `src/app`.
-</Callout>
-
-## Model routing
+## Model Routing
 
 When creating agents in Mastra, you can specify any AI SDK-supported model.
 
-```typescript {7} filename="agents/weather-agent.ts" showLineNumbers copy
-import { openai } from "@ai-sdk/openai";
+```typescript {6} filename="agents/weather-agent.ts" copy
 import { Agent } from "@mastra/core/agent";
 
 export const weatherAgent = new Agent({
   name: "Weather Agent",
   instructions: "Instructions for the agent...",
-  model: openai("gpt-4-turbo"),
+  model: "openai/gpt-4-turbo",
 });
 ```
 
 > See [Model Providers](/models) and [Model Capabilities](/models) for more information.
 
-## React Hooks
+## Streaming
 
-Mastra supports AI SDK hooks for connecting frontend components directly to agents using HTTP streams.
-
-Install the required AI SDK React package:
+The recommended way of using Mastra and AI SDK together is by installing the `@mastra/ai-sdk` package. `@mastra/ai-sdk` provides custom API routes and utilities for streaming Mastra agents in AI SDK-compatible formats. Including chat, workflow, and network route handlers, along with utilities and exported types for UI integrations.
 
 <Tabs items={["npm", "yarn", "pnpm", "bun"]}>
   <Tabs.Tab>
     ```bash copy
-    npm install @ai-sdk/react
+    npm install @mastra/ai-sdk
     ```
   </Tabs.Tab>
   <Tabs.Tab>
     ```bash copy
-    yarn add @ai-sdk/react
+    yarn add @mastra/ai-sdk
     ```
   </Tabs.Tab>
   <Tabs.Tab>
     ```bash copy
-    pnpm add @ai-sdk/react
+    pnpm add @mastra/ai-sdk
     ```
   </Tabs.Tab>
   <Tabs.Tab>
     ```bash copy
-    bun add @ai-sdk/react
+    bun add @mastra/ai-sdk
     ```
   </Tabs.Tab>
 </Tabs>
 
+### `chatRoute()`
+
+When setting up a [custom API route](/docs/server-db/custom-api-routes), use the `chatRoute()` utility to create a route handler that automatically formats the agent stream into an AI SDK-compatible format.
+
+```typescript filename="src/mastra/index.ts" copy
+import { Mastra } from '@mastra/core/mastra';
+import { chatRoute } from '@mastra/ai-sdk';
+
+export const mastra = new Mastra({
+  server: {
+    apiRoutes: [
+      chatRoute({
+        path: '/chat',
+        agent: 'weatherAgent',
+      }),
+    ],
+  },
+});
+```
+
+Once you have your `/chat` API route set up, you can call the `useChat()` hook in your application.
+
+```typescript
+const { error, status, sendMessage, messages, regenerate, stop } =
+  useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/chat',
+    }),
+  });
+```
+### `workflowRoute()`
+
+Use the `workflowRoute()` utility to create a route handler that automatically formats the workflow stream into an AI SDK-compatible format.
+
+```typescript filename="src/mastra/index.ts" copy
+import { Mastra } from '@mastra/core/mastra';
+import { workflowRoute } from '@mastra/ai-sdk';
+
+export const mastra = new Mastra({
+  server: {
+    apiRoutes: [
+      workflowRoute({
+        path: '/workflow',
+        agent: 'weatherAgent',
+      }),
+    ],
+  },
+});
+```
+
+Once you have your `/workflow` API route set up, you can call the `useChat()` hook in your application.
+
+```typescript
+const { error, status, sendMessage, messages, regenerate, stop } =
+  useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/workflow',
+      prepareSendMessagesRequest({messages}) {
+          return {
+            body: {
+              inputData: {
+               city: messages[messages.length - 1].parts[0].text
+              }
+            }
+          }
+        }
+    }),
+  });
+```
+
+### `networkRoute()`
+
+Use the `networkRoute()` utility to create a route handler that automatically formats the agent network stream into an AI SDK-compatible format.
+
+```typescript filename="src/mastra/index.ts" copy
+import { Mastra } from '@mastra/core/mastra';
+import { networkRoute } from '@mastra/ai-sdk';
+
+export const mastra = new Mastra({
+  server: {
+    apiRoutes: [
+      networkRoute({
+        path: '/network',
+        agent: 'weatherAgent',
+      }),
+    ],
+  },
+});
+```
+
+Once you have your `/network` API route set up, you can call the `useChat()` hook in your application.
 
-### Using the `useChat()` Hook
+```typescript
+const { error, status, sendMessage, messages, regenerate, stop } =
+  useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/network',
+    }),
+  });
+```
+
+### Custom UI
 
-The `useChat` hook handles real-time chat interactions between your frontend and a Mastra agent, enabling you to send prompts and receive streaming responses over HTTP.
+The `@mastra/ai-sdk` package transforms and emits Mastra streams (e.g workflow, network streams) into AI SDK-compatible format.
 
-```typescript {6} filename="app/test/chat.tsx" showLineNumbers copy
+- **Top-level parts**: These are streamed via direct workflow and network stream transformations (e.g in `workflowRoute()` and `networkRoute()`)
+  - `data-workflow`: Aggregates a workflow run with step inputs/outputs and final usage.
+  - `data-network`: Aggregates a routing/network run with ordered steps (agent/workflow/tool executions) and outputs.
+
+- **Nested parts**: These are streamed via nested and merged streams from within a tool's `execute()` method.
+  - `data-tool-workflow`: Nested workflow emitted from within a tool stream.
+  - `data-tool-network`: Nested network emitted from within an tool stream.
+  - `data-tool-agent`: Nested agent emitted from within an tool stream.
+
+Here's an example: For a [nested agent stream within a tool](/docs/streaming/tool-streaming#tool-using-an-agent), `data-tool-agent` UI message parts will be emitted and can be leveraged on the client as documented below:
+
+```typescript filename="app/page.tsx" copy
 "use client";
 
 import { useChat } from "@ai-sdk/react";
+import { AgentTool } from '../ui/agent-tool';
+import type { AgentDataPart } from "@mastra/ai-sdk";
 
-export function Chat() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    api: "/api/chat"
+export default function Page() {
+  const { messages } = useChat({
+    transport: new DefaultChatTransport({
+    api: 'http://localhost:4111/chat',
+    }),
   });
+
   return (
     <div>
-      <pre>{JSON.stringify(messages, null, 2)}</pre>
-      <form onSubmit={handleSubmit}>
-        <input value={input} onChange={handleInputChange} placeholder="Name of city" />
-      </form>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part, i) => {
+            switch (part.type) {
+              case 'data-tool-agent':
+                return (
+                  <AgentTool {...part.data as AgentDataPart} key={`${message.id}-${i}`} />
+                );
+              default:
+                return null;
+            }
+          })}
+        </div>
+      ))}
     </div>
   );
 }
 ```
 
-Requests sent using the `useChat` hook are handled by a standard server route. This example shows how to define a POST route using a Next.js Route Handler.
+```typescript filename="ui/agent-tool.ts" copy
+import { Tool, ToolContent, ToolHeader, ToolOutput } from "../ai-elements/tool";
+import type { AgentDataPart } from "@mastra/ai-sdk";
+
+export const AgentTool = ({ id, text, status }: AgentDataPart) => {
+  return (
+    <Tool>
+      <ToolHeader 
+        type={`${id}`} 
+        state={status === 'finished' ? 'output-available' : 'input-available'} 
+      />
+      <ToolContent>
+        <ToolOutput output={text} />
+      </ToolContent>
+    </Tool>
+  );
+};
+```
+
+### Stream Transformations
 
-```typescript filename="app/api/chat/route.ts" showLineNumbers copy
+To manually transform Mastra's streams to AI SDK-compatible format, use the `toAISdkFormat()` utility.
+
+```typescript filename="app/api/chat/route.ts" copy {3,13}
 import { mastra } from "../../mastra";
+import { createUIMessageStream, createUIMessageStreamResponse } from 'ai';
+import { toAISdkFormat } from '@mastra/ai-sdk'
 
 export async function POST(req: Request) {
   const { messages } = await req.json();
   const myAgent = mastra.getAgent("weatherAgent");
   const stream = await myAgent.stream(messages);
 
-  return stream.toDataStreamResponse();
+  // Transform stream into AI SDK format and create UI messages stream
+  const uiMessageStream = createUIMessageStream({
+    execute: async ({ writer }) => {
+      for await (const part of toAISdkFormat(stream, { from: 'agent' })!) {
+        writer.write(part);
+      }
+    },
+  });
+
+  // Create a Response that streams the UI message stream to the client
+  return createUIMessageStreamResponse({
+    stream: uiMessageStream,
+  });
 }
 ```
 
-> When using `useChat` with agent memory, refer to the [Agent Memory section](/docs/agents/agent-memory#usechat) for key implementation details.
+## UI Hooks
+
+Mastra supports AI SDK UI hooks for connecting frontend components directly to agents using HTTP streams.
+
+Install the required AI SDK React package:
+
+<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
+  <Tabs.Tab>
+    ```bash copy
+    npm install @ai-sdk/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    yarn add @ai-sdk/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    pnpm add @ai-sdk/react
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```bash copy
+    bun add @ai-sdk/react
+    ```
+  </Tabs.Tab>
+</Tabs>
+
 
-### Using the `useCompletion()` Hook
+### Using `useChat()`
 
-The `useCompletion` hook handles single-turn completions between your frontend and a Mastra agent, allowing you to send a prompt and receive a streamed response over HTTP.
+The `useChat()` hook handles real-time chat interactions between your frontend and a Mastra agent, enabling you to send prompts and receive streaming responses over HTTP.
 
-```typescript {6} filename="app/test/completion.tsx" showLineNumbers copy
+```typescript {8-12} filename="app/test/chat.tsx" copy
 "use client";
 
-import { useCompletion } from "@ai-sdk/react";
+import { useChat } from "@ai-sdk/react";
+import { useState } from "react";
 
-export function Completion() {
-  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
-    api: "api/completion"
+export function Chat() {
+  const [inputValue, setInputValue] = useState('')
+  const { messages, sendMessage} = useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/chat',
+    }),
   });
 
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: inputValue });
+  };
+
   return (
     <div>
-      <form onSubmit={handleSubmit}>
-        <input value={input} onChange={handleInputChange} placeholder="Name of city" />
+      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      <form onSubmit={handleFormSubmit}>
+        <input value={inputValue} onChange={e=>setInputValue(e.target.value)} placeholder="Name of city" />
       </form>
-      <p>Completion result: {completion}</p>
     </div>
   );
 }
 ```
 
-Requests sent using the `useCompletion` hook are handled by a standard server route. This example shows how to define a POST route using a Next.js Route Handler.
+Requests sent using the `useChat()` hook are handled by a standard server route. This example shows how to define a POST route using a Next.js Route Handler.
 
-```typescript filename="app/api/completion/route.ts" showLineNumbers copy
-import { mastra } from "../../../mastra";
+```typescript filename="app/api/chat/route.ts" copy
+import { mastra } from "../../mastra";
 
 export async function POST(req: Request) {
-  const { prompt } = await req.json();
+  const { messages } = await req.json();
   const myAgent = mastra.getAgent("weatherAgent");
-  const stream = await myAgent.stream([{ role: "user", content: prompt }]);
+  const stream = await myAgent.stream(messages, { format: 'aisdk' });
 
-  return stream.toDataStreamResponse();
+  return stream.toUIMessageStreamResponse()
 }
 ```
 
-### Using the `useObject()` Hook
+> When using `useChat()` with agent memory, refer to the [Agent Memory section](/docs/agents/agent-memory#usechat) for key implementation details.
 
-The `useObject` hook consumes streamed text from a Mastra agent and parses it into a structured JSON object based on a defined schema.
+### Using `useCompletion()`
 
-```typescript {7} filename="app/test/object.tsx" showLineNumbers copy
+The `useCompletion()` hook handles single-turn completions between your frontend and a Mastra agent, allowing you to send a prompt and receive a streamed response over HTTP.
+
+```typescript {6-8} filename="app/test/completion.tsx" copy
 "use client";
 
-import { experimental_useObject as useObject } from "@ai-sdk/react";
-import { z } from "zod";
+import { useCompletion } from "@ai-sdk/react";
 
-export function Object() {
-  const { object, submit } = useObject({
-    api: "api/object",
-    schema: z.object({
-      weather: z.string()
-    })
+export function Completion() {
+  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
+    api: "api/completion"
   });
 
   return (
     <div>
-      <button onClick={() => submit("London")}>Generate</button>
-      {object ? <pre>{JSON.stringify(object, null, 2)}</pre> : null}
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={handleInputChange} placeholder="Name of city" />
+      </form>
+      <p>Completion result: {completion}</p>
     </div>
   );
 }
 ```
 
-Requests sent using the `useObject` hook are handled by a standard server route. This example shows how to define a POST route using a Next.js Route Handler.
+Requests sent using the `useCompletion()` hook are handled by a standard server route. This example shows how to define a POST route using a Next.js Route Handler.
 
-```typescript filename="app/api/object/route.ts" showLineNumbers copy
+```typescript filename="app/api/completion/route.ts" copy
 import { mastra } from "../../../mastra";
-import { z } from "zod";
 
 export async function POST(req: Request) {
-  const body = await req.json();
+  const { prompt } = await req.json();
   const myAgent = mastra.getAgent("weatherAgent");
-  const stream = await myAgent.stream(body, {
-    structuredOutput: {
-      schema: z.object({
-        weather: z.string()
-      })
-    },
-    maxSteps: 1
-  });
+  const stream = await myAgent.stream([{ role: "user", content: prompt }], { format: 'aisdk' });
 
-  return stream.toTextStreamResponse();
+  return stream.toUIMessageStreamResponse()
 }
 ```
 
-### Passing additional data with `sendExtraMessageFields`
+### Passing additional data
 
-The `sendExtraMessageFields` option allows you to pass additional data from the frontend to Mastra. This data is available on the server as `RuntimeContext`.
+`sendMessage()` allows you to pass additional data from the frontend to Mastra. This data can then be used on the server as `RuntimeContext`.
 
-```typescript {8,14-20} filename="app/test/chat-extra.tsx" showLineNumbers copy
+```typescript {16-26} filename="app/test/chat-extra.tsx" copy
 "use client";
 
 import { useChat } from "@ai-sdk/react";
+import { useState } from "react";
 
 export function ChatExtra() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    api: "/api/chat-extra",
-    sendExtraMessageFields: true
+  const [inputValue, setInputValue] = useState('')
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/chat',
+    }),
   });
 
   const handleFormSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    handleSubmit(e, {
-      data: {
-        userId: "user123",
-        preferences: {
-          language: "en",
-          temperature: "celsius"
+    sendMessage({ text: inputValue }, {
+      body: {
+        data: {
+          userId: "user123",
+          preferences: {
+            language: "en",
+            temperature: "celsius"
+          }
         }
       }
     });
@@ -225,16 +408,14 @@ export function ChatExtra() {
     <div>
       <pre>{JSON.stringify(messages, null, 2)}</pre>
       <form onSubmit={handleFormSubmit}>
-        <input value={input} onChange={handleInputChange} placeholder="Name of city" />
+        <input value={inputValue} onChange={e=>setInputValue(e.target.value)} placeholder="Name of city" />
       </form>
     </div>
   );
 }
 ```
 
-Requests sent using `sendExtraMessageFields` are handled by a standard server route. This example shows how to extract the custom data and populate a `RuntimeContext` instance.
-
-```typescript {8,12} filename="app/api/chat-extra/route.ts" showLineNumbers copy
+```typescript {8,12} filename="app/api/chat-extra/route.ts" copy
 import { mastra } from "../../../mastra";
 import { RuntimeContext } from "@mastra/core/runtime-context";
 
@@ -250,17 +431,16 @@ export async function POST(req: Request) {
     }
   }
 
-  const stream = await myAgent.stream(messages, { runtimeContext });
-  return stream.toDataStreamResponse();
+  const stream = await myAgent.stream(messages, { runtimeContext, format: 'aisdk'  });
+  return stream.toUIMessageStreamResponse();
 }
 ```
 
-
 ### Handling `runtimeContext` with `server.middleware`
 
 You can also populate the `RuntimeContext` by reading custom data in a server middleware:
 
-```typescript {6} filename="mastra/index.ts" showLineNumbers copy
+```typescript {8,17} filename="mastra/index.ts" copy
 import { Mastra } from "@mastra/core/mastra";
 
 export const mastra = new Mastra({
@@ -290,118 +470,9 @@ export const mastra = new Mastra({
 });
 ```
 
-> You can then access this data in your tools via the `runtimeContext` parameter. See the [Agent Runtime Context documentation](/docs/agents/runtime-context) for more details.
-
-## Streaming data
-
-The `ai` package provides utilities for managing custom data streams. In some cases, you may want to send structured updates or annotations to the client using an agent's `dataStream`.
-
-Install the required package:
-
-<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install ai
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add ai
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add ai
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    bun add ai
-    ```
-  </Tabs.Tab>
-</Tabs>
-
-### Using `createDataStream()`
-
-The `createDataStream` function allows you to stream additional data to the client.
-
-```typescript {1, 6} filename="mastra/agents/weather-agent.ts" showLineNumbers copy
-import { createDataStream } from "ai";
-import { Agent } from "@mastra/core/agent";
-
-export const weatherAgent = new Agent({...});
-
-createDataStream({
-  async execute(dataStream) {
-    dataStream.writeData({ value: "Hello" });
-
-    dataStream.writeMessageAnnotation({ type: "status", value: "processing" });
-
-    const agentStream = await weatherAgent.stream("What is the weather");
-
-    agentStream.mergeIntoDataStream(dataStream);
-  },
-  onError: (error) => `Custom error: ${error}`
-});
-```
-
-### Using `createDataStreamResponse()`
-
-The `createDataStreamResponse` function creates a response object that streams data to the client.
-
-```typescript {2,9} filename="app/api/chat-stream/route.ts" showLineNumbers copy
-import { mastra } from "../../../mastra";
-import { createDataStreamResponse } from "ai";
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-  const myAgent = mastra.getAgent("weatherAgent");
-  const agentStream = await myAgent.stream(messages);
-
-  const response = createDataStreamResponse({
-    status: 200,
-    statusText: "OK",
-    headers: {
-      "Custom-Header": "value"
-    },
-    async execute(dataStream) {
-      dataStream.writeData({ value: "Hello" });
-
-      dataStream.writeMessageAnnotation({
-        type: "status",
-        value: "processing"
-      });
-
-      agentStream.mergeIntoDataStream(dataStream);
-    },
-    onError: (error) => `Custom error: ${error}`
-  });
-
-  return response;
-}
-```
-
-## Vercel AI SDK v5
+> You can then access this data in your tools via the `runtimeContext` parameter. See the [Runtime Context documentation](/docs/server-db/runtime-context) for more details.
 
-This guide covers Mastra-specific considerations when migrating from AI SDK v4 to v5.
-
-> Please add any feedback or bug reports to the [AI SDK v5 mega issue in Github.](https://github.com/mastra-ai/mastra/issues/5470)
-
-### Stream Support
-
-Mastra's experimental `stream` method now includes native AI SDK v5 support through the `format` parameter. This provides seamless integration with AI SDK v5's streaming interfaces without requiring compatibility wrappers.
-
-```typescript
-// Use stream with AI SDK v5 format
-const stream = await agent.stream(messages, {
-  format: 'aisdk'  // Enable AI SDK v5 compatibility
-});
-
-// The stream is now compatible with AI SDK v5 interfaces
-return stream.toUIMessageStreamResponse();
-```
-
-### Official migration guide
+## Migrating from AI SDK v4 to v5
 
 Follow the official [AI SDK v5 Migration Guide](https://v5.ai-sdk.dev/docs/migration-guides/migration-guide-5-0) for all AI SDK core breaking changes, package updates, and API changes.
 
@@ -416,7 +487,7 @@ Mastra automatically handles AI SDK v4 data using its internal `MessageList` cla
 
 ### Message Format Conversion
 
-For cases where you need to manually convert messages between AI SDK and Mastra formats, use the `convertMessages` utility:
+For cases where you need to manually convert messages between AI SDK and Mastra formats, use the `convertMessages()` utility:
 
 ```typescript
 import { convertMessages } from '@mastra/core/agent';
@@ -433,68 +504,15 @@ const aiv5Messages = convertMessages(mastraMessages).to('AIV5.Core');
 
 This utility is helpful when you want to fetch messages directly from your storage DB and convert them for use in AI SDK.
 
-### Enabling stream compatibility
-
-To enable AI SDK v5 compatibility, use the `@mastra/ai-sdk` package:
-
-<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install @mastra/ai-sdk
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add @mastra/ai-sdk
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add @mastra/ai-sdk
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    bun add @mastra/ai-sdk
-    ```
-  </Tabs.Tab>
-</Tabs>
-
-```typescript filename="src/mastra/index.ts" showLineNumbers copy
-import { Mastra } from '@mastra/core/mastra';
-import { chatRoute } from '@mastra/ai-sdk';
-
-export const mastra = new Mastra({
-  server: {
-    apiRoutes: [
-      chatRoute({
-        path: '/chat',
-        agent: 'weatherAgent',
-      }),
-    ],
-  },
-});
-```
-
-In your application call the `useChat()` hook.
-```typescript
-const { error, status, sendMessage, messages, regenerate, stop } =
-  useChat({
-    transport: new DefaultChatTransport({
-      api: 'http://localhost:4111/chat',
-    }),
-  });
-```
-
 ### Type Inference for Tools
 
 When using tools with TypeScript in AI SDK v5, Mastra provides type inference helpers to ensure type safety for your tool inputs and outputs.
 
-#### InferUITool
+#### `InferUITool`
 
 The `InferUITool` type helper infers the input and output types of a single Mastra tool:
 
-```typescript filename="app/types.ts" showLineNumbers copy
+```typescript filename="app/types.ts" copy
 import { InferUITool, createTool } from "@mastra/core/tools";
 import { z } from "zod";
 
@@ -525,11 +543,11 @@ type WeatherUITool = InferUITool<typeof weatherTool>;
 // }
 ```
 
-#### InferUITools
+#### `InferUITools`
 
 The `InferUITools` type helper infers the input and output types of multiple tools:
 
-```typescript filename="app/mastra/tools.ts" showLineNumbers copy
+```typescript filename="app/mastra/tools.ts" copy
 import { InferUITools, createTool } from "@mastra/core/tools";
 import { z } from "zod";