AI导哈

协议服务器

MCP服务器是连接Claude Code与外部服务和工具的桥梁，支持浏览器自动化、PR管理和设计文件访问等功能。

  • by tomdwipo
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 tomdwipo/mcp

使用说明

MCP服务器

模型上下文协议 启用的服务器 克劳德代码 与外部服务和工具进行交互。

概述

该项目提供独立的MCP服务器，将Claude Code连接到：

服务器 用途 工具 状态
chrome开发工具mcp 通过Chrome DevTools协议实现浏览器自动化 15 ✅ 稳定
比特桶mcp 通过Bitbucket REST API v2进行拉取请求管理 8 ✅ 稳定
figma mcp 通过Figma REST API访问设计文件 4 ✅ 稳定

快速开始

先决条件

  • Node.js>=18.0.0
  • 克劳德代码CLI
  • Chrome浏览器（适用于Chrome devtools mcp）
  • Figma账户（适用于Figma mcp）

安装

# Clone the repository
git clone https://github.com/tomdwipo/mcp.git
cd mcp

# Install dependencies
npm install

构建

# Build all servers
npm run build

# Or build individually
cd chrome-devtools-mcp && npm run build
cd bitbucket-mcp && npm run build
cd figma-mcp && npm run build

配置

将服务器添加到 ~/.claude.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/mcp/chrome-devtools-mcp/dist/index.js"],
      "env": {}
    },
    "bitbucket": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/mcp/bitbucket-mcp/dist/index.js"],
      "env": {
        "BITBUCKET_API_TOKEN": "your-token-here",
        "BITBUCKET_EMAIL": "your-email@company.com"
      }
    },
    "figma": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/mcp/figma-mcp/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your-token-here"
      }
    }
  }
}

Chrome DevTools安装程序

# Launch Chrome with debugging port
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

比特桶API代币

在创建API令牌https://bitbucket.org/account/settings/app-passwords/范围：

  • repository:read
  • pullrequest:read
  • pullrequest:write

Figma访问令牌

在以下位置创建个人访问令牌https://www.figma.com/developer/personal-access-tokens

项目结构

mcp/
├── chrome-devtools-mcp/    # Browser automation
│   ├── src/
│   │   ├── index.ts        # MCP server
│   │   └── chrome-client.ts
│   └── dist/
├── bitbucket-mcp/          # PR management
│   ├── src/
│   │   ├── index.ts        # MCP server
│   │   └── bitbucket-client.ts
│   └── dist/
├── figma-mcp/              # Design access
│   ├── src/
│   │   ├── index.ts        # MCP server
│   │   └── figma-client.ts
│   └── dist/
└── .docs/c4/               # C4 architecture docs

文档

文档 描述
chrome开发工具mcp/README.md 浏览器自动化详细信息
bitbucket mcp/README.md PR管理详细信息
figma mcp/README.md 设计文件访问详细信息
.docs/c4/ C4架构图
CLAUDE.md Claude Code的项目文档

可用工具

chrome开发工具mcp（15个工具）

  • launch_chrome -使用调试端口启动Chrome
  • screenshot -截图（base64 PNG）
  • click -单击元素或坐标
  • type -在元素中键入文本
  • navigate -导航到URL
  • evaluate -执行JavaScript
  • get_content -获取页面文本/HTML
  • list_tabs -列出所有选项卡
  • switch_tab -切换到选项卡
  • scroll -智能滚动（滚轮+DOM）
  • mouse_move -移动鼠标
  • drag_and_drop -从A拖动到B
  • smart_type -带修饰符的类型
  • wait_for -等待元素
  • canvas_zoom -画布缩放应用程序

bitbucket mcp（8个工具）

  • create_pr -创建pull请求
  • get_pr -获取PR详细信息
  • list_prs -列出带有过滤器的PR
  • update_pr -更新PR元数据
  • approve_pr -批准PR
  • merge_pr -合并PR
  • add_comment -添加评论
  • get_diff -获取公关差异

figma mcp（4个工具）

  • get_file -获取文件文档结构
  • get_file_nodes -按ID获取特定节点
  • get_image_render -将节点导出为图像
  • get_components -获取所有组件

技术细节

MCP协议

  • 运输： 标准输入/输出
  • SDK： @modelcontextprotocol/sdk
  • 沟通： JSON-RPC风格的消息传递

chrome开发工具mcp

  • 协议： 基于WebSocket的Chrome DevTools协议（CDP）
  • 端点： localhost:9222
  • 图书馆： chrome-remote-interface

比特桶mcp

  • 协议： 基于HTTPS的REST API v2.0
  • 端点： https://api.bitbucket.org/2.0
  • 身份验证： HTTP基本身份验证
  • 费率限制： 1000个请求/小时

figma mcp

  • 协议： HTTPS上的REST API v1
  • 端点： https://api.figma.com/v1
  • 身份验证： 个人访问令牌
  • 费率限制： 处理429并重试

发展

# Watch mode for development
npm run dev

# Run tests (when available)
npm test

# Lint code
npm run lint

许可证

麻省理工学院

贡献

欢迎投稿！请在提交PR之前阅读我们的投稿指南。

制作❤️ 为了 克劳德代码

相关 MCP