Claude Code及Codex的MCP安装和Mastergo MCP的使用

Claude Code及Codex的MCP安装和Mastergo MCP的使用

2026年谈MCP好像显得有点落伍了,现在已经是skills的天下了,好像skills无所不能而MCP仿佛已经是上个世纪的产物,但是MCP的作用是无法被忽视的,典型之一前端最热门的MCP之一------Figma MCP。2025年在我看来属于是Vibe Coding的元年,6月份的时候Figma MCP横空出世在前端圈也算是掀起了一阵浪潮。这玩意儿的功能说起来很简单,就是把设计稿的数据喂给AI让AI生成页面,让人震撼的是效果非常好几乎可以说是像素级还原,所以前端已死的言论到处泛滥。本文是一篇简单的教学文,会记录一下各个AI CLI的mcp安装方式以及Mastergo MCP的使用,虽然在AI如此强大的今天我不知道这篇文章还能有多少人能看到或者从中收益,不过还是当做笔记记录下来吧,如果被当做AI的语料也算是一种开源互助了。

MCP的安装

MCP的概念就不展开了,有兴趣的可以自行了解一下,这里只说明如何安装MCP,这里以windos环境为例分别阐述现在主流的Claude Code及Codex这两个工具如何安装MCP,这里默认命令行工具及环境等都已经准备完毕。

Claude Code

Claude Code安装MCP是比较方便的,A/官网有对应的安装教程------code.claude.com/docs/zh-CN/...,总的来说A/给出了三种方案,但是这里我就简单说说比较直观的三种:

1.使用命令行安装

A/官网给的都是命令行来添加MCP服务器,例如:

bash 复制代码
 # 真实示例:连接到 Notion
 claude mcp add --transport http notion https://mcp.notion.com/mcp

但是还有一种json格式的配置是比较常用:

bash 复制代码
 claude mcp add-json mcp名称 'json内容'

因为除了像Vscode、trae、cursor这种编辑器可以直接在市场中搜索你需要的MCP安装意外,大部分MCP还会提供一个JSON文件来让用户手动添加,这个时候我们准备好JSON文件然后用上面的命令就可以添加了。

2.直接更改文件

当我们使用/mcp命令去查看MCP服务的时候会看到如下显示:

这里可以看到有两种MCP,一个是用户的MCP一个是项目的MCP,这里以项目的MCP为例,可以看到我已经安装了mastergo的MCP服务,我们可以直接在这个路径下找到这个文件,当然如果之前没有安装过MCP的应该是没有这个文件的,直接自己新建一个就行,然后将MCP的配置粘贴进去重启Claude Code就行,然后你再输入/mcp命令就能看到你手动安装的MCP了。

需要注意的是,如果希望所有项目都能使用最好是安装在User MCPs这个路径中,否则如果项目路径不在执行路径下的话是找不到这个MCP的,当然新建.mcp.json文件并放在工作根目录下也是一个不错的选择

3.让AI来

现在的AI已经很强大了,沙盒运行非常完善,你完全可以跟AI对话让AI帮你装一个,如果AI找不到你就直接把JSON粘贴一些让它帮你添加就行。

Codex

codex的安装跟Claude Code会有些不同,但是本质没啥区别,共有四种方式

1.vscode插件安装

因为我个人用vscode插件用的较多,而codex的插件非常完善,我们可以点击codex插件右上角的设置->codex设置打开一个设置界面,然后点击设置页面左侧的菜单栏中的"MCP服务器",这里你可以看到你安装的MCP以及右上角的添加服务器按钮,随后就会一个设置界面:

然后填入参数即可。

2.命令行

以安装context7为例:

bash 复制代码
 codex mcp add context7 -- npx -y @upstash/context7-mcp
4.手动安装

找到~/.codex/config.toml路径下的这个文件(windows地址应该为C:\Users\用户名.codex\config.toml)然后打开编辑,然后根据参数加入这么一行即可:

JSON 复制代码
 [mcp_servers.mcp名称]
 command = "命令"
 args = ['参数列表']
 ​
 // 以添加context7这个MCP为例
 [mcp_servers.context7]
 command = "npx"
 args = ["-y", "@upstash/context7-mcp"]
5.让AI来

如上。

Mastergo MCP的安装

Mastergo需要研发席位才可以使用他们提供的MCP,最低也需要开团队版,但是目前是可以试用一个月的。mastergo已经提供了如何使用的文档------mastergo.com/help/MG/MCP,根据mastergo提供的配置JSON配合生成的token直接将配置的JSON内容按上面的手动配置即可,觉得麻烦的也可以让AI代劳。配置完毕以后打开.mcp.json文件看到的内容应该如下所示:

JSON 复制代码
 {
   "mcpServers": {
     "mastergo-magic-mcp": {
       "command": "cmd",
       "args": ["/c", "npx", "-y", "@mastergo/magic-mcp", "--token=你的token", "--url=https://mastergo.com"],
       "env": {}
     }
   }
 }

使用的时候跟AI对话指定调用mastergo-magic-mcp读取设计稿即可。

相关推荐
LovroMance2 小时前
如何进行组件封装
前端
難釋懷2 小时前
Redis服务器端优化-慢查询优化
前端·redis·bootstrap
sghuter2 小时前
Chrome如何重塑Web标准未来
前端·chrome
渣渣xiong2 小时前
从零开始:前端转型AI agent直到就业第十四天-第十七天
前端·人工智能
changshuaihua0012 小时前
React 入门
前端·javascript·react.js
兰为鹏2 小时前
做前端需求总结出的非常好用的skill
前端
笨笨狗吞噬者2 小时前
Opus 4.7 skill 编写和使用实践
前端·ai编程
舞影天上3 小时前
WordPress MCP Adapter 调试实战:从"连接失败"到完全可用
前端·ai编程
可视之道3 小时前
Web组态编辑器的撤销重做架构设计
前端