/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-setupWhat it does
Section titled “What it does”-
Detect your framework — React, Vue, Svelte, vanilla JS, Next.js, Nuxt, SvelteKit, and more.
-
Install dependencies:
Terminal window npm install -D msw@^2.11.0 @msw-mcp/clientnpx msw init public/ --save -
Create the mocks directory:
mocks/handlers.js— base handler definitionsmocks/browser.js— MSW worker setup withwindow.mswexposuremocks/index.js—initMocking()from@msw-mcp/clientwith WebSocket bridge
-
Configure environment variables — creates or updates
.env.localwithENABLE_MSW_MOCK,ENABLE_MSW_WS_MOCK, andMCP_SERVER_URL. -
Integrate with the app entry point — adds the
enableMocking()(orinitMocks()) call before your app starts. -
Handle migrations — if MSW is already set up, migrates to use
@msw-mcp/clientwhile preserving existing base handlers. -
Add
.gitignoreentries formocks/custom-handlers/.
Optional arguments
Section titled “Optional arguments”| 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
When to use it
Section titled “When to use it”- 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.
Manual setup alternative
Section titled “Manual setup alternative”If you prefer not to use the prompt, follow the Installation guide for manual step-by-step setup.