MCP server for msw

本地服务

msw-mcp-docs.vercel.app开发工具8117 周前更新

关于 MCP server for msw

MSW for AI Agent 是一组桥接 AI Agent 与 Mock Service Worker（MSW）的工具，包含 msw-cli 命令行和 msw-mcp 服务。无需重启应用即可动态增加、更新或删除网络 mock，适合需要在开发或测试中调整接口模拟的开发者。

主要功能

01通过命令行动态添加、更新和删除 MSW handler
02MCP 服务暴露 mock 管理工具供 AI 助手调用
03WebSocket 桥接命令行或 MCP 与浏览器端
04提供 msw-cli setup 与 /msw-setup 提示词以搭建环境
05支持端口、持久化与客户端目标的配置

适用场景

01在不重启页面的情况下调整接口返回数据进行调试
02由 AI 助手根据描述生成并注册 MSW handler
03在脚本或终端中自动控制 mock 状态

MCP 相关

msw-mcp 是 MCP 服务，向 MCP 客户端暴露管理 MSW mock 的工具与 /msw-setup 提示词。客户端通过 WebSocket 将变更传递给浏览器中的 @msw-mcp/client。

#mock #api-mock #msw #test

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "msw": {
      "command": "npx",
      "args": [
        "-y",
        "msw-mcp"
      ]
    }
  }
}

启动命令npx -y msw-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmmsw-mcpstdio

工具

收录的工具列表 · 更新于 3 周前

参数	类型	必填	说明
handlers	array	是	MSW 处理程序 JavaScript 代码字符串数组。示例： 1. 简单模拟： "http.get('/users', () => HttpResponse.json([]))" 2. 使用请求正文： "http.post('/users', async ({request}) => { const body = await request.json(); return HttpResponse.json({id: 1, ...body}) })" 3. 获取真实 API 后修改： "http.get('/api/data', async ({request}) => { const response = await fetch(bypass(request)); const data = await response.json(); return HttpResponse.json({...data, mocked: true}) })"
once	boolean	否	如果为 true，则将处理程序标记为仅使用一次。首次成功匹配后，后续请求将忽略该处理程序。

详细介绍

MSW AI Agent Bridge Monorepo

此 monorepo 提供了一套工具，用于连接 AI Agent 与 Mock Service Worker（MSW）。它支持直接通过命令行界面或 AI 工具执行来动态添加、更新和移除 MSW 网络模拟，整个过程无需重启应用源代码。

演示

MCP 驱动的 MSW 工作流演示（浏览器桥接、实时处理程序更新）：

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

主要功能

🤖 使用 AI 生成 MSW 处理程序
⚡ 无需重新加载页面即可更新模拟
🌉 Cli/MCP 与浏览器之间的 WebSocket 桥接
🛠️ 使用 msw-cli setup 或 MCP 的 /msw-setup 提示词搭建 MSW 配置
💻 通过 msw-cli 控制终端和脚本
⚙️ 可配置端口、持久化和客户端目标
✨ 供 AI Agent 使用的 Agent 技能

结构

本项目使用 pnpm 和 turbo 以 monorepo 形式构建。

apps/docs（@msw-mcp/docs）：MSW Agent Tools（CLI、MCP、指南）的 Starlight 文档站点。源文件位于 apps/docs/src/content/docs/。
packages/msw-cli：命令行界面（msw-cli），供 AI Agent 或开发者发送动态处理程序更新。运行 msw-cli setup 搭建项目，然后运行 msw-cli open 和处理程序命令。
packages/msw-mcp：已发布的模型上下文协议服务（msw-mcp），让助手可以通过 MCP 工具管理模拟。
packages/client（@msw-mcp/client）：浏览器／环境客户端，用于监听更新并将其注册到本地 MSW 配置。
packages/core（@msw-mcp/core）：核心守护进程和会话管理逻辑，用于协调 CLI 或 MCP 服务与客户端之间的通信。

文档站点

在仓库根目录运行：

pnpm --filter @msw-mcp/docs dev

此命令会启动本地文档开发服务（默认 Astro 端口，通常为 http://localhost:4321）。在运行 pnpm --filter @msw-mcp/docs build 和 pnpm --filter @msw-mcp/docs preview 后，最容易验证生产环境搜索（Pagefind）。

更多详情：apps/docs/README.md。

快速设置：msw-cli

全局安装 CLI：npm install -g msw-cli（或使用包管理器提供的等效命令）。
在新项目中运行 msw-cli setup，并按照输出的步骤配置 MSW 和 @msw-mcp/client。

启动会话，然后从 shell 操作处理程序：

msw-cli open
msw-cli add "http.get('/api/user', () => HttpResponse.json({ id: 1 }))"
msw-cli status
msw-cli close

完整命令参考、标志和工作流：packages/msw-cli/README.md。

快速设置：msw-mcp（MCP）

在 MCP 客户端中注册服务（JSON 配置示例）：

{
  "mcpServers": {
    "msw-mcp": {
      "command": "npx",
      "args": ["msw-mcp@latest"]
    }
  }
}

在客户端中使用 /msw-setup 提示词（或按照手动步骤操作），让浏览器应用加载 msw、@msw-mcp/client 和 worker 桥接程序。

安装选项（VS Code、Claude Code、Cursor 等）、架构、MCP 工具和手动设置：packages/msw-mcp/README.md。

开发脚本

在根目录使用 pnpm 运行以下脚本：

pnpm build：使用 Turborepo 编译所有包。
pnpm dev：启动所有包的开发流水线。
pnpm format：使用 Prettier 格式化代码。
pnpm lint：在整个仓库中运行 lint 检查。

开始使用

安装依赖：
```
pnpm install
```
构建项目：
```
pnpm build
```
使用 CLI：
构建完成后，你可以进入 CLI 目录，或直接通过 node 使用：
```
node packages/msw-cli/build/index.js help
```