mcp-faker-json

mcp-faker-json

背景

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

为了解决这些痛点,我们结合 AIMCP 服务,自动解析接口文档,生成更贴合业务的高质量 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使用示例

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

最后

源码

相关推荐
lpfasd1233 小时前
从零开发MCP Server:原理、用法与手写实战全解析
程序人生·mcp
thatway19894 小时前
闲聊-关于AI终结者的警醒
前端
努力的小郑4 小时前
突发!Claude Code 51万行源码全网裸奔:一场史诗级“开源”事故,国内大厂笑麻了
前端·后端·ai编程
七度黑光4 小时前
用 openclaw 给故障复盘打分:质量审核自动化实践
运维·服务器·前端·数据库·自动化
HashTang4 小时前
Claude Code 源码中 REPL.tsx 深度解析:一个 5005 行 React 组件的架构启示
前端·后端·ai编程
wendycwb5 小时前
前端城市地址根据最后一级倒推,获取各层级id的方法
前端·vue.js·typescript
终端鹿5 小时前
Vue3 模板引用 (ref):操作 DOM 与子组件实例 从入门到精通
前端·javascript·vue.js
千寻girling5 小时前
不知道 Java 全栈 + AI 编程有没有搞头 ?
前端·人工智能·后端
小码哥_常6 小时前
Android开发:精准捕获应用的前后台行踪
前端
蜡台6 小时前
Vue 打包优化
前端·javascript·vue.js·vite·vue-cli