@mastra/mcp-docs-server 0.13.37 → 0.13.39-alpha.0

package/.docs/raw/frameworks/web-frameworks/sveltekit.mdx

@@ -1,9 +1,12 @@
 ---
-title: "Getting Started with Mastra and SvelteKit | Mastra Guides"
+title: "Integrate Mastra in your SvelteKit project | Frameworks | Mastra Docs"
 description: A step-by-step guide to integrating Mastra with SvelteKit.
 ---
 
-import { Callout, Steps, Tabs } from "nextra/components";
+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 Mastra in your SvelteKit project
 
@@ -15,68 +18,67 @@ Mastra integrates with SvelteKit, making it easy to:
 
 Use this guide to scaffold and integrate Mastra with your SvelteKit project.
 
-<Tabs items={["Actions", "Server Endpoints"]}>
-  <Tabs.Tab>
+<Tabs>
+  <TabItem value="actions" label="Actions">
 
   <Steps>
-## Install Mastra
+
+<StepItem>
+
+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 SvelteKit projects.
-All commands create the same Mastra project but use different package manager syntax.
-*/}
-
-<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
-  <Tabs.Tab>
+
+<Tabs>
+  <TabItem value="npm" label="npm">
     ```bash copy
     npm install mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
     ```bash copy
     yarn add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
     ```bash copy
     pnpm add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="bun" label="bun">
     ```bash copy
     bun add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
-## Integrate Mastra
+</StepItem>
+
+<StepItem>
 
 To integrate Mastra into your project, you have two options:
 
-### 1. Use the One-Liner
+- Use the One-Liner
 
-Run the following command to quickly scaffold the default Weather agent with sensible defaults:
+  Run the following command to quickly scaffold the default Weather agent with sensible defaults:
 
-```bash copy
-npx mastra@latest init --default
-```
+  ```bash copy
+  npx mastra@latest init --default
+  ```
 
-> See [mastra init](/reference/cli/init) for more information.
+  > See [mastra init](/reference/cli/create-mastra) for more information.
 
-### 2. Use the Interactive CLI
+- Use the Interactive CLI
 
-If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
+  If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
 
-```bash copy
-npx mastra@latest init
-```
+  ```bash copy
+  npx mastra@latest init
+  ```
 
 Add the `dev` and `build` scripts to `package.json`:
 
