mcp-faker-json

mcp-faker-json

背景

在前端开发过程中,我们常常需要在接口尚未完成的阶段进行 mock 数据处理。通常的做法是根据后端提供的接口文档进行开发,同时使用第三方库(如 json-schema-faker)生成模拟数据。然而,实际使用中常会遇到诸如枚举值缺失、字段语义不清等问题,导致 mock 数据效果不理想。

为了解决这些痛点,我们结合 AI 与 MCP 服务,自动解析接口文档,生成更贴合业务的高质量 mock 数据,大幅提升开发效率与数据真实感。

功能特性

  • 支持通过 YApi 接口文档地址一键生成 mock 数据,智能识别类型注释,生成合理的数据
  • 支持stdio/sse/http transport
  • 支持命令式创建token 配置文件

快速开始

要求

  • nodejs >= 18.16.1
  • vscode,cursor或其他MCP客户端

安装

在VSCode安装

将此内容添加到你的VSCode MCP配置文件.vscode/mcp.json中。更多信息请参见VSCode MCP文档。

json 复制代码
{
  "servers": {
    "mcpfakerjson": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-faker-json@latest"],
    }
  }
}
在cursor安装

将此内容添加到cursor配置文件.cursor/mcp.json中。更多信息请参见cursor MCP

json 复制代码
{
  "mcpServers": {
    "faker-json": {
      "command": "npx",
      "args": ["-y", "mcp-faker-json@latest"]
    }
  }
}

配置token

在开始使用前,需要先配置token。访问yapi文档需要token。

  • 可以在url上携带。例如https://xxx/xxx?token=xxx

  • 环境变量配置

    json 复制代码
    {
      "servers": {
        "mcpfakerjson": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "mcp-faker-json@latest"],
          "env": {
            "YAPI_TOKEN": "xxxx"
          }
        }
      }
    }
  • 配置文件(推荐,不同的项目会有不同的token,根据projectId映射token)。环境变量读取配置文件的路径可以通过环境变量配置YAPI_TOKEN_CONFIG,默认从path.join(os.homedir(), ".yapi-token.json")读取。

    json 复制代码
    {
      "servers": {
        "mcpfakerjson": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "mcp-faker-json@latest"],
          "env": {
            "YAPI_TOKEN_CONFIG": "xxxx"
          }
        }
      }
    }
    
    // yapi-token.json内容
    {
      "项目ID": "your token"
    }

快速创建token配置文件

为了方便用户快速创建配置文件。可以使用提供的命令npx mcp-faker-json@latest -c。目前只支持默认在path.join(os.homedir(), ".yapi-token.json")创建。

1.1.1版本 支持通过读取YAPI_TOKEN_CONFIG环境变量读取路径创建

vscode使用示例

具体参考传送门

  1. vscode设置启用mcp服务。打开设置页面搜索 chat mcp

2. 打开.vscode/mcp.json的文件,点击start

3. vscode右上角打开ai聊天页面,并配置agent

4. 在输入框输入链接发送,并选择continue 最终ai会输出mock数据~大功告成!

Cursor使用示例

传送门。可以参考官方文档这里就不再说明了。

最后

源码

相关推荐
情 九7 小时前
MCP 实战 08:查询超时怎么办?给工具加上有限重试
mcp
Csvn9 小时前
WASM
前端
修己xj10 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing0310 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿11 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying12 小时前
网购能买Token了!
前端
h_654321012 小时前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马13 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture13 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李13 小时前
openFeign入门
java·开发语言·前端