WASM MCP Server

WASM MCP サーバー

Web ブラウザー内で WebAssembly（WASM）として動作する Model Context Protocol（MCP）サーバーの概念実証実装です。このプロジェクトでは、ブラウザー環境での 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. 「Calculate」をクリックして結果を確認します
4. 無効な入力やゼロ除算に対するエラー処理

ストレージ

1. 各欄にキーと値を入力します
2. 「Set Storage」をクリックして値を保存します
3. キーを入力し、「Get Storage」をクリックして値を取得します
4. 操作の成功とエラーに関するフィードバックが表示されます

依存関係

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

プロジェクト構成

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP server implementation
│       ├── main.ts        # Client-side logic
│       └── browser-transport.ts # Browser transport layer
├── index.html            # Web interface
└── package.json         # Project dependencies

エラー処理

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

今後の拡張

• 電卓の演算を追加
• セッションをまたいだ永続ストレージ
• UI/UX の改善
• MCP ツールとリソースの追加
• WASM の最適化

開発

これは、WebAssembly を使用して Web ブラウザー内で MCP サーバーを実行できることを実演する概念実証実装です。シンプルさと明瞭さを保ちながら、MCP の中核となる概念の実演に重点を置いています。