SvelteKit & Vercel MCP Starter

SvelteKit & Vercel MCP Starter

SvelteKit を使用して Model Context Protocol（MCP）サーバーとクライアントをセットアップし、Vercel 上で実行するためのデプロイ方法を紹介するサンプルプロジェクトへようこそ。

このスターターは、強力な AI ツール呼び出し機能をアプリケーションに統合したい SvelteKit 愛好家向けに、明快で最小限の基盤を提供することを目指しています。

✨ このプロジェクトを選ぶ理由

このプロジェクトは、SvelteKit での MCP 統合を試してみたいという個人的な関心から生まれました。Vercel が最近リリースした @vercel/mcp-adapter により導入のハードルが大幅に下がり、取り組みやすくなりました。Vercel チームに感謝します！

この実装の注目すべき点の一つは、初期のドキュメントやサンプルの多くが Next.js を前提としていたにもかかわらず、MCP を SvelteKit にもうまく統合できることを示している点です。SvelteKit への適応はごくわずかで、基盤となるテクノロジーの柔軟性を示しています。

利便性のために Vercel のアダプターとデプロイプラットフォームを使用していますが、基本となる概念は標準的な Web テクノロジー（HTTP、Server-Sent Events）に基づいていることにご注意ください。そのため、多少の調整を加えれば、Node.js 環境をサポートするほかのホスティングプラットフォームでも同様の構成を実現できるはずです。

このスターターは、気軽に始められる最小限のサンプルを目指しています。

🌟 特長

• @vercel/mcp-adapter：Vercel のパッケージを活用し、MCP サーバーを簡単に作成できます。
• MCP サーバーの例：SvelteKit のルートで基本的な MCP ツールを使用する方法を紹介します。
• MCP クライアントの例：AI SDK を使用して MCP サーバーを呼び出す方法を紹介します。

注：クライアントとサーバーは、同じプロジェクトに配置する必要はありません。

🛠️ はじめに

以下の手順に従って、ローカルマシンでプロジェクトを起動してください。

前提条件

1. Node.js と pnpm：Node.js（v18 以降を推奨）と pnpm がインストールされていることを確認してください。
2. API キー：
   • Anthropic API キー（または、クライアントを調整する場合は別の LLM プロバイダーのキー）が必要です。
   • 状態を管理する一部のトランスポート（SSE など）では、@vercel/mcp-adapter が Redis URL を必要とします。Upstash などのサービスでは無料プランが提供されています。@vercel/[email protected] 以降、streamableHTTP の使用時に Redis URL は不要になりました。
   • .env.example ファイルを .env にコピーし、キーを入力してください。

     cp .env.example .env
     

インストール

リポジトリをクローンし、依存関係をインストールします。

pnpm install

ローカルでの実行

開発サーバーを起動します。

pnpm run dev

これで、アプリケーションが http://localhost:5173（または次に利用可能なポート）で実行されます。

📝 主な考慮事項と注意点

• Edge Functions：このサンプルの作成当初は、現在のアダプターや SvelteKit との統合に関する仕様上の違いにより、MCP サーバーを Vercel Edge Functions にデプロイする際に制限がある可能性があります。現時点では、Vercel では標準のサーバーレス関数を使用することを推奨します。
• トランスポートプロトコル：このサンプルでは主に StreamableHTTPClientTransport を紹介します。@vercel/mcp-adapter は SSE にも対応しています。
• MCP SDK のバージョン：MCP TypeScript SDK は進化を続けているライブラリです。このサンプルでは、以前のバージョンでツール引数に関する問題があったため（Issue #467 を参照）、"@modelcontextprotocol/sdk": "1.10.2" を使用しています。常に最新の安定バージョンを確認し、必要に応じて調整してください。

🤝 コントリビューションと今後の展望

このプロジェクトは、最小限の出発点として作成されています。改善や拡張の方法はいくつかあります。

• トランスポートの柔軟なルーティング：動的ルーティングをさらに実装し、SvelteKit の構成内で複数の MCP トランスポート（HTTP と並行して SSE を使用する場合など）を簡単に切り替えたり、サポートしたりできるようにします。
• ツールの例を拡充：より多様で複雑なツールの例を追加します。
• エラー処理と堅牢性：クライアント側とサーバー側の両方でエラー処理を強化します。

メンテナンス状況：このリポジトリは、動作する例を共有するために作成されました。重大な問題が発生した場合はできる限り対応しますが、長期にわたって積極的にメンテナンスや開発を続けるとは限りません。

コントリビューションを大歓迎します！ 改善、バグ修正、新機能などがありましたら、お気軽に Issue を作成するか、プルリクエストを送ってください。

📚 参考資料

• Vercel MCP サーバーサポートの変更履歴：Vercel の公式発表を読む
• SvelteKit ドキュメント：SvelteKit ドキュメント
• MCP TypeScript SDK：GitHub リポジトリ
• @vercel/mcp-adapter：GitHub の Vercel モノレポ

---

コーディングを楽しんでください。このスターターが、素晴らしい AI 搭載の SvelteKit アプリケーションの構築に役立つことを願っています！