@mastra/mcp-docs-server 0.13.37 → 0.13.38

package/.docs/raw/frameworks/agentic-uis/copilotkit.mdx

@@ -1,10 +1,12 @@
 ---
-title: "Using with CopilotKit"
+title: "Integrate CopilotKit with Mastra | Frameworks | Mastra Docs"
 description: "Learn how Mastra leverages the CopilotKit's AGUI library and how you can leverage it to build user experiences"
 ---
 
-import { Tabs, Steps } from "nextra/components";
-import Image from "next/image";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import Steps from "@site/src/components/Steps";
+import StepItem from "@site/src/components/StepItem";
 
 # Integrate CopilotKit with Mastra
 
@@ -17,47 +19,53 @@ This guide shows two distinct integration approaches:
 1. Integrate CopilotKit in your Mastra server with a separate React frontend.
 2. Integrate CopilotKit in your Next.js app
 
-<Tabs items={["Mastra Server", "Next.js" ]}>
-  <Tabs.Tab>
+<Tabs>
+<TabItem value="mastra-server" label="Mastra Server">
 
   <Steps>
-## Install React Dependencies
+
+  <StepItem>
 
 In your React frontend, install the required CopilotKit packages:
 
-<Tabs items={["npm", "yarn", "pnpm"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install @copilotkit/react-core @copilotkit/react-ui
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add @copilotkit/react-core @copilotkit/react-ui
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add @copilotkit/react-core @copilotkit/react-ui
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm install @copilotkit/react-core @copilotkit/react-ui
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash copy
+yarn add @copilotkit/react-core @copilotkit/react-ui
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash copy
+pnpm add @copilotkit/react-core @copilotkit/react-ui
+```
+
+</TabItem>
 </Tabs>
 
-## Create CopilotKit Component
+</StepItem>
+
+<StepItem>
 
 Create a CopilotKit component in your React frontend:
 
-```tsx filename="components/copilotkit-component.tsx" showLineNumbers copy
+```tsx title="components/copilotkit-component.tsx" copy
 import { CopilotChat } from "@copilotkit/react-ui";
 import { CopilotKit } from "@copilotkit/react-core";
 import "@copilotkit/react-ui/styles.css";
 
-export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string}) {
+export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string }) {
   return (
-    <CopilotKit
-      runtimeUrl={runtimeUrl}
-      agent="weatherAgent"
-    >
+    <CopilotKit runtimeUrl={runtimeUrl} agent="weatherAgent">
       <CopilotChat
         labels={{
           title: "Your Assistant",
@@ -69,37 +77,47 @@ export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string}) {
 }
 ```
 
-## Install Dependencies
+</StepItem>
+
+<StepItem>
 
 If you have not yet set up your Mastra server, follow the [getting started guide](/docs/getting-started/installation) to set up a new Mastra project.
 
 In your Mastra server, install additional packages for CopilotKit integration:
 
-<Tabs items={["npm", "yarn", "pnpm"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm install @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash copy
+yarn add @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash copy
+pnpm add @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
 </Tabs>
 
-## Configure Mastra Server
+</StepItem>
+
+<StepItem>
 
 Configure your Mastra instance to include CopilotKit's runtime endpoint:
 
-```typescript filename="src/mastra/index.ts" showLineNumbers copy {5-8,12-28}
+```typescript title="src/mastra/index.ts" copy {2,5-8,12-28}
 import { Mastra } from "@mastra/core/mastra";
-import { registerCopilotKit } from "@ag-ui/mastra";
+import { registerCopilotKit } from "@ag-ui/mastra/copilotkit";
 import { weatherAgent } from "./agents/weather-agent";
 
 type WeatherRuntimeContext = {
@@ -113,78 +131,94 @@ export const mastra = new Mastra({
     cors: {
       origin: "*",
       allowMethods: ["*"],
-      allowHeaders: ["*"]
+      allowHeaders: ["*"],
     },
     apiRoutes: [
       registerCopilotKit<WeatherRuntimeContext>({
         path: "/copilotkit",
         resourceId: "weatherAgent",
         setContext: (c, runtimeContext) => {
-          runtimeContext.set("user-id", c.req.header("X-User-ID") || "anonymous");
+          runtimeContext.set(
+            "user-id",
+            c.req.header("X-User-ID") || "anonymous",
+          );
           runtimeContext.set("temperature-scale", "celsius");
-        }
-      })
-    ]
-  }
+        },
+      }),
+    ],
+  },
 });
 ```
 
-## Usage in your React App
+</StepItem>
+
+<StepItem>
 
 Use the component in your React app with your Mastra server URL:
 
-```tsx filename="App.tsx" showLineNumbers copy {5}
+```tsx title="App.tsx" copy {5}
 import { CopilotKitComponent } from "./components/copilotkit-component";
 
 function App() {
-  return (
-    <CopilotKitComponent runtimeUrl="http://localhost:4111/copilotkit" />
-  );
+  return <CopilotKitComponent runtimeUrl="http://localhost:4111/copilotkit" />;
 }
 
 export default App;
 ```
 
