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

npx mastra@latest init --default

npx mastra@latest init

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

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

OPENAI_API_KEY=<your-api-key>

.mastra
.vercel

- import { openai } from "@ai-sdk/openai";
+ import { createOpenAI } from "@ai-sdk/openai";
 
+ const openai = createOpenAI({
+   apiKey: import.meta.env?.OPENAI_API_KEY,
+   compatibility: "strict"
+ });

mkdir src/actions

touch src/actions/index.ts

import { defineAction } from "astro:actions";
import { z } from "astro:schema";
 
import { mastra } from "../mastra";
 
export const server = {
  getWeatherInfo: defineAction({
    input: z.object({
      city: z.string()
    }),
    handler: async (input) => {
      const city = input.city;
      const agent = mastra.getAgent("weatherAgent");
 
      const result = await agent.generate(`What's the weather like in ${city}?`);
 
      return result.text;
    }
  })
};

touch src/components/form.tsx

import { actions } from "astro:actions";
import { useState } from "react";
 
export const Form = () => {
  const [result, setResult] = useState<string | null>(null);
 
  async function handleSubmit(formData: FormData) {
    const city = formData.get("city")!.toString();
    const { data } = await actions.getWeatherInfo({ city });
 
    setResult(data || null);
  }
 
  return (
    <>
      <form action={handleSubmit}>
        <input name="city" placeholder="Enter city" required />
        <button type="submit">Get Weather</button>
      </form>
      {result && <pre>{result}</pre>}
    </>
  );
};

touch src/pages/test.astro

---
import { Form } from '../components/form'
---
 
<h1>Test</h1>
<Form client:load />

Agent response: The current weather in London is as follows:

- **Temperature:** 12.9°C (Feels like 9.7°C)
- **Humidity:** 63%
- **Wind Speed:** 14.7 km/h
- **Wind Gusts:** 32.4 km/h
- **Conditions:** Overcast

Let me know if you need more information!

npx mastra@latest init --default

npx mastra@latest init

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

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

OPENAI_API_KEY=<your-api-key>

.mastra
.vercel

- import { openai } from "@ai-sdk/openai";
+ import { createOpenAI } from "@ai-sdk/openai";
 
+ const openai = createOpenAI({
+   apiKey: import.meta.env?.OPENAI_API_KEY,
+   compatibility: "strict"
+ });

mkdir src/pages/api

touch src/pages/api/test.ts

import type { APIRoute } from "astro";
 
import { mastra } from "../../mastra";
 
export const POST: APIRoute = async ({ request }) => {
  const { city } = await new Response(request.body).json();
  const agent = mastra.getAgent("weatherAgent");
 
  const result = await agent.generate(`What's the weather like in ${city}?`);
 
  return new Response(JSON.stringify(result.text));
};

touch src/components/form.tsx

import { useState } from "react";
 
export const Form = () => {
  const [result, setResult] = useState<string | null>(null);
 
  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const city = formData.get("city")?.toString();
 
    const response = await fetch("/api/test", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ city })
    });
 
    const text = await response.json();
    setResult(text);
  }
 
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input name="city" placeholder="Enter city" required />
        <button type="submit">Get Weather</button>
      </form>
      {result && <pre>{result}</pre>}
    </>
  );
};

touch src/pages/test.astro

---
import { Form } from '../components/form'
---
 
<h1>Test</h1>
<Form client:load />

Agent response: The current weather in London is as follows:

- **Temperature:** 12.9°C (Feels like 9.7°C)
- **Humidity:** 63%
- **Wind Speed:** 14.7 km/h
- **Wind Gusts:** 32.4 km/h
- **Conditions:** Overcast

Let me know if you need more information!