Getting Started

MSW Dev Tool connects to your MSW handlers so you can control HTTP and WebSocket mock scenarios at runtime. Install the integration that matches your application, then continue to How to Use for scenario-based verification.

1. Install MSW

MSW Dev Tool extends an MSW setup. Start by installing and configuring MSW for your application with the MSW Setup Guide .

2. Install MSW Dev Tool

Browser UI

Use the browser UI to inspect and control browser MSW handlers from your app. Install @msw-dev-tool/core for the MSW integration and @msw-dev-tool/react for the React-only UI.

pnpm add -D @msw-dev-tool/core @msw-dev-tool/react msw

npm i @msw-dev-tool/core @msw-dev-tool/react msw --save-dev

yarn add @msw-dev-tool/core @msw-dev-tool/react msw --dev

Browser CLI

Use the Browser CLI when an AI agent or script needs to control a browser MSW session through Chrome DevTools Protocol. It connects to the browser tab that already runs setupDevToolWorker.

pnpm add -D @msw-dev-tool/browser-cli @msw-dev-tool/core msw

npm i @msw-dev-tool/browser-cli @msw-dev-tool/core msw --save-dev

yarn add @msw-dev-tool/browser-cli @msw-dev-tool/core msw --dev

Node

Use Node support when your MSW handlers run with setupServer, such as in an API server, test environment, or SSR process. Add @msw-dev-tool/node-cli when an AI agent or script needs to control that Node session.

pnpm add -D @msw-dev-tool/core @msw-dev-tool/node-cli msw

npm i @msw-dev-tool/core @msw-dev-tool/node-cli msw --save-dev

yarn add @msw-dev-tool/core @msw-dev-tool/node-cli msw --dev

Setup

Browser UI

1. Integrate with MSW

Replace MSW’s setupWorker with setupDevToolWorker from @msw-dev-tool/core/browser:

import { setupDevToolWorker } from "@msw-dev-tool/core/browser";
 
export const worker = await setupDevToolWorker(...handlers);

Note: Unlike msw, setupDevToolWorker() returns a Promise that resolves to a worker instance.

2. Integrate the worker with the browser

For detailed information about msw browser integration, please refer to the msw official documentation .

3. Add the Dev Tool UI

Add the MSWDevTool component and msw-dev-tool.css to your jsx:

import { MSWDevTool } from "@msw-dev-tool/react";
import "@msw-dev-tool/react/msw-dev-tool.css";
 
export default function App() {
  return (
    <>
      {/* Your app components */}
      <MSWDevTool />
    </>
  );
}

You can also customize the trigger UI. See Custom UI for details.

Browser CLI

Start Chrome with remote debugging enabled, then use msw-dev-tool-browser to select the tab running setupDevToolWorker and control its handlers. See Browser CLI for the Chrome and MCP setup.

Node

Use @msw-dev-tool/core/node when MSW runs in Node (setupServer).

import { setupDevToolServer } from "@msw-dev-tool/core/node";
 
const server = await setupDevToolServer(...handlers);
server.listen();

AI agents can control the Node session with @msw-dev-tool/node-cli. See Node CLI.

Next steps

• How to Use: choose and verify a mock scenario.
• HTTP Mocking Scenarios: test loading, failures, alternative data, real APIs, and temporary endpoints.
• WebSocket Mocking Scenarios: test real-time messages and connection recovery.

Questions & Support

Have questions? We’re here to help!

• Open a Discussion  for questions and ideas
• Report an Issue  for bugs