Trae国内版编辑器Solo模式结合MCP使用体验

文章摘要本文介绍了如何利用字节跳动开发的Trae编辑器及其MCP服务提升前端开发效率。作者作为资深前端工程师，分享了在React18+Ant Design+TailwindCss技术栈下，通过集成MasterGo设计稿转代码、知识图谱记忆、文件系统、Swagger接口解析和Mock数据管理等MCP服务的实践经验。重点讲解了各服务的配置方法，包括MasterGo Token获取、Swagger接口

SquabbyZhu

752人浏览 · 2026-01-09 17:49:34

SquabbyZhu · 2026-01-09 17:49:34 发布

客观条件

体验项目为前端项目
项目使用的相关技术是
a. Umijs@4.x（React18）
b. Ant Design@5.X
c. TailwindCss@3.x
开发系统是Mac，实测也是unix环境（题外话：最开始接触Trae还是大约1年前，那个时候博主还是在使用Windows系统开发，当前Trae只有Mac版，后面即使有了Windows版，但是Free模式回答要排队而且每次排队很久，这次是2026年重新体验Free版Trae-Mac）

背景

作为一名资深前端开发工程师，我一直致力于通过工具化手段提升开发效率，将更多精力投入业务理解和效能优化。
早在AI技术兴起之前，我就专注于开发各类周边工具（如VSCode插件、Chrome扩展、ESLint插件、Style插件等），旨在减少重复性工作。
由于技术栈局限（仅掌握JS/TS，不熟悉Python/Java/Go/Rust等语言），在AI技术爆发式发展后，我开发的插件难以有效整合AI能力。
此前对Mcp服务的认知较浅，主要停留在使用网页版AI问答工具（如Cursor/Trea/通义灵码/VSCode Copilot）阶段，仍需手动完成接口方法编写、请求地址配置等重复操作。
曾尝试了解open spec规范，但发现其对前端开发的实用价值有限（可能受限于个人理解深度，未能充分发挥其作用）。

目标

精简不必要的工作流程，例如自动生成service文件、hook文件及相关mock文件，避免重复劳动
优化Vibe Coding的AI逻辑，最大限度减少输出偏差，降低后续维护成本
针对前端开发中的样式调试痛点，引入mcp服务进行效率提升（目前仍在探索阶段）

正文

1、力推字节出品的编辑器 Trae
2、选择Solo模式
3、设置-MCP（或者Solo模式下点击编辑器旁边的 “+” 按钮）
在这里插入图片描述
4. 按照我下面的图在MCP市场先找下对应的MCP服务加入到编辑器中
截止到发稿前，下图中标注的部分都可以搜到并且使用，未圈中的部分是Trae的Mcp服务市场中没有，需要自己添加
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ecae0255c95243348028323ae535fd2c.png

逐个给出每个Mcp对应的设置，“傻瓜式”使用

1. mastergo-magic-mcp

获取mastergo的设计稿自动生成前端代码
在这里插入图片描述

获取mastergo mcp的 Token

使用邮箱创建个Mastergo账号，
点击右上角的头像，选择个人设置
选择安全设置，点击生成令牌
将生成的令牌复制到 mastergo-magic-mcp 的 MG_MCP_TOKEN，点击确认即可
一定要将MasterGo的团队升级到团队版及以上，不然会被权限卡控，
对话描述的时候，页面地址一定是https://mastergo.com/file/178135965830175?fileOpenFrom=project&page_id=M&layer_id=2%3A03，这种带有page_id和layer_id，描述好提示词，比如：“帮我使用React根根 https://mastergo.com/file/178135965830175?fileOpenFrom=project&page_id=M&layer_id=2%3A03 生成页面组件”。

2. Knowledge Graph Memory

Mcp工具说明: 实现基于本地知识图谱的持久化记忆，支持跨会话存储、管理和检索用户相关信息，帮助MCP Client在多轮对话中记住用户及其关系、属性和行为。

配置一个存储的JSON格式文件的绝对路径
然后你和 agent 的对话都会存储到你配置的JSON里，如果你开发过AI对话的话，就一目了然，存储的信息就是你的问题和agent的回复，

3. File System

文件系统模型上下文协议 (MCP) 服务器，可实现文件读取功能。
直接安装，只需随便添加个token，即可

