Skip to content

/msw-setup Prompt

The /msw-setup prompt is a built-in MCP prompt that instructs your AI assistant to scaffold the complete MSW + browser bridge setup automatically.


In any MCP client with msw-mcp configured, type:

/msw-setup

  1. Detect your framework — React, Vue, Svelte, vanilla JS, Next.js, Nuxt, SvelteKit, and more.

  2. Install dependencies:

    Terminal window
    npm install -D msw@^2.11.0 @msw-mcp/client
    npx msw init public/ --save
  3. Create the mocks directory:

    • mocks/handlers.js — base handler definitions
    • mocks/browser.js — MSW worker setup with window.msw exposure
    • mocks/index.jsinitMocking() from @msw-mcp/client with WebSocket bridge
  4. Configure environment variables — creates or updates .env.local with ENABLE_MSW_MOCK, ENABLE_MSW_WS_MOCK, and MCP_SERVER_URL.

  5. Integrate with the app entry point — adds the enableMocking() (or initMocks()) call before your app starts.

  6. Handle migrations — if MSW is already set up, migrates to use @msw-mcp/client while preserving existing base handlers.

  7. Add .gitignore entries for mocks/custom-handlers/.


| Argument | Description | | ------------------- | ------------------------------------------------------------ | | framework | Specify the framework (auto-detected if omitted) | | serviceWorkerPath | Custom service worker URL (default: /mockServiceWorker.js) |

Examples:

/msw-setup — auto-detect everything
/msw-setup for a Vite + React project
/msw-setup with serviceWorkerPath /static/mockServiceWorker.js


  • New project — creates everything from scratch.
  • Existing MSW setup — migrates to the WebSocket bridge while preserving base handlers.
  • Onboarding a teammate — reliable, consistent setup in any project.

If you prefer not to use the prompt, follow the Installation guide for manual step-by-step setup.