-```json filename="package.json"
+```json title="package.json"
 {
   "scripts": {
     ...
@@ -86,37 +88,47 @@ Add the `dev` and `build` scripts to `package.json`:
 }
 ```
 
-## Configure TypeScript
+</StepItem>
+
+<StepItem>
 
 Modify the `tsconfig.json` file in your project root:
 
-```json filename="tsconfig.json"
+```json title="tsconfig.json"
 {
   ...
   "exclude": ["dist", ".mastra"]
 }
 ```
 
-## Set Up API Key
+</StepItem>
+
+<StepItem>
 
 The `VITE_` prefix is required for environment variables to be accessible in the Vite environment, that SvelteKit uses.
 [Read more about Vite environment variables](https://vite.dev/guide/env-and-mode.html#env-variables).
 
-```bash filename=".env" copy
+```bash title=".env" copy
 VITE_OPENAI_API_KEY=<your-api-key>
 ```
 
-## Update .gitignore
+</StepItem>
+
+<StepItem>
 
 Add `.mastra` to your `.gitignore` file:
 
-```bash filename=".gitignore" copy
+```bash title=".gitignore" copy
 .mastra
 ```
 
-## Update the Mastra Agent
+</StepItem>
 
-```diff filename="src/mastra/agents/weather-agent.ts"
+<StepItem>
+
+Update the Mastra Agent
+
+```diff title="src/mastra/agents/weather-agent.ts"
 - import { openai } from "@ai-sdk/openai";
 + import { createOpenAI } from "@ai-sdk/openai";
 
@@ -130,36 +142,44 @@ By reading env vars from both `import.meta.env` and `process.env`, we ensure tha
 
 > More configuration details are available in the AI SDK docs. See [Provider Instance](https://ai-sdk.dev/providers/ai-sdk-providers/openai#provider-instance) for more information.
 
-## Start the Mastra Dev Server
+</StepItem>
+
+<StepItem>
 
 Start the Mastra Dev Server to expose your agents as REST endpoints:
 
-<Tabs items={["npm", "CLI"]}>
-  <Tabs.Tab>
+<Tabs>
+  <TabItem value="npm" label="npm">
     ```bash copy
     npm run dev:mastra
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="cli" label="CLI">
     ```bash copy
     mastra dev:mastra
     ```
-  </Tabs.Tab>
+  </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 SvelteKit Dev Server
+</StepItem>
+
+<StepItem>
 
 With the Mastra Dev Server running, you can start your SvelteKit site in the usual way.
 
-## Create Test Directory
+</StepItem>
+
+<StepItem>
 
 ```bash copy
 mkdir src/routes/test
 ```
 
-### Create Test Action
+</StepItem>
+
+<StepItem>
 
 Create a new Action, and add the example code:
 
@@ -167,23 +187,24 @@ Create a new Action, and add the example code:
 touch src/routes/test/+page.server.ts
 ```
 
-```typescript filename="src/routes/test/+page.server.ts" showLineNumbers copy
-import type { Actions } from './$types';
-import { mastra } from '../../mastra';
+```typescript title="src/routes/test/+page.server.ts" showLineNumbers copy
+import type { Actions } from "./$types";
+import { mastra } from "../../mastra";
 
 export const actions = {
-	default: async (event) => {
-		const city = (await event.request.formData()).get('city')!.toString();
-		const agent = mastra.getAgent('weatherAgent');
+  default: async (event) => {
+    const city = (await event.request.formData()).get("city")!.toString();
+    const agent = mastra.getAgent("weatherAgent");
 
-		const result = await agent.generate(`What's the weather like in ${city}?`);
-		return { result: result.text };
-	}
+    const result = await agent.generate(`What's the weather like in ${city}?`);
+    return { result: result.text };
+  },
 } satisfies Actions;
-
 ```
 
-### Create Test Page
+</StepItem>
+
+<StepItem>
 
 Create a new Page file, and add the example code:
 
@@ -191,9 +212,9 @@ Create a new Page file, and add the example code:
 touch src/routes/test/+page.svelte
 ```
 
-```typescript filename="src/routes/test/+page.svelte" showLineNumbers copy
+```typescript title="src/routes/test/+page.svelte" showLineNumbers copy
 <script lang="ts">
-	import type { PageProps } from './$types';
+	import type { PageProps} from './$types';
 	let { form }: PageProps = $props();
 </script>
 
@@ -225,70 +246,70 @@ The current weather in London is as follows:
 
 If you need more details or information about a different location, feel free to ask!
 ```
+
+</StepItem>
+
   </Steps>
-  </Tabs.Tab>
+</TabItem>
 
-  <Tabs.Tab>
+<TabItem value="server-endpoints" label="Server Endpoints">
 
   <Steps>
-## Install Mastra
+
+<StepItem>
 
 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 Framework Integration" approach for SvelteKit projects.
-All commands create the same Mastra project but use different package manager syntax.
-*/}
-
-<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
-  <Tabs.Tab>
+
+<Tabs>
+  <TabItem value="npm" label="npm">
     ```bash copy
     npm install mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
     ```bash copy
     yarn add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
     ```bash copy
     pnpm add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="bun" label="bun">
     ```bash copy
     bun add mastra@latest @mastra/core@latest @mastra/libsql@latest
     ```
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
-## Integrate Mastra
+</StepItem>
+
+<StepItem>
 
 To integrate Mastra into your project, you have two options:
 
-### 1. Use the One-Liner
+- Use the One-Liner
 
-Run the following command to quickly scaffold the default Weather agent with sensible defaults:
+  Run the following command to quickly scaffold the default Weather agent with sensible defaults:
 
-```bash copy
-npx mastra@latest init --default
-```
+  ```bash copy
+  npx mastra@latest init --default
+  ```
 
-> See [mastra init](/reference/cli/init) for more information.
+  > See [mastra init](/reference/cli/create-mastra) for more information.
 
-### 2. Use the Interactive CLI
+- Use the Interactive CLI
 
-If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
+  If you prefer to customize the setup, run the `init` command and choose from the options when prompted:
 
-```bash copy
-npx mastra@latest init
-```
+  ```bash copy
+  npx mastra@latest init
+  ```
 
 Add the `dev` and `build` scripts to `package.json`:
 
-```json filename="package.json"
+```json title="package.json"
 {
   "scripts": {
     ...
@@ -298,37 +319,47 @@ Add the `dev` and `build` scripts to `package.json`:
 }
 ```
 
-## Configure TypeScript
+</StepItem>
+
+<StepItem>
 
 Modify the `tsconfig.json` file in your project root:
 
-```json filename="tsconfig.json"
+```json title="tsconfig.json"
 {
   ...
   "exclude": ["dist", ".mastra"]
 }
 ```
 
-## Set Up API Key
+</StepItem>
+
+<StepItem>
 
 The `VITE_` prefix is required for environment variables to be accessible in the Vite environment, that SvelteKit uses.
 [Read more about Vite environment variables](https://vite.dev/guide/env-and-mode.html#env-variables).
 
-```bash filename=".env" copy
+```bash title=".env" copy
 VITE_OPENAI_API_KEY=<your-api-key>
 ```
 
-## Update .gitignore
+</StepItem>
+
+<StepItem>
 
 Add `.mastra` to your `.gitignore` file:
 
-```bash filename=".gitignore" copy
+```bash title=".gitignore" copy
 .mastra
 ```
 
-## Update the Mastra Agent
+</StepItem>
+
+<StepItem>
 
-```diff filename="src/mastra/agents/weather-agent.ts"
+Update the Mastra Agent
+
+```diff title="src/mastra/agents/weather-agent.ts"
 - import { openai } from "@ai-sdk/openai";
 + import { createOpenAI } from "@ai-sdk/openai";
 
@@ -342,36 +373,44 @@ By reading env vars from both `import.meta.env` and `process.env`, we ensure tha
 
 > More configuration details are available in the AI SDK docs. See [Provider Instance](https://ai-sdk.dev/providers/ai-sdk-providers/openai#provider-instance) for more information.
 
-## Start the Mastra Dev Server
+</StepItem>
+
+<StepItem>
 
 Start the Mastra Dev Server to expose your agents as REST endpoints:
 
-<Tabs items={["npm", "CLI"]}>
-  <Tabs.Tab>
+<Tabs>
+  <TabItem value="npm" label="npm">
     ```bash copy
     npm run dev:mastra
     ```
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="cli" label="CLI">
     ```bash copy
     mastra dev:mastra
     ```
-  </Tabs.Tab>
+  </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.
+
+</StepItem>
 
-## Start SvelteKit Dev Server
+<StepItem>
 
 With the Mastra Dev Server running, you can start your SvelteKit site in the usual way.
 
-## Create API Directory
+</StepItem>
+
+<StepItem>
 
 ```bash copy
 mkdir src/routes/weather-api
 ```
 
-### Create Test Endpoint
+</StepItem>
+
+<StepItem>
 
 Create a new Endpoint, and add the example code:
 
@@ -379,23 +418,24 @@ Create a new Endpoint, and add the example code:
 touch src/routes/weather-api/+server.ts
 ```
 
-```typescript filename="src/routes/weather-api/+server.ts" showLineNumbers copy
-import { json } from '@sveltejs/kit';
-import { mastra } from '../../mastra';
+```typescript title="src/routes/weather-api/+server.ts" showLineNumbers copy
+import { json } from "@sveltejs/kit";
+import { mastra } from "../../mastra";
 
 export async function POST({ request }) {
-	const { city } = await request.json();
+  const { city } = await request.json();
 
-	const response = await mastra
-		.getAgent('weatherAgent')
-		.generate(`What's the weather like in ${city}?`);
+  const response = await mastra
+    .getAgent("weatherAgent")
+    .generate(`What's the weather like in ${city}?`);
 
-	return json({ result: response.text });
+  return json({ result: response.text });
 }
-
 ```
 
-### Create Test Page
+</StepItem>
+
+<StepItem>
 
 Create a new Page, and add the example code:
 
@@ -403,7 +443,7 @@ Create a new Page, and add the example code:
 touch src/routes/weather-api-test/+page.svelte
 ```
 
-```typescript filename="src/routes/weather-api-test/+page.svelte" showLineNumbers copy
+```typescript title="src/routes/weather-api-test/+page.svelte" showLineNumbers copy
 <script lang="ts">
 	let result = $state<string | null>(null);
 	async function handleFormSubmit(event: Event) {
@@ -435,7 +475,6 @@ touch src/routes/weather-api-test/+page.svelte
 {/if}
 ```
 
-
 > You can now navigate to `/weather-api-test` in your browser to try it out.
 
 Submitting **London** as the city would return a result similar to:
@@ -451,11 +490,13 @@ The current weather in London is as follows:
 
 If you need more details or information about a different location, feel free to ask!
 ```
+
+</StepItem>
+
   </Steps>
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
-
 ## Next steps
 
-- [Monorepo Deployment](../../deployment/monorepo.mdx)
+- [Monorepo Deployment](../../deployment/monorepo)