背景

我们在用到ApiFox 开发时，一般由后端定义接口，然后前端在ApiFox 中查看接口定义，进行开发，同时还需要复制ApiFox的生成的MOCK数据过来进行前期开发的测试，测试完后再把mock数据改为代理到后端的服务，进行联调，如果我们在用 AI 编辑的时候，还需要到ApiFox中的文档中每个字段的定义复制过来，让 AI 知道我们这个 api 的入参及出参的字段定义。

在反复 ApiFox 和项目编程中跳转往往需要浪费很多我们很多没有必要的时间。那有没有办法让我们让我们的项目中可以集成 ApiFox 呢，可以把 ApiFox 中 Mock 数据及文档能实时在项目中查看，而不再需要打开 ApiFox 的客户端。最重要的是可以上 Cursor 主动得理解 ApiFox 中接口的定义，只要我提到某一个接口，他就能去把 ApiFox 中去了解接口这个接口的入参是什么，出参是什么，每个字段的类型是什么，描述是什么？

理想的研发流程

二行代码的解决方案

而对应上面的理想的研发流程只需要两行代码就能实现，我们只需要引入 mocxykit 的插件，就可以。

首先先安装这个插件

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})

启动项目，在浏览启上访问项目，这个时候就会看到项目的右下角多了一个(proxy&mock 配制)按钮

利用mocxykit 的 AI 研发流程

同步ApiFox 数据

点击 proxy&mock 按钮，弹出配制弹层

点击同步 ApiFox 数据按钮

按指引获取到 ApiFox 的 token，点一步

选择你的项目，跳转下一步

这里勾选你要同步的接口组，（自动同步会在你每次打开配制界面，自动同步所有勾选组API过来），点同步，你就会看到到 ApiFox 中的接口数据同步到自的项目中来了

验证 mock 数据

这时我们可以点击 mock 数据优先，那么对应 API数据就会请求 MOCK 数据

点击查看数据，我们可以看到已经把 ApiFox 的 mock 数据同步过来了

这个时候，你可以测试下，在项目中发送请求，就会返回 mock 数据；

查看文档

点击文档按钮，我们就会看到对就的接口数据的文档

开始 Cursor Ai 编辑

开启 mocxykit 的 MCP

MCP 介绍:

最返cursor 0.46 更新了MCP 的功能，我先简单介绍下 MCP 是什么，MCP 的全文是# Model Context Protocol，也就是模型上下文协议 （MCP） 是一种开放协议，可在 LLM 应用程序与外部数据源和工具之间实现无缝集成。无论您是构建 AI 驱动的 IDE、增强聊天界面还是创建自定义 AI 工作流，MCP 都提供了一种标准化的方式来将 LLM 与它们所需的上下文连接起来。简单的说，就是你可以编写代码，让你在 AI 编辑的时候自动触发你的代码逻辑，如触发某一个命令，或者主动去获取数据，能让 AI 更好的了解你的需求。

mocxykty自带有 mcp 服务

1、点击设置

2. 勾选Cursor

3. 在 cursor 设置 中点击 enabled 开启服务

在 Cursor 中获取数据

这个时候我们中要在 cursor 中，写上获到 url 的数据，就能读出对应的数据，及文档

可以看出，已经成功获到到了 ApiFox中的数据，这个时候你只需要描述出你的需求，AI 就会自动结合数据去分析编码。

切换到代理

在通过cursor 编码完成后，你可能需要把原来的 mock数据，改为请求后端的接口，这个时候你不需要改动任何代码就能实现。

设置代理

我们只需要设置自定义代理，或全局代理就可以

然后在 url 上切换目标为自定义代理

这个时候你请求接口就会走到你设置代理上

让Cursor 读取你浏览的数据

在联调进如果发现"联调中发现有数据与mock不一致",这个时候就需要 Cursor 能读取你浏览器中返回的数据，进行相应调整。这个时候你什么也不用做，只要切换到代理 Cursor 就能读取你最近浏览器最近访问过的数据

可以看到，这时返回的数据，就是刚才浏览器返回的数据，你可以告 AI 根据这个数据你要怎么调整。

点击这里你可以查看，最近请求的数据有哪些，同时你也可以把最近请求的数据转换为 mock 数据，然后对数据进行修改、调试。

到这里已经走完一遍我们上面理想的研发流程的项目研发过程。

更多功能介绍

如何二行代码本地WEB项目可以内网穿透，实现公网访问
通过cursor MCP server 让 AI 可以理解你的数据，加速 AI 编程

mocxykit 是一个很好用的研发工具，也希望觉得有用的同学帮忙给这个工具点个 star