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使用示例

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

最后

源码

相关推荐
五月君_3 分钟前
炸裂!Claude Opus 4.6 与 GPT-5.3 同日发布:前端人的“自动驾驶“时刻到了?
前端·gpt
Mr Xu_7 分钟前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
鹏北海-RemHusband44 分钟前
从零到一:基于 micro-app 的企业级微前端模板完整实现指南
前端·微服务·架构
LYFlied44 分钟前
AI大时代下前端跨端解决方案的现状与演进路径
前端·人工智能
光影少年1 小时前
AI 前端 / 高级前端
前端·人工智能·状态模式
一位搞嵌入式的 genius1 小时前
深入 JavaScript 函数式编程:从基础到实战(含面试题解析)
前端·javascript·函数式
zhangshuang-peta1 小时前
OpenCode vs Claude Code vs OpenAI Codex:AI编程助手全面对比
人工智能·ai agent·mcp·peta
anOnion1 小时前
构建无障碍组件之Alert Dialog Pattern
前端·html·交互设计
choke2331 小时前
[特殊字符] Python 文件与路径操作
java·前端·javascript
云飞云共享云桌面1 小时前
高性能图形工作站的资源如何共享给10个SolidWorks研发设计用
linux·运维·服务器·前端·网络·数据库·人工智能