常用MCP记录

MCP 广场

MCP 基本用法

josn 复制代码
{
  "mcpServers": {
    "xxxxx": {}
  }
}

MCP 配置也区分全局配置和局部项目配置,以 kiro 为例,将项目特有的MCP 配置在文件 .kiro/setting/mcp.json 中。

使用记录

chrome-devtools 调试网页

json 复制代码
{
  "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设计

josn 复制代码
{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<MG_MCP_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {
        "MG_MCP_TOKEN": "mg_2b021b165bf34464aa4eb6ade9c9524f"
      },
      "disabled": false
    },
  }
}
josn 复制代码
{
  "mcpServers": {
    "lark_open_doc_search": {
      "command": "npx",
      "args": [
        "-y",
        "@larksuiteoapi/lark-mcp",
        "recall-developer-documents"
      ]
    },
  }
}

fetch 网页内容抓取

这个需要先安装 python 环境 和 uvx

josn 复制代码
{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": [
        "mcp-server-fetch"
      ],
      "env": {},
      "disabled": false,
      "autoApprove": []
    },
  }
}

apifox-mcp-server 读取接口json

通过 MCP 使用 OpenAPI/Swagger 文档 - Apifox 帮助文档

josn 复制代码
{
  "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 包,一种是不安装。

  1. 安装 npm 依赖包 先全局安装 npm i -g swagger-mcp
josn 复制代码
{
  "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"
      ]
    },
  }
}
  1. 不想安装依赖可以使用npx
josn 复制代码
{
  "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"
      ]
    },
  }
}
相关推荐
FreeTinker4 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396234 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
wangruofeng5 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne5 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel6 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
何以解忧,唯有..7 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
软件聚导航7 小时前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag
恋猫de小郭8 小时前
看懂大模型架构术语,帮助你理解目前常见的大模型开源架构
前端·人工智能·ai编程
yma168 小时前
通过提示词实现GitHub Pages 和 Nginx 双部署竟然这么简单?
前端
前端 贾公子8 小时前
第09章:上下文与记忆 (2)
java·服务器·前端