---
url: /plugins/plugin-msw.md
description: >-
  Generates MSW request handlers from your OpenAPI spec so you can mock the API
  in tests and during local development.
---

# @kubb/plugin-msw

`@kubb/plugin-msw` turns your OpenAPI spec into [MSW](https://mswjs.io/) request handlers you drop into a test setup or a service worker to mock the API. Each handler matches the spec's path, method, status, and response body.

By default a handler returns an empty typed payload you fill in from tests. Set [`parser: 'faker'`](/plugins/plugin-msw/reference/options#parser) to return generated data from `@kubb/plugin-faker` instead.

## Installation

::: code-group

```shell [bun]
bun add -d @kubb/plugin-msw
```

```shell [pnpm]
pnpm add -D @kubb/plugin-msw
```

```shell [npm]
npm install --save-dev @kubb/plugin-msw
```

```shell [yarn]
yarn add -D @kubb/plugin-msw
```

:::

## Dependencies

This plugin always depends on [`@kubb/plugin-ts`](/plugins/plugin-ts/), so keep `pluginTs()` in the plugins array.

It depends on [`@kubb/plugin-faker`](/plugins/plugin-faker/) only when you set `parser: 'faker'`. The default `parser: 'data'` doesn't need Faker.

> \[!IMPORTANT]
> The generated handlers need MSW v2 or higher.

## Example

::: code-group

```typescript twoslash [kubb.config.ts]
import { defineConfig } from 'kubb'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginMsw } from '@kubb/plugin-msw'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen' },
  plugins: [
    pluginTs(),
    pluginMsw({
      output: { path: './mocks', mode: 'directory' },
      group: {
        type: 'tag',
        name: ({ group }) => `${group}Service`,
      },
      handlers: true,
    }),
  ],
})
```

:::

## See also

* [MSW](https://mswjs.io/)
* [@kubb/plugin-ts](/plugins/plugin-ts/)
* [@kubb/plugin-faker](/plugins/plugin-faker/)
* [Changelog](https://github.com/kubb-labs/plugins/blob/main/packages/plugin-msw/CHANGELOG.md)