{
  "mcpServers": {
    "File System": {
      "command": "npx -y @bunas/fs-mcp@latest",
      "args": [
        "-y",
        "@bunas/fs-mcp@latest"
      ],
      "env": {
        "API_KEY": "xxxxxxxxx"
      /* 随便写，👉 从官方仓库和 README 看，这个项目本身 并不提供一个中心化的 API key 生成/颁发服务。README 只是说明了 如何在启动服务器时配置你自己的 API key，并没有提供自动生成或注册密钥的流程。换句话说：*/

📌 FS MCP 的 API key 不是从 GitHub 或某个 API 平台去领取的，你自己定义一个即可，在启动服务时传入。
      }
    }
  }
}

在这里插入图片描述

4. swagger

可以读取swagger生成的openai.json文件，可以更好的辅助agent生成对应的前端请求代码，比如生成api地址，请求方法，封装异步请求hook，自动创建interface/type等，减少简单重复的动作
在这里插入图片描述

{
  "mcpServers": {
    "swagger": {
      "command": "npx",
      "args": [
        "-y",
        "@nam088/mcp-swagger-parser"
      ],
      "env": {
        "SWAGGER_URL": "http://192.168.8.164:8000/openapi.json" // 只需把这个换成后端同学给你的openai.json地址即可
      }
    }
  }
}

在这里插入图片描述

5. mock-mcp

通过这个工具，可以有效管理项目中的mock数据，确保其与类型定义的一致性，提高开发效率和代码质量。
需要注意的是这个会启动个默认3002的服务，重复启动会在日志上报错接口被占用

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

结尾

建议在使用Trae时为每个项目单独创建规则，这样能有效减少AI幻觉，确保生成的代码更符合你的技术栈需求。

干货

我自己项目使用的rule规则

1. 项目使用的是Typescript，所有的组件都需要使用Typescript来编写。
2. 项目使用的是Ant Design 和 Ant Design X，所有的组件都需要使用Ant Design或者Ant Design X来编写。
3. 项目使用的是UmiJS。
4. 所有的路由页面都需要使用UmiJS 4来编写。
5. 项目使用的是React 18，所有的组件都需要使用React 18来编写。
6. 项目的样式尽量使用tailwindcss来编写，避免使用style样式覆盖，或者自定义样式名称。
7. 异步请求使用hooks来编写，禁止使用class component来编写异步请求。
8. 数据类型使用Typescript来定义，禁止使用any，如果没有合适的类型定义，使用unknown 或者 Record<string,unknown>。
9. API代码生成和同步规范：
   - 获取swagger规范：使用swagger mcp工具重新加载规范，列出所有API标签和端点，获取每个API端点的详细信息
   - 更新API路径定义：修改src/api/index.ts，添加或更新API路径
   - 创建/更新service文件：从对应的hook文件导入interface，使用request工具类封装API请求
   - 创建/更新hook文件：定义API所需的所有interface和enum，遵循React 18 hooks规范
   - interface组织规范：interface定义在hook或store文件中，service文件从hook或store导入interface
   - 生成/更新mock数据：
     - 位置：mock/xxx/xxx.ts（根据API类型命名）
     - 格式：遵循项目现有的mock数据格式，与API响应格式保持一致
     - 内容：为每个API端点提供合理的mock数据，包括成功和失败场景
     - 命名：根据API类型创建对应的目录和文件
     - 更新：当API参数或响应格式变化时，同步更新mock数据
     - 示例：对于GET /bridge/agent/site，创建mock/agent/site.ts文件，包含对应的mock数据
   - 验证和测试：运行TypeScript编译检查，启动开发服务器，测试API端点
   - 详细流程：当需要根据swagger更新API代码时，按照以下步骤执行：
     1. 使用swagger mcp工具获取最新规范：重新加载规范，列出所有API标签和端点，获取每个API端点的详细信息
     2. 更新API路径定义：修改src/api/index.ts，添加或更新API路径
     3. 创建/更新hook文件：定义API所需的所有interface和enum，遵循React 18 hooks规范
     4. 创建/更新service文件：从对应的hook文件导入interface，使用request工具类封装API请求
     5. 生成/更新mock数据：
        - 根据API类型创建对应的目录和文件
        - 为每个API端点提供合理的mock数据，包括成功和失败场景
        - 确保mock数据结构与API响应格式一致
        - 当API参数或响应格式变化时，同步更新mock数据
     6. 运行TypeScript编译检查：确保所有代码没有类型错误
     7. 启动开发服务器：验证项目可以正常启动
     8. 测试API端点：使用curl或浏览器测试所有API端点，确保返回正确的mock数据
   - 命名规范：service方法使用getXxx、postXxx等命名，hook使用useXxx命名
   - 严格遵循TypeScript类型规范，禁止使用any
   - 遵循项目现有的代码结构和命名约定