MCP 广场
MCP 基本用法
{
"mcpServers": {
"xxxxx": {}
}
}
MCP 配置也区分全局配置和局部项目配置，以 kiro 为例，将项目特有的MCP 配置在文件 .kiro/settings/mcp.json 中。
使用记录
chrome-devtools 调试网页
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
],
"disabled": false,
"autoApprove": [
"take_screenshot",
"navigate_page",
"evaluate_script",
"click",
"take_snapshot",
"list_pages",
"wait_for",
"list_console_messages",
"new_page",
"get_console_message",
"select_page",
"press_key",
"fill"
]
},
}
}
mastergo 读取UI设计
Vibe MCP 配置
Vibe MCP 运行在本地客户端，无需使用 个人令牌
{
"mcpServers": {
"mastergo": {
"command": "npx",
"args": ["-y", "@mastergo/vibe-mcp", "--url=http://localhost:50678"]
}
}
}
Magic MCP 配置
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=<MG_MCP_TOKEN>",
"--url=https://mastergo.com"
],
"env": {
"MG_MCP_TOKEN": "xxxxxxxxxx"
},
"disabled": false
},
}
}
figma 读取UI设计
{
"mcpServers": {
"figma-free": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_FIGMA_API_KEY_HERE",
"--stdio"
]
}
}
}
如果mcp 启动不成功，可以尝试手动执行 npm i -p figma-developer-mcp
获取 Figma API Key
- 登录 www.figma.com
- 点击右上角头像 → Settings
- 左侧菜单选择 Security
- 滚动到 Personal access tokens 区域
- 点击 Generate new token，填写名称后复制 token
获取 Figma 文件信息
- 打开目标 Figma 文件，从 URL 中提取关键参数：
https://www.figma.com/design/{FILE_KEY}/...?node-id={NODE_ID}- FILE_KEY：URL 中 /design/ 后面的那段字符串，例如 oN5e9fcV9MAIoZGseiUTrc
- NODE_ID：URL 参数 node-id 的值，例如 0-1（表示根节点）
使用方法
请使用 figma-free MCP 工具读取以下 Figma 文件：
- file key: oN5e9fcV9MAIoZGseiUTrc
- node-id: 0-1
lark_open_doc_search 读取飞书文档
安装并使用开发文档检索 MCP - 飞书 CLI - 开发文档 - 飞书开放平台
先安装 npm install -g @larksuiteoapi/lark-mcp
再配置
{
"mcpServers": {
"lark_open_doc_search": {
"command": "npx",
"args": [
"-y",
"@larksuiteoapi/lark-mcp",
"recall-developer-documents"
]
},
}
}
fetch 网页内容抓取
这个需要先安装 python 环境 和 uvx
{
"mcpServers": {
"fetch": {
"command": "uvx",
"args": [
"mcp-server-fetch"
],
"env": {},
"disabled": false,
"autoApprove": []
},
}
}
apifox-mcp-server 读取接口json
通过 MCP 使用 OpenAPI/Swagger 文档 - Apifox 帮助文档
{
"mcpServers": {
"API 文档": {
"command": "npx",
"args": [
"-y",
"apifox-mcp-server@latest",
"--oas=https://test-xxxx.xxx.com/xxx/docs/api.json"
]
},
}
}
因为这个MCP是指定了接口文档地址，因此需要给每个前端项目单独配置。
swagger-mcp 读取接口json
因为这个MCP是指定了接口文档地址，因此需要给每个前端项目单独配置。因为使用了 npm 包，所以可以采用两种方式配置，一种是安装 npm 包，一种是不安装。
- 安装 npm 依赖包
先全局安装
npm i -g swagger-mcp。
{
"mcpServers": {
"API 文档": {
"command": "swagger-mcp",
"args": [
"--specUrl=https://test-xxxx.xxx.com/xxx/docs/api.json"
],
"autoApprove": [
"get_endpoint_details",
"fetch_swagger_info",
"list_endpoints",
"execute_api_request",
"validate_api_response"
]
},
}
}
- 不想安装依赖可以使用npx
{
"mcpServers": {
"API 文档": {
"command": "npx",
"disabled": false,
"args": [
"-y",
"swagger-mcp@latest",
"--specUrl=https://test-xxxx.xxx.com/xxx/docs/api.json"
],
"autoApprove": [
"get_endpoint_details",
"fetch_swagger_info",
"list_endpoints",
"execute_api_request",
"validate_api_response"
]
},
}
}
jenkins-mcp 调用jenkins去部署
代码开发完成后不想打开页面，直接让AI去部署代码。
{
"mcpServers": {
"jenkins-mcp": {
"command": "uvx",
"args": [
"jenkins-mcp"
],
"env": {
"JENKINS_URL": "https://jenkins.xxxx.com/",
"JENKINS_USERNAME": "xxx",
"JENKINS_PASSWORD": "xxxxx",
"JENKINS_USE_API_TOKEN": "false"
},
"autoApprove": [
"list_jobs",
"trigger_build"
]
},
}
}
GitHub MCP 服务器
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
}
}
}
}
与 GitHub 的联动
# 获取仓库信息
"告诉我 facebook/react 仓库的最新发布信息"
# 代码搜索
"帮我在 tensorflow/tensorflow 仓库里找 conv2d 的实现"
# 创建 Issue
"帮我为这个 bug 创建一个 Issue"
# 创建 PR
"从 feature/login 分支向 main 分支创建一个 PR"
其他
MCP第4章：常用mcp servers和使用案例文章介绍了多种常用 MCP 服务器及使用案例，包括文件系统、数据库、高 - 掘金
【通义灵码 2.5 + Qwen3 + MCP Sever】AI总结微信提取聊天记录！再也不怕错过重要信息！本文介绍了如 - 掘金
