mcpField
M
MCP server for msw

MCP server for msw

Local
msw-mcp-docs.vercel.appDeveloper Tools81Updated 17w ago
RepositoryVisit website

About MCP server for msw

MSW for AI Agent is a set of tools that connects AI agents with Mock Service Worker (MSW), including the msw-cli command line and the msw-mcp server. It adds, updates, and removes network mocks at runtime without restarting the application, aimed at developers who adjust API mocks during development or testing.

Key features

  1. 01Add, update, and remove MSW handlers from the command line
  2. 02MCP server exposes mock management tools to AI assistants
  3. 03WebSocket bridge between CLI or MCP and the browser
  4. 04Setup scaffolding via msw-cli setup and /msw-setup prompt
  5. 05Configurable port, persistence, and client targeting

Use cases

  1. 01Adjusting API responses for debugging without reloading the page
  2. 02Generating and registering MSW handlers from AI assistant requests
  3. 03Controlling mock state from scripts or the terminal

MCP support

msw-mcp is an MCP server that exposes tools for managing MSW mocks and a /msw-setup prompt to MCP clients. Changes are relayed over a WebSocket bridge to the @msw-mcp/client running in the browser.

#mock#api-mock#msw#test

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "msw": {
      "command": "npx",
      "args": [
        "-y",
        "msw-mcp"
      ]
    }
  }
}
Run commandnpx -y msw-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmmsw-mcp

Tools

5

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
handlersarrayYesArray of MSW handler JavaScript code strings. Examples: 1. Simple mock: "http.get('/users', () => HttpResponse.json([]))" 2. With request body: "http.post('/users', async ({request}) => { const body = await request.json(); return HttpResponse.json({id: 1, ...body}) })" 3. Fetch real API then modify: "http.get('/api/data', async ({request}) => { const response = await fetch(bypass(request)); const data = await response.json(); return HttpResponse.json({...data, mocked: true}) })"
oncebooleanNoIf true, marks handlers as one-time use. After the first successful match, the handler will be ignored for subsequent requests.

Details

From the project README

MSW AI Agent Bridge Monorepo

npm version npm version CI License: MIT

This monorepo provides a suite of tools that bridge AI agents with Mock Service Worker (MSW). It enables dynamic addition, updating, and removal of MSW network mocks directly from a command-line interface or AI tool execution, completely independently of the application source code restarts.

Demo

Walkthrough of the MCP-driven MSW workflow (browser bridge, live handler updates):

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

Key features

  • 🤖 Generate MSW handlers with AI
  • ⚡ Update mocks without reloading the page
  • 🌉 WebSocket bridge between Cli/MCP and the browser
  • 🛠️ Scaffold MSW setup with msw-cli setup or MCP's /msw-setup prompt
  • 💻 Terminal and script control via msw-cli
  • ⚙️ Configurable port, persistence, and client targeting
  • ✨ Agent skills for AI agents to use

Structure

This project is set up as a monorepo using pnpm and turbo.

  • apps/docs (@msw-mcp/docs): Starlight documentation site for MSW Agent Tools (CLI, MCP, guides). Source lives under apps/docs/src/content/docs/.
  • packages/msw-cli: The command-line interface (msw-cli) used by AI agents or developers to send dynamic handler updates. Run msw-cli setup to scaffold a project, then msw-cli open plus handler commands.
  • packages/msw-mcp: The published Model Context Protocol server (msw-mcp) so assistants can manage mocks via MCP tools.
  • packages/client (@msw-mcp/client): The browser/environment client that listens for updates and registers them with the local MSW setup.
  • packages/core (@msw-mcp/core): The core daemon process and session management logic that brokers communication between the CLI or MCP server and the client.

Documentation site

From the repo root:

pnpm --filter @msw-mcp/docs dev

Opens the local docs dev server (default Astro port, often http://localhost:4321). Production search (Pagefind) is easiest to verify after pnpm --filter @msw-mcp/docs build and pnpm --filter @msw-mcp/docs preview.

More detail: apps/docs/README.md.

Quick setup: msw-cli

  1. Install the CLI globally: npm install -g msw-cli (or use your package manager’s equivalent).

  2. In a new project, run msw-cli setup and follow the printed steps for MSW + @msw-mcp/client.

  3. Start a session, then drive handlers from the shell:

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

Full command reference, flags, and workflows: packages/msw-cli/README.md.

Quick setup: msw-mcp (MCP)

  1. Register the server in your MCP client (example for JSON config):

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

  2. In the client, use the /msw-setup prompt (or follow manual steps) so the browser app loads msw, @msw-mcp/client, and the worker bridge.

Installation options (VS Code, Claude Code, Cursor, etc.), architecture, MCP tools, and manual setup: packages/msw-mcp/README.md.

Development Scripts

Run these scripts from the root directory using pnpm:

  • pnpm build: Compiles all packages using Turborepo.
  • pnpm dev: Starts the development pipelines for all packages.
  • pnpm format: Formats the code using Prettier.
  • pnpm lint: Runs linting checks across the repository.

Getting Started

  1. Install dependencies:

    pnpm install

  2. Build the project:

    pnpm build

  3. Use the CLI:
    You can navigate to the CLI directory or use it directly via node after building:

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

License

This project is licensed under the MIT License — see LICENSE.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.