Skip to Content
DocsFrameworksWeb FrameworksWith SvelteKit

Integrate Mastra in your SvelteKit project

Mastra integrates with SvelteKit, making it easy to:

  • Build flexible APIs to serve AI-powered features
  • Simplify deployment with a unified codebase for frontend and backend
  • Take advantage of SvelteKit’s built-in Actions  or Server Endpoints  for efficient server-client workflows

Use this guide to scaffold and integrate Mastra with your SvelteKit project.

Install Mastra

Install the required Mastra packages:

npm install mastra@latest @mastra/core@latest @mastra/libsql@latest

Integrate Mastra

To integrate Mastra into your project, you have two options:

1. Use the One-Liner

Run the following command to quickly scaffold the default Weather agent with sensible defaults:

npx mastra@latest init --default

See mastra init for more information.

2. Use the Interactive CLI

If you prefer to customize the setup, run the init command and choose from the options when prompted:

npx mastra@latest init

Add the dev and build scripts to package.json:

package.json
{
  "scripts": {
    ...
    "dev:mastra": "mastra dev",
    "build:mastra": "mastra build"
  }
}

Configure TypeScript

Modify the tsconfig.json file in your project root:

tsconfig.json
{
  ...
  "exclude": ["dist", ".mastra"]
}

Set Up API Key

The VITE_ prefix is required for environment variables to be accessible in the Vite environment, that SvelteKit uses.
Read more about Vite environment variables .

.env
VITE_OPENAI_API_KEY=<your-api-key>

Update .gitignore

Add .mastra to your .gitignore file:

.gitignore
.mastra

Update the Mastra Agent

src/mastra/agents/weather-agent.ts
- import { openai } from "@ai-sdk/openai";
+ import { createOpenAI } from "@ai-sdk/openai";
 
+ const openai = createOpenAI({
+   apiKey: import.meta.env?.VITE_OPENAI_API_KEY || process.env.VITE_OPENAI_API_KEY,
+   compatibility: "strict"
+ });

By reading env vars from both import.meta.env and process.env, we ensure that the API key is available in both the SvelteKit dev server and the Mastra Dev Server.

More configuration details are available in the AI SDK docs. See Provider Instance  for more information.

Start the Mastra Dev Server

Start the Mastra Dev Server to expose your agents as REST endpoints:

npm run dev:mastra

Once running, your agents are available locally. See Local Development Environment for more information.

Start SvelteKit Dev Server

With the Mastra Dev Server running, you can start your SvelteKit site in the usual way.

Create Test Directory

mkdir src/routes/test

Create Test Action

Create a new Action, and add the example code:

touch src/routes/test/+page.server.ts
src/routes/test/+page.server.ts
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');
 
		const result = await agent.generate(`What's the weather like in ${city}?`);
		return { result: result.text };
	}
} satisfies Actions;

Create Test Page

Create a new Page file, and add the example code:

touch src/routes/test/+page.svelte
src/routes/test/+page.svelte
<script lang="ts">
	import type { PageProps } from './$types';
	let { form }: PageProps = $props();
</script>
 
<h1>Test</h1>
 
<form method="POST">
	<input name="city" placeholder="Enter city" required />
	<button type="submit">Get Weather</button>
</form>
 
{#if form?.result}
	<pre>{form.result}</pre>
{/if}

You can now navigate to /test in your browser to try it out.

Submitting London as the city would return a result similar to:

The current weather in London is as follows:

- **Temperature:** 16°C (feels like 13.8°C)
- **Humidity:** 62%
- **Wind Speed:** 12.6 km/h
- **Wind Gusts:** 32.4 km/h
- **Conditions:** Overcast

If you need more details or information about a different location, feel free to ask!
With AstroAI SDK v5 (beta)