MCP-开发必备

MCP 开发必备

Git

git-mcp

https://github.com/idosal/git-mcp

安装：

• 其他
• Claude Code: Claude code integration · Issue #53 · idosal/git-mcp

claude mcp add git-docs3 npx mcp-remote https://gitmcp.io/docs

Magic MCP 前端开发的 “ 魔法师 “

什么 magic？

Magic MCP 支持直接创建前端组件，所有组件均来自 21st.dev。使用 “/ui” 指令，就能快速创建各种 UI 界面。

它的使用方式是用 “/ui” 指令，比如，我让它来创建一个博客的项目：

/ui 帮我创建一个好看的个人博客项目

浏览器

playwright-mcp

https://github.com/microsoft/playwright-mcp

什么是 Playwright？

playwright，提供了浏览器自动化能力，能够通过结构化的可访问性快照与网页进行交互，可以实现表单填写、页面跳转、网页数据提取、保存网页为 PDF 等操作；大大简化了测试流程，提高了测试效率和准确性。

比如，我让它直接访问 http://qq.com，他会自动访问页面，并生成一张截图。

你可以让它处理复杂的页面交互，如表单提交、AJAX 请求、页面导航等，确保 Web 应用在各种环境下都能正常工作。很适合直接在编码的过程中做自动化测试。

安装 Playwright

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

测试：

npx @playwright/mcp@latest

支持的参数： https://github.com/microsoft/playwright-mcp?tab=readme-ov-file#configuration

Interactions

https://github.com/microsoft/playwright-mcp?tab=readme-ov-file#tools

使用 Playwright

直接在 cursor 问：

打开一个浏览器，打开百度首页

Playwright 使用场景

• 电商平台回归测试优化

https://www.53ai.com/news/gerentixiao/2025041173698.html

puppeteer

mcp-chrome

https://github.com/hangwin/mcp-chrome

安装 mcp-chrome

• 下载 Chrome 扩展：https://github.com/hangwin/mcp-chrome/releases，解压
• 全局安装 mcp-chrome-bridge: 让 AI 和浏览器插件 “ 握手 “

npm install -g mcp-chrome-bridge
# 或
pnpm install -g mcp-chrome-bridge --unsafe-perm

• 加载本地扩展
  • Open Chrome and go to chrome://extensions/
  • Enable “Developer mode”
  • Click “Load unpacked” and select your/dowloaded/extension/folder
  • Click the extension icon to open the plugin, then click connect to see the MCP configuration
• 浏览器扩展服务连接
• 配置 mcp

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

• Claude Code 配置

claude mcp add --transport http chrome-mcp http://127.0.0.1:12306/mcp

mcp-chrome 支持的 Tools

https://github.com/hangwin/mcp-chrome?tab=readme-ov-file#%EF%B8%8F-available-tools

mcp-chrome 使用

AI helps you summarize webpage content and automatically control Excalidraw for drawing

Help me summarize the current page content, then draw a diagram to aid my understanding.

内容总结

截图

更多

• 历史记录搜索
• 书签搜索
• 自动化表单

Ref

• https://mp.weixin.qq.com/s/N1fSs3IvHUVfm7fSRjVp2Q