> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ja/llms.txt # SvelteKit プロジェクトに Mastra を統合する このガイドでは、Mastra を使用して Tool を呼び出す AI Agent を構築し、ルートから Agent を直接 import して呼び出すことで SvelteKit に接続します。 [AI SDK UI](https://ai-sdk.dev/docs/ai-sdk-ui/overview) を使用して、美しくインタラクティブなチャット体験を作成します。 ## 始める前に - サポートされている[モデル Provider](https://mastra.zisheng.pro/ja/models) の API キーが必要です。特に希望がなければ、[OpenAI](https://mastra.zisheng.pro/ja/models/providers/openai) を使用してください。 - Node.js `v22.13.0` 以降をインストールしてください ## 新しい SvelteKit アプリを作成する（任意） Tailwind を使用する SvelteKit アプリがすでにある場合は、次の手順に進んでください。 次のコマンドを実行して、[新しい SvelteKit アプリを作成](https://svelte.dev/docs/kit/creating-a-project)します。 **npm**: ```bash npx sv create mastra-svelte --template minimal --types ts --add tailwindcss="plugins:forms" --install npm ``` **pnpm**: ```bash pnpm dlx sv create mastra-svelte --template minimal --types ts --add tailwindcss="plugins:forms" --install npm ``` **Yarn**: ```bash yarn dlx sv create mastra-svelte --template minimal --types ts --add tailwindcss="plugins:forms" --install npm ``` **Bun**: ```bash bun x sv create mastra-svelte --template minimal --types ts --add tailwindcss="plugins:forms" --install npm ``` これにより `mastra-svelte` というプロジェクトが作成されますが、任意の名前に置き換えられます。後のスタイリングに使用するため、Tailwind も追加されます。 ## Mastra を初期化する SvelteKit プロジェクトに移動します。 ```bash cd mastra-svelte ``` [`mastra init`](https://mastra.zisheng.pro/ja/reference/cli/mastra) を実行します。プロンプトが表示されたら、Provider（OpenAI など）を選択してキーを入力します。 **npm**: ```bash npx mastra@latest init ``` **pnpm**: ```bash pnpm dlx mastra@latest init ``` **Yarn**: ```bash yarn dlx mastra@latest init ``` **Bun**: ```bash bun x mastra@latest init ``` これにより、天気 Agent のサンプルと次のファイルを含む `src/mastra` フォルダーが作成されます。 - `index.ts` - Memory を含む Mastra の設定 - `tools/weather-tool.ts` - 指定した場所の天気を取得する Tool - `agents/weather-agent.ts`- Tool を使用するプロンプトを備えた天気 Agent 次の手順では、SvelteKit のルートから `weather-agent.ts` を呼び出します。 ## AI SDK UI をインストールする AI SDK UI と Mastra アダプターをインストールします。 **npm**: ```bash npm install @mastra/ai-sdk@latest @ai-sdk/svelte ai ``` **pnpm**: ```bash pnpm add @mastra/ai-sdk@latest @ai-sdk/svelte ai ``` **Yarn**: ```bash yarn add @mastra/ai-sdk@latest @ai-sdk/svelte ai ``` **Bun**: ```bash bun add @mastra/ai-sdk@latest @ai-sdk/svelte ai ``` ## チャットルートを作成する `src/routes/api/chat/+server.ts` を作成します。 ```ts import type { RequestHandler } from './$types' import { handleChatStream } from '@mastra/ai-sdk' import { toAISdkV5Messages } from '@mastra/ai-sdk/ui' import { createUIMessageStreamResponse } from 'ai' import { mastra } from '../../../mastra' const THREAD_ID = 'example-user-id' const RESOURCE_ID = 'weather-chat' export const POST: RequestHandler = async ({ request }) => { const params = await request.json() const stream = await handleChatStream({ mastra, agentId: 'weather-agent', params: { ...params, memory: { ...params.memory, thread: THREAD_ID, resource: RESOURCE_ID, }, }, }) return createUIMessageStreamResponse({ stream }) } export const GET: RequestHandler = async () => { const memory = await mastra.getAgentById('weather-agent').getMemory() let response = null try { response = await memory?.recall({ threadId: THREAD_ID, resourceId: RESOURCE_ID, }) } catch { console.log('No previous messages found.') } const uiMessages = toAISdkV5Messages(response?.messages || []) return Response.json(uiMessages) } ``` `POST` ルートはプロンプトを受け取り、Agent のレスポンスを AI SDK 形式でストリーミングします。一方、`GET` ルートは Memory からメッセージ履歴を取得し、クライアントの再読み込み時に UI を復元できるようにします。 `GET` ハンドラーが呼び出されるようにするには、`src/routes/+page.ts` ファイルを作成する必要があります。その `load()` 関数は `+page.svelte` と並行して実行されます。 ```ts import type { UIDataTypes, UIMessage, UITools } from 'ai' import type { PageLoad } from './$types' export const load: PageLoad = async ({ fetch }) => { const response = await fetch('/api/chat') const initialMessages = (await response.json()) as UIMessage[] return { initialMessages } } ``` ## チャット UI を追加する `src/routes/+page.svelte` を次の内容に置き換えます。 ```svelte
{#each chat.messages as message, messageIndex (messageIndex)}
{#each message.parts as part, partIndex (partIndex)} {#if part.type === 'text'}
{part.text}
{:else if part.type.startsWith('tool-')}
{(part as ToolUIPart).type.split("-").slice(1).join("-")} - {STATE_TO_LABEL_MAP[(part as ToolUIPart).state ?? 'output-available']}
Parameters
{JSON.stringify((part as ToolUIPart).input, null, 2)}
{(part as ToolUIPart).errorText ? 'Error' : 'Result'}
{JSON.stringify((part as ToolUIPart).output, null, 2)}
{#if (part as ToolUIPart).errorText}
{(part as ToolUIPart).errorText}
{/if}
{/if} {/each}
{/each}
``` このページは [`Chat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) を `api/chat` エンドポイントに接続し、そこへプロンプトを送信して、レスポンスをチャンク単位でストリーミングします。 レスポンスのテキストは、カスタムのメッセージコンポーネントと Tool コンポーネントを使用してレンダリングされます。 ## Agent をテストする 1. `npm run dev` で SvelteKit アプリを実行します 2. でチャットを開きます 3. 天気について質問してみます。API キーが正しく設定されていれば、レスポンスが返されます ## 次のステップ SvelteKit で Mastra Agent を構築できました！🎉 ここから、独自の Tool やロジックを追加してプロジェクトを拡張できます。 - [Agent](https://mastra.zisheng.pro/ja/docs/agents/overview) について詳しく学ぶ - Agent に独自の [Tool](https://mastra.zisheng.pro/ja/docs/agents/using-tools) を追加する - Agent に人間のような [Memory](https://mastra.zisheng.pro/ja/docs/memory/overview) を追加する 準備ができたら、Mastra と AI SDK UI および SvelteKit の統合方法や、Agent を任意の場所へデプロイする方法について詳しく学びましょう。 - Mastra を [AI SDK UI](https://mastra.zisheng.pro/ja/guides/build-your-ui/ai-sdk-ui) と統合する - Agent を[任意の場所](https://mastra.zisheng.pro/ja/docs/deployment/overview)にデプロイする - [非公式の Svelte AI Elements](https://svelte-ai-elements.vercel.app/) を試す