MSW MCP 服务器

一个模型上下文协议（MCP）服务器，它能够在浏览器环境中通过AI驱动来控制Mock Service Worker (MSW)。该服务器充当AI助手和MSW服务工作者之间的桥梁，允许通过智能处理程序生成和实时更新进行动态API模拟。

演示

https://github.com/user-attachments/assets/06959759-b198-4cd1-ae2b-11ede32acd8e

主要功能

• 🤖 AI驱动的模拟生成 - 从自然语言生成MSW处理程序
• ⚡ 实时更新 - 在不重新加载页面的情况下修改API模拟
• 🌉 WebSocket桥接 - AI与浏览器之间的无缝通信
• 🛠️ 自动化设置 - 使用/msw-setup提示进行即时项目脚手架搭建

架构

┌─────────────────┐    MCP Protocol    ┌─────────────────────┐    WebSocket    ┌──────────────────┐

│                 │◄──────────────────►│                     │◄───────────────►│                  │

│   AI Assistant  │                    │   MSW MCP Server    │                 │  Browser MSW     │

│   (Claude etc.) │                    │                     │                 │  Service Worker  │

│                 │                    │                     │                 │                  │

└─────────────────┘                    └─────────────────────┘                 └──────────────────┘

开始使用

安装

标准配置（适用于大多数MCP客户端）：

{

  "mcpServers": {

    "msw-mcp": {

      "command": "npx",

      "args": ["msw-mcp@latest"]

    }

  }

}

VS Code快速安装链接：

Claude Code:

使用Claude Code CLI添加MSW MCP服务器：

claude mcp add msw-mcp npx msw-mcp@latest

还支持：Cursor, Gemini-cli, Windsurf, Cline, Roo Cline以及其他兼容MCP的客户端。

快速设置

在您的MCP客户端中使用/msw-setup提示自动配置您的项目：

/msw-setup

这将：

• 自动检测您的框架（React、Vue、Svelte等）
• 安装所需依赖项（msw 和 msw-mcp）
• 创建完整的mocks目录结构
• 配置环境变量
• 与您的应用程序入口点集成

如果您更喜欢手动配置：

# Install dependencies

npm install -D msw msw-mcp



# Initialize MSW service worker

npx msw init public/ --save

创建mocks/index.js：

import { enableMocking } from 'msw-mcp/client';

import { setupWorker } from 'msw/browser';



const worker = setupWorker();



export async function initMocks() {

  if (process.env.NODE_ENV !== 'development') return;



  await enableMocking({

    worker,

    wsEnabled: true,

    wsBridgeOptions: {

      url: 'ws://localhost:6789',

    },

  });

}

在您的应用入口处导入：

import { initMocks } from './mocks';



initMocks().then(() => {

  // Start your app

});

MCP 工具

msw_add_handlers

动态添加新的请求处理程序：

// Example usage from AI

'Create a GET /users endpoint that returns a list of users';

// Generates: http.get('/users', () => HttpResponse.json([...]))

msw_get_status

检查当前MSW状态和活动处理程序。

msw_update_handlers

按URL模式和可选HTTP方法（例如，methods: ['GET', 'POST']）更新现有处理程序。

msw_remove_handlers

按URL模式和可选HTTP方法（例如，methods: ['GET']仅移除GET处理程序）移除处理程序。

msw_reset_handlers

将所有处理程序重置为初始状态。

有关详细API参考，请参阅DOCUMENTATION.md。

配置

服务器参数

• --mock-ws-port=<port> - WebSocket服务器端口（默认：6789）
• --persist-handlers - 跨页面刷新保存处理程序（或--persist-handlers=10仅保存最近10个处理程序）
• --single-client - 仅广播到最近的标签页

客户端桥接环境变量

由于它们只是在生成的设置代码中使用的环境变量，您可以根据需要自定义它们。

创建.env.local：

ENABLE_MSW_MOCK=true

ENABLE_MSW_WS_MOCK=true

MCP_SERVER_URL=ws://localhost:6789

使用示例

生成REST API：

"Create a REST API for user management with CRUD operations"

模拟外部API：

"Mock the GitHub API to return fake repository data"

测试错误场景：

"Make the /users endpoint return a 500 error"

开发

npm run build     # Build TypeScript

npm run dev       # Build and run

npm run start     # Run built server

文档

有关详细文档包括：

• 完整API参考
• WebSocket协议详情
• 高级配置选项
• 前端集成指南
• 调试技巧

请参阅DOCUMENTATION.md

贡献

欢迎贡献！请参阅DOCUMENTATION.md获取详细的开发信息。

许可证

MIT许可证

相关项目

• 模型上下文协议 - 协议规范- Mock Service Worker - API 模拟库