Skip to Content
DocsGetting Started

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

⚠️

The legacy msw-dev-tool package is no longer maintained and is scheduled for removal. Use the packages below for all new and existing integrations.

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

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

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

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

Questions & Support

Have questions? We’re here to help!

Last updated on
How to Use