MCP server for msw

MSW AI Agent Bridge Monorepo

このモノレポは、AI エージェントと Mock Service Worker（MSW）をつなぐツール一式を提供します。アプリケーションのソースコードを再起動することなく、コマンドラインインターフェースや AI ツールの実行を通じて、MSW のネットワークモックを動的に追加、更新、削除できます。

デモ

MCP を活用した MSW ワークフローの紹介（ブラウザーブリッジ、ハンドラーのライブ更新）：

https://github.com/user-attachments/assets/06959759-b198-4cd1-ae2b-11ede32acd8e

主な機能

• 🤖 AI で MSW ハンドラーを生成
• ⚡ ページを再読み込みせずにモックを更新
• 🌉 CLI/MCP とブラウザー間の WebSocket ブリッジ
• 🛠️ msw-cli setup または MCP の /msw-setup プロンプトで MSW のセットアップを作成
• 💻 msw-cli によるターミナルとスクリプトからの操作
• ⚙️ ポート、永続化、クライアントの対象指定を設定可能
• ✨ AI エージェントが使用できるエージェントスキル

構成

このプロジェクトは、pnpm と turbo を使用するモノレポとして構成されています。

• apps/docs（@msw-mcp/docs）：MSW Agent Tools（CLI、MCP、ガイド）の Starlight ドキュメントサイトです。ソースは apps/docs/src/content/docs/ にあります。
• packages/msw-cli：AI エージェントや開発者が動的なハンドラー更新を送信するためのコマンドラインインターフェース（msw-cli）です。msw-cli setup を実行してプロジェクトのセットアップを作成し、その後 msw-cli open とハンドラーコマンドを実行します。
• packages/msw-mcp：アシスタントが MCP ツールを通じてモックを管理できる、公開済みの Model Context Protocol サーバー（msw-mcp）です。
• packages/client（@msw-mcp/client）：更新を受け取り、ローカルの MSW セットアップに登録するブラウザー／環境用クライアントです。
• packages/core（@msw-mcp/core）：CLI または MCP サーバーとクライアント間の通信を仲介する、コアのデーモンプロセスとセッション管理ロジックです。

ドキュメントサイト

リポジトリのルートから実行します：

pnpm --filter @msw-mcp/docs dev

ローカルのドキュメント開発サーバーが起動します（Astro のデフォルトポート。通常は http://localhost:4321）。本番環境の検索機能（Pagefind）は、pnpm --filter @msw-mcp/docs build と pnpm --filter @msw-mcp/docs preview の実行後に確認するのが最も簡単です。

詳しくは、apps/docs/README.md をご覧ください。

クイックセットアップ：msw-cli

1. CLI をグローバルにインストールします：npm install -g msw-cli（または使用しているパッケージマネージャーの同等のコマンドを実行します）。

2. 新しいプロジェクトで msw-cli setup を実行し、表示される MSW と @msw-mcp/client の手順に従います。

3. セッションを開始し、シェルからハンドラーを操作します：

   msw-cli open
   msw-cli add "http.get('/api/user', () => HttpResponse.json({ id: 1 }))"
   msw-cli status
   msw-cli close
   

すべてのコマンド、フラグ、ワークフローについては、packages/msw-cli/README.md をご覧ください。

クイックセットアップ：msw-mcp（MCP）

1. MCP クライアントにサーバーを登録します（JSON 設定の例）：

   {
     "mcpServers": {
       "msw-mcp": {
         "command": "npx",
         "args": ["msw-mcp@latest"]
       }
     }
   }
   

2. クライアントで /msw-setup プロンプトを使用するか、手動でセットアップ手順に従い、ブラウザーアプリが msw、@msw-mcp/client、worker ブリッジを読み込むようにします。

インストール方法（VS Code、Claude Code、Cursor など）、アーキテクチャ、MCP ツール、手動セットアップについては、packages/msw-mcp/README.md をご覧ください。

開発スクリプト

ルートディレクトリから pnpm を使って、次のスクリプトを実行します：

• pnpm build：Turborepo を使ってすべてのパッケージをコンパイルします。
• pnpm dev：すべてのパッケージの開発パイプラインを起動します。
• pnpm format：Prettier を使ってコードをフォーマットします。
• pnpm lint：リポジトリ全体でリントチェックを実行します。

はじめに

1. 依存関係をインストールします：

   pnpm install
   

2. プロジェクトをビルドします：

   pnpm build
   

3. CLI を使用します：
   CLI のディレクトリに移動するか、ビルド後に node から直接実行できます：

   node packages/msw-cli/build/index.js help
   

ライセンス

このプロジェクトは MIT License のもとでライセンスされています。詳しくは LICENSE をご覧ください。