@mastra/mcp-docs-server 0.13.37 → 0.13.38

package/.docs/raw/frameworks/web-frameworks/vite-react.mdx

@@ -1,9 +1,10 @@
 ---
-title: "Getting Started with Mastra and Vite/React | Mastra Guides"
+title: "Integrate Mastra in your Vite/React project | Frameworks | Mastra Docs"
 description: A step-by-step guide to integrating Mastra with Vite and React.
 ---
 
-import { Callout, Steps, Tabs } from "nextra/components";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 # Integrate Mastra in your Vite/React project
 
@@ -15,42 +16,45 @@ Mastra integrates with Vite, making it easy to:
 
 Use this guide to scaffold and integrate Mastra with your Vite/React project.
 
-<Callout type="warning">
-  This guide assumes you're using Vite/React with React Router v7 at the root of
-  your project, e.g., `app`.
-</Callout>
+:::warning
+
+This guide assumes you're using Vite/React with React Router v7 at the root of your project, e.g., `app`.
+
+:::
 
 ## Install Mastra
 
 Install the required Mastra packages:
-{/*
-LLM CONTEXT: This Tabs component shows commands for integrating a new Mastra backend project using different package managers.
-Each tab displays the command for that specific package manager to create an integrated Mastra backend service.
-This is part of the "Integrated Backend Integration" approach for Vite/React projects.
-All commands create the same Mastra project but use different package manager syntax.
-*/}
-
-<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm install mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    yarn add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    pnpm add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    bun add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
-    ```
-  </Tabs.Tab>
+
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm install mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash copy
+yarn add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash copy
+pnpm add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
+```
+
+</TabItem>
+<TabItem value="bun" label="bun">
+
+```bash copy
+bun add mastra@latest @mastra/core@latest @mastra/libsql@latest @mastra/client-js@latest
+```
+
+</TabItem>
 </Tabs>
 
 ## Integrate Mastra
@@ -65,7 +69,7 @@ Run the following command to quickly scaffold the default Weather agent with sen
 npx mastra@latest init --dir . --components agents,tools --example --llm openai
 ```
 
-> See [mastra init](/reference/cli/init) for more information.
+> See [mastra init](/reference/cli/create-mastra) for more information.
 
 ### 2. Use the Interactive CLI
 
@@ -75,42 +79,48 @@ If you prefer to customize the setup, run the `init` command and choose from the
 npx mastra@latest init
 ```
 
-<Callout type="warning">
+:::warning
+
 By default, `mastra init` suggests `src` as the install location. If you're using Vite/React at the root of your project (e.g., `app`, not `src/app`), enter `.` when prompted:
-</Callout>
+
+:::
 
 Add the `dev` and `build` scripts to `package.json`:
 
-<Tabs items={["app", "src/app"]}>
-  <Tabs.Tab>
-    ```json filename="package.json"
-    {
-      "scripts": {
-        ...
-        "dev:mastra": "mastra dev --dir mastra",
-        "build:mastra": "mastra build --dir mastra"
-      }
-    }
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```json filename="package.json"
-    {
-      "scripts": {
-        ...
-        "dev:mastra": "mastra dev --dir src/mastra",
-        "build:mastra": "mastra build --dir src/mastra"
-      }
-    }
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="app" label="app">
+
+```json title="package.json"
+{
+  "scripts": {
+    ...
+    "dev:mastra": "mastra dev --dir mastra",
+    "build:mastra": "mastra build --dir mastra"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="src-app" label="src/app">
+
+```json title="package.json"
+{
+  "scripts": {
+    ...
+    "dev:mastra": "mastra dev --dir src/mastra",
+    "build:mastra": "mastra build --dir src/mastra"
+  }
+}
+```
+
+</TabItem>
 </Tabs>
 
 ## Configure TypeScript
 
 Modify the `tsconfig.json` file in your project root:
 
-```json filename="tsconfig.json"
+```json title="tsconfig.json"
 {
   ...
   "exclude": ["dist", ".mastra"]
@@ -119,17 +129,17 @@ Modify the `tsconfig.json` file in your project root:
 
 ## Set Up API Keys
 
-```bash filename=".env" copy
+```bash title=".env" copy
 OPENAI_API_KEY=<your-api-key>
 ```
 
-> Each LLM provider uses a different env var. See [Model Capabilities](/docs/getting-started/model-capability) for more information.
+> Each LLM provider uses a different env var. See [Model Capabilities](https://sdk.vercel.ai/providers) for more information.
 
 ## Update .gitignore
 
 Add `.mastra` to your `.gitignore` file:
 
-```bash filename=".gitignore" copy
+```bash title=".gitignore" copy
 .mastra
 ```
 
@@ -137,20 +147,24 @@ Add `.mastra` to your `.gitignore` file:
 
 Start the Mastra Dev Server to expose your agents as REST endpoints:
 
-<Tabs items={["npm", "CLI"]}>
-  <Tabs.Tab>
-    ```bash copy
-    npm run dev:mastra
-    ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-    ```bash copy
-    mastra dev:mastra
-    ```
-  </Tabs.Tab>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash copy
+npm run dev:mastra
+```
+
+</TabItem>
+<TabItem value="cli" label="CLI">
+
+```bash copy
+mastra dev:mastra
+```
+
+</TabItem>
 </Tabs>
 
-> Once running, your agents are available locally. See [Local Development Environment](/docs/server-db/local-dev-playground) for more information.
+> Once running, your agents are available locally. See [Local Development Environment](/docs/getting-started/studio) for more information.
 
 ## Start Vite Dev Server
 
@@ -165,7 +179,7 @@ mkdir lib
 touch lib/mastra.ts
 ```
 
-```typescript filename="lib/mastra.ts" showLineNumbers copy
+```typescript title="lib/mastra.ts" showLineNumbers copy
 import { MastraClient } from "@mastra/client-js";
 
 export const mastraClient = new MastraClient({
@@ -177,7 +191,7 @@ export const mastraClient = new MastraClient({
 
 Add new `route` to the config:
 
-```typescript filename="app/routes.ts" showLineNumbers copy
+```typescript title="app/routes.ts" showLineNumbers copy
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
 export default [
@@ -194,7 +208,7 @@ Create a new Route, and add the example code:
 touch app/routes/test.tsx
 ```
 
-```typescript filename="app/routes/test.tsx" showLineNumbers copy
+```typescript title="app/routes/test.tsx" showLineNumbers copy
 import { useState } from "react";
 import { mastraClient } from "../../lib/mastra";
 
@@ -236,7 +250,6 @@ Submitting **London** as the city would return a result similar to:
 The current weather in London is partly cloudy with a temperature of 19.3°C, feeling like 17.4°C. The humidity is at 53%, and there is a wind speed of 15.9 km/h, with gusts up to 38.5 km/h.
 ```
 
-
 ## Next steps
 
-- [Monorepo Deployment](../../deployment/monorepo.mdx)
+- [Monorepo Deployment](../../deployment/monorepo)