A Model Context Protocol (MCP) server that enables AI-driven control of Mock Service Worker (MSW) in browser environments. This server acts as a bridge between AI assistants and MSW service workers, allowing dynamic API mocking through intelligent handler generation and real-time updates.

• 🤖 AI-powered mock generation - Generate MSW handlers from natural language
• ⚡ Real-time updates - Modify API mocks without reloading the page
• 🌉 WebSocket bridge - Seamless communication between AI and browser
• 🛠️ Automated setup - Use /msw-setup prompt for instant project scaffolding

┌─────────────────┐    MCP Protocol    ┌─────────────────────┐    WebSocket    ┌──────────────────┐
│                 │◄──────────────────►│                     │◄───────────────►│                  │
│   AI Assistant  │                    │   MSW MCP Server    │                 │  Browser MSW     │
│   (Claude etc.) │                    │                     │                 │  Service Worker  │
│                 │                    │                     │                 │                  │
└─────────────────┘                    └─────────────────────┘                 └──────────────────┘

Standard configuration (works with most MCP clients):

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

Quick install links for vscode:

Claude Code:

Use the Claude Code CLI to add the MSW MCP server:

claude mcp add msw-mcp npx msw-mcp@latest

Also supports: Cursor, Gemini-cli, Windsurf, Cline, Roo Cline, and other MCP-compatible clients.

Use the /msw-setup prompt in your MCP client to automatically configure your project:

/msw-setup

This will:

• Auto-detect your framework (React, Vue, Svelte, etc.)
• Install required dependencies (msw and msw-mcp)
• Create the complete mocks directory structure
• Configure environment variables
• Integrate with your app entry point

# Install dependencies
npm install -D msw msw-mcp

# Initialize MSW service worker
npx msw init public/ --save

import { enableMocking } from 'msw-mcp/client';
import { setupWorker } from 'msw/browser';

const worker = setupWorker();

export async function initMocks() {
  if (process.env.NODE_ENV !== 'development') return;

  await enableMocking({
    worker,
    wsEnabled: true,
    wsBridgeOptions: {
      url: 'ws://localhost:6789',
    },
  });
}

import { initMocks } from './mocks';

initMocks().then(() => {
  // Start your app
});

Add new request handlers dynamically:

// Example usage from AI
'Create a GET /users endpoint that returns a list of users';
// Generates: http.get('/users', () => HttpResponse.json([...]))

Check current MSW status and active handlers.

Update existing handlers by URL pattern and optional HTTP methods (e.g., methods: ['GET', 'POST']).

Remove handlers by URL pattern and optional HTTP methods (e.g., methods: ['GET'] to remove only GET handlers).

Reset all handlers to initial state.

See DOCUMENTATION.md for detailed API reference.

• --mock-ws-port=<port> - WebSocket server port (default: 6789)
• --persist-handlers - Save handlers across page refreshes (or --persist-handlers=10 persists only 10 most recent handlers)
• --single-client - Only broadcast to the most recent tab

Since they are just envs used in the generated setup code, you can customize them as needed.

Create .env.local:

ENABLE_MSW_MOCK=true
ENABLE_MSW_WS_MOCK=true
MCP_SERVER_URL=ws://localhost:6789

Generate a REST API:

"Create a REST API for user management with CRUD operations"

Mock external APIs:

"Mock the GitHub API to return fake repository data"

Test error scenarios:

"Make the /users endpoint return a 500 error"

npm run build     # Build TypeScript
npm run dev       # Build and run
npm run start     # Run built server

For detailed documentation including:

• Complete API reference
• WebSocket protocol details
• Advanced configuration options
• Frontend integration guide
• Debugging tips

See DOCUMENTATION.md

Contributions are welcome! Please see DOCUMENTATION.md for detailed development information.

MIT License

• Model Context Protocol - Protocol specification
• Mock Service Worker - API mocking library