SvelteKitプロジェクトにMastraを統合する

npx mastra@latest init --default

npx mastra@latest init

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

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

VITE_OPENAI_API_KEY=<your-api-key>

.mastra

- 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"
+ });

mkdir src/routes/test

touch 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;
 

touch 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}
 

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!

npx mastra@latest init --default

npx mastra@latest init

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

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

VITE_OPENAI_API_KEY=<your-api-key>

.mastra

- 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"
+ });

mkdir src/routes/weather-api

touch src/routes/weather-api/+server.ts

import { json } from '@sveltejs/kit';
import { mastra } from '../../mastra';
 
export async function POST({ request }) {
	const { city } = await request.json();
 
	const response = await mastra
		.getAgent('weatherAgent')
		.generate(`What's the weather like in ${city}?`);
 
	return json({ result: response.text });
}
 

touch src/routes/weather-api-test/+page.svelte

<script lang="ts">
	let result = $state<string | null>(null);
	async function handleFormSubmit(event: Event) {
		event.preventDefault();
		const formData = new FormData(event.currentTarget);
		const city = formData.get('city')?.toString();
		if (city) {
			const response = await fetch('/weather-api', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({ city })
			});
			const data = await response.json();
			result = data.result;
		}
	}
</script>
 
<h1>Test</h1>
<form method="POST" onsubmit={handleFormSubmit}>
	<input name="city" placeholder="Enter city" required />
	<button type="submit">Get Weather</button>
</form>
 
{#if result}
	<pre>{result}</pre>
{/if}

The current weather in London is as follows:

- **Temperature:** 16.1°C (feels like 14.2°C)
- **Humidity:** 64%
- **Wind Speed:** 11.9 km/h
- **Wind Gusts:** 30.6 km/h
- **Conditions:** Overcast

If you need more details or information about a different location, feel free to ask!