MCP Wasm

🚀 WASM MCP サーバー

このプロジェクトは、WebAssembly (WASM) を使用して、Webブラウザ環境で動作するModel Context Protocol (MCP) サーバーの概念実証実装です。これにより、ブラウザ環境でMCPツールとリソースを統合する能力を実証しています。

🚀 クイックスタート

このWASM MCPサーバーは、Webブラウザ内でMCPツールとリソースを利用するためのものです。以下の使用方法を参考に、機能を試してみてください。

✨ 主な機能

計算機ツール

• 基本的な四則演算（加算、減算、乗算、除算）を実行します。
• 入力検証とエラー処理が行われます。
• 計算結果がリアルタイムに表示されます。

ストレージシステム

• キーバリューベースのストレージ機能を提供します。
• 文字列キーを使用して値を設定および取得できます。
• ブラウザセッション内での永続的なストレージが可能です。
• テンプレートリソースの処理が行われます。

🔧 技術詳細

サーバーコンポーネント

• server.ts：MCPサーバーの核心実装で、ツールとサービスリソースの定義が含まれています。
• main.ts：クライアントの統合とUIインタラクションの処理を行います。
• browser-transport.ts：ブラウザ通信に使用するカスタムトランスポート層です。

アーキテクチャ

• Model Context Protocol SDKを使用してサーバーを実装しています。
• カスタムブラウザトランスポート層を実装しています。
• ツールはコールバック関数を通じて登録されます。
• リソースはテンプレートパスを使用し、パラメータ置換が可能です。

重要な概念

1. ツール

   • server.tool()を使用して登録されます。
   • コールバック関数を通じて実行されます。
   • Zodを使用してスキーマ検証が行われます。

2. リソース

   • テンプレートはパスに基づいています（例：storage://{key}）。
   • readCallbackを通じてアクセスされます。
   • パラメータ化されたリソース処理が行われます。

💻 使用例

計算機

1. 操作（加算、減算、乗算、除算）を選択します。
2. 2つの数字を入力します。
3. 「計算」をクリックして結果を表示します。
4. 無効な入力やゼロ除算に対するエラー処理が行われます。

ストレージ

1. 対応するフィールドにキーと値を入力します。
2. 「ストレージを設定」をクリックして値を保存します。
3. キーを入力して「ストレージを取得」をクリックして値を取得します。
4. 操作の成功やエラーメッセージが表示されます。

📦 インストール

このプロジェクトには以下の依存関係があります。

• @modelcontextprotocol/sdk
• Zod（スキーマ検証用）
• TypeScript
• Vite（開発とビルド用）

プロジェクト構成

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCPサーバーの実装
│       ├── main.ts        # クライアントロジック
│       └── browser-transport.ts # ブラウザトランスポート層
├── index.html            # ウェブページのインターフェイス
└── package.json         # プロジェクトの依存関係

エラー処理

• サーバーの初期化エラー
• ツールの実行エラー
• リソースのアクセスエラー
• 入力検証エラー
• トランスポート層のエラー

将来の改善点

• 計算機により多くの操作を追加する
• セッション制限を超えた永続的なストレージを実現する
• UI/UXを強化する
• 他のMCPツールとリソースを追加する
• WASMの最適化を行う