+Now start both the Mastra server and your frontend.
+
+</StepItem>
+
   </Steps>
-  </Tabs.Tab>
-  
-  <Tabs.Tab>
+ </TabItem>
+
+  <TabItem value="nextjs" label="Next.js">
 
   <Steps>
-  ## Install Dependencies
+
+<StepItem>
 
 In your Next.js app, install the required packages:
 
-<Tabs items={["npm", "yarn", "pnpm"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash copy
+yarn add @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash copy
+pnpm add @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/mastra
+```
+
+</TabItem>
 </Tabs>
 
-## Create CopilotKit Component [#full-stack-nextjs-create-copilotkit-component]
+</StepItem>
+
+<StepItem>
 
 Create a CopilotKit component:
 
-```tsx filename="components/copilotkit-component.tsx" showLineNumbers copy
+```tsx title="components/copilotkit-component.tsx" copy
 'use client';
 import { CopilotChat } from "@copilotkit/react-ui";
 import { CopilotKit } from "@copilotkit/react-core";
 import "@copilotkit/react-ui/styles.css";
 
 export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string}) {
-  return (                                                       y
+  return (
     <CopilotKit
       runtimeUrl={runtimeUrl}
       agent="weatherAgent"
@@ -200,19 +234,21 @@ export function CopilotKitComponent({ runtimeUrl }: { runtimeUrl: string}) {
 }
 ```
 
-## Create API Route
+</StepItem>
+
+<StepItem>
 
 There are two approaches for the API route determined by how you're integrating Mastra in your Next.js application.
 
 1. For a full-stack Next.js app with an instance of Mastra integrated into the app.
 2. For a Next.js app with a separate Mastra server and the Mastra Client SDK.
 
-<Tabs items={["With a Mastra instance", "With the Mastra Client SDK"]}>
-<Tabs.Tab>
+<Tabs>
+  <TabItem value="mastra-instance" label="With a Mastra instance">
 
 Create an API route that connects to local Mastra agents.
 
-```typescript filename="app/api/copilotkit/route.ts" showLineNumbers copy {1-7,11-26}
+```typescript title="app/api/copilotkit/route.ts" copy {1-7,11-26}
 import { mastra } from "../../mastra";
 import {
   CopilotRuntime,
@@ -242,34 +278,38 @@ export const POST = async (req: NextRequest) => {
 };
 ```
 
-</Tabs.Tab>
-<Tabs.Tab>
-
-## Install the Mastra Client SDK
+  </TabItem>
+  <TabItem value="mastra-client" label="With the Mastra Client SDK">
 
 Install the Mastra Client SDK.
 
-<Tabs items={["npm", "yarn", "pnpm"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install @mastra/client-js
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add @mastra/client-js
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-     pnpm add @mastra/client-js
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm install @mastra/client-js
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash copy
+yarn add @mastra/client-js
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash copy
+pnpm add @mastra/client-js
+```
+
+</TabItem>
 </Tabs>
 
 Create an API route that connects to remote Mastra agents:
 
-```typescript filename="app/api/copilotkit/route.ts" showLineNumbers copy {1-7,12-26}
+```typescript title="app/api/copilotkit/route.ts" copy {1-7,12-26}
 import { MastraClient } from "@mastra/client-js";
 import {
   CopilotRuntime,
@@ -299,39 +339,40 @@ export const POST = async (req: NextRequest) => {
 };
 ```
 
-      </Tabs.Tab>
-    </Tabs>
+  </TabItem>
+</Tabs>
+
+</StepItem>
 
-## Use Component
+<StepItem>
 
 Use the component with the local API endpoint:
 
-```tsx filename="App.tsx" showLineNumbers copy {5}
+```tsx title="App.tsx" copy {5}
 import { CopilotKitComponent } from "./components/copilotkit-component";
 
 function App() {
-  return (
-    <CopilotKitComponent runtimeUrl="/api/copilotkit" />
-  );
+  return <CopilotKitComponent runtimeUrl="/api/copilotkit" />;
 }
 
 export default App;
 ```
 
+</StepItem>
+
   </Steps>
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
 Start building the future!
 
 <br />
 
-<Image
+<img
   className="rounded-lg"
-  src="/image/copilotkit/cpkoutput.jpg"
+  src="/img/copilotkit/cpkoutput.jpg"
   alt="CopilotKit output"
-  width={700}
-  height={700}
+  style={{ maxWidth: "700px", width: "100%" }}
 />
 
 ## Next Steps

package/.docs/raw/frameworks/agentic-uis/openrouter.mdx

@@ -1,16 +1,18 @@
 ---
-title: "Using with OpenRouter"
+title: "Use OpenRouter with Mastra | Frameworks | Mastra Docs"
 description: "Learn how to integrate OpenRouter with Mastra"
 ---
 
-import { Steps } from 'nextra/components'
+import Steps from "@site/src/components/Steps";
+import StepItem from "@site/src/components/StepItem";
 
 # Use OpenRouter with Mastra
 
 Integrate OpenRouter with Mastra to leverage the numerous models available on OpenRouter.
 
 <Steps>
-## Initialize a Mastra Project
+
+<StepItem>
 
 The simplest way to get started with Mastra is to use the `mastra` CLI to initialize a new project:
 
@@ -19,17 +21,20 @@ npx create-mastra@latest
 ```
 
 You'll be guided through prompts to set up your project. For this example, select:
+
 - Name your project: my-mastra-openrouter-app
 - Components: Agents (recommended)
 - For default provider, select OpenAI (recommended) - we'll configure OpenRouter manually later
 - Optionally include example code
 
-## Configure OpenRouter
+</StepItem>
+
+<StepItem>
 
 After creating your project with `create-mastra`, you'll find a `.env` file in your project root.
-Since we selected OpenAI during setup, we'll configure OpenRouter manually: 
+Since we selected OpenAI during setup, we'll configure OpenRouter manually:
 
-```bash filename=".env" copy
+```bash title=".env" copy
 OPENROUTER_API_KEY=
 ```
 
@@ -45,36 +50,40 @@ Then, we install the `@openrouter/ai-sdk-provider` package:
 npm install @openrouter/ai-sdk-provider
 ```
 
-## Configure your Agent to use OpenRouter
+</StepItem>
+
+<StepItem>
 
 We will now configure our agent to use OpenRouter.
 
-```typescript filename="src/mastra/agents/assistant.ts" copy showLineNumbers {4-6,11}
+```typescript title="src/mastra/agents/assistant.ts" copy showLineNumbers {4-6,11}
 import { Agent } from "@mastra/core/agent";
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
 const openrouter = createOpenRouter({
-    apiKey: process.env.OPENROUTER_API_KEY,
-})
+  apiKey: process.env.OPENROUTER_API_KEY,
+});
 
 export const assistant = new Agent({
-    name: "assistant",
-    instructions: "You are a helpful assistant.",
-    model: openrouter("anthropic/claude-sonnet-4"),
-})
+  name: "assistant",
+  instructions: "You are a helpful assistant.",
+  model: openrouter("anthropic/claude-sonnet-4"),
+});
 ```
 
 Make sure to register your agent to the Mastra instance:
 
-```typescript filename="src/mastra/index.ts" copy showLineNumbers {4}
+```typescript title="src/mastra/index.ts" copy showLineNumbers {4}
 import { assistant } from "./agents/assistant";
 
 export const mastra = new Mastra({
-    agents: { assistant }
-})
+  agents: { assistant },
+});
 ```
 
-## Run and Test your Agent
+</StepItem>
+
+<StepItem>
 
 ```bash copy
 npm run dev
@@ -84,6 +93,8 @@ This will start the Mastra development server.
 
 You can now test your agent by visiting [http://localhost:4111](http://localhost:4111) for the playground or via the Mastra API at [http://localhost:4111/api/agents/assistant/stream](http://localhost:4111/api/agents/assistant/stream).
 
+</StepItem>
+
 </Steps>
 
 ## Advanced Configuration
@@ -94,49 +105,49 @@ For more control over your OpenRouter requests, you can pass additional configur
 
 You can pass provider-wide options to the OpenRouter provider:
 
-```typescript filename="src/mastra/agents/assistant.ts" {6-10} copy showLineNumbers
+```typescript title="src/mastra/agents/assistant.ts" {6-10} copy showLineNumbers
 import { Agent } from "@mastra/core/agent";
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
 const openrouter = createOpenRouter({
-    apiKey: process.env.OPENROUTER_API_KEY,
-    extraBody: {
-        reasoning: {
-            max_tokens: 10,
-        }
-    }
-})
+  apiKey: process.env.OPENROUTER_API_KEY,
+  extraBody: {
+    reasoning: {
+      max_tokens: 10,
+    },
+  },
+});
 
 export const assistant = new Agent({
-    name: "assistant",
-    instructions: "You are a helpful assistant.",
-    model: openrouter("anthropic/claude-sonnet-4"),
-})
+  name: "assistant",
+  instructions: "You are a helpful assistant.",
+  model: openrouter("anthropic/claude-sonnet-4"),
+});
 ```
 
 ### Model-specific options:
 
 You can pass model-specific options to the OpenRouter provider:
 
-```typescript filename="src/mastra/agents/assistant.ts" {11-17} copy showLineNumbers
+```typescript title="src/mastra/agents/assistant.ts" {11-17} copy showLineNumbers
 import { Agent } from "@mastra/core/agent";
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
 const openrouter = createOpenRouter({
-    apiKey: process.env.OPENROUTER_API_KEY,
-})
+  apiKey: process.env.OPENROUTER_API_KEY,
+});
 
 export const assistant = new Agent({
-    name: "assistant",
-    instructions: "You are a helpful assistant.",
-    model: openrouter("anthropic/claude-sonnet-4", {
-        extraBody: {
-            reasoning: {
-                max_tokens: 10,
-            }
-        }
-    }),
-})
+  name: "assistant",
+  instructions: "You are a helpful assistant.",
+  model: openrouter("anthropic/claude-sonnet-4", {
+    extraBody: {
+      reasoning: {
+        max_tokens: 10,
+      },
+    },
+  }),
+});
 ```
 
 ### Provider-specific options:
@@ -147,19 +158,19 @@ You can pass provider-specific options to the OpenRouter provider:
 // Get a response with provider-specific options
 const response = await assistant.generate([
   {
-    role: 'system',
+    role: "system",
     content:
-      'You are Chef Michel, a culinary expert specializing in ketogenic (keto) diet...',
+      "You are Chef Michel, a culinary expert specializing in ketogenic (keto) diet...",
     providerOptions: {
       // Provider-specific options - key can be 'anthropic' or 'openrouter'
       anthropic: {
-        cacheControl: { type: 'ephemeral' },
+        cacheControl: { type: "ephemeral" },
       },
     },
   },
   {
-    role: 'user',
-    content: 'Can you suggest a keto breakfast?',
+    role: "user",
+    content: "Can you suggest a keto breakfast?",
   },
 ]);
 ```