AI导哈

模型上下文协议验证环境

一个用于验证GitHub、Notion、Slack和Figma的MCP服务器集成的开发项目，提供代码管理、文档处理、消息通知和设计解析功能。

  • by Kazu-K0032
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 Kazu-K0032/Cursor-MCP

使用说明

Cursor-MCP（可译为“光标-MCP”或根据上下文具体含义调整）

英语 | 日语

使用Cursor的MCP（模型上下文协议）验证环境。这是一个实现并验证与GitHub、Notion、Slack、Figma等各个MCP服务器协作功能的项目。

功能介绍

🔗 MCP协作功能

  • GitHub MCP（注：MCP在此处可能是一个特定项目、组织或概念的缩写，具体含义需根据上下文确定，但直接翻译为“GitHub MCP”即可，若需更具体的翻译，请提供更多背景信息） - 仓库管理、拉取请求操作、代码审查
  • Notion MCP（注：Notion MCP可能是一个特定产品、项目或概念的名称，由于没有上下文，这里直接按字面翻译，实际翻译可能需要根据具体情境调整） - 文档制作、数据库操作、页面管理
  • Slack MCP（注：MCP在此处可能代表某种特定的职位、认证或项目名称，但根据上下文无法确定具体含义，因此直接保留原样） - 发送消息、频道管理、通知功能
  • Figma MCP（注：MCP在此处可能代表特定的认证或课程，但无具体上下文时，可直译为“Figma MCP认证/课程”，具体含义需根据上下文确定） - 获取设计文件、下载图片、设计解析

🎨 将Figma设计转化为Next.js实现

Figmaデザイン（Story Mapping Template） Next.js実装結果

已验证的MCP功能

1. GitHub MCP（注：MCP可能代表某个特定项目、组织或概念的缩写，但在此上下文中未给出具体含义，因此直接保留原样翻译）

实施内容：

  • 创建和管理拉取请求
  • 代码审查的自动生成
  • 追踪文件更改
  • 提交历史的管理

主要功能：

  • 获取仓库信息
  • 显示拉取请求的详细信息
  • 文件更改的差异显示
  • 添加代码审查评论

2. Notion MCP（此处“MCP”可能代表某个特定概念或缩写，但无具体上下文难以给出准确翻译，故保留原样）公关活动#2)

实施内容：

  • 网络爬虫系统
  • 转换为Notion块格式
  • 结构化数据的管理

主要功能：

  • 从指定URL获取数据
  • 符合Notion规则的格式转换
  • 错误处理和日志功能
  • 通过配置文件实现灵活设置

3. Slack MCP（Slack多项目证书）公关文稿#5）

实施内容：

  • Slack通知功能
  • 频道管理
  • 发送信息功能

主要功能：

  • 实时通知
  • 可自定义的通知内容
  • 错误处理
  • 设置管理功能

4. Figma MCP（Figma官方认证专家）公关稿#6)

实施内容：

  • 获取和分析Figma设计
  • Next.js + TypeScript + SCSS 实现
  • 响应式设计

主要功能：

  • 获取设计文件详情
  • 组件信息分析
  • 自动代码生成
  • 采用FLOCSS结构的样式设计

技术栈

MCP服务器

  • GitHub MCP: @modelcontextprotocol/server-github
  • Notion MCP（此处“MCP”可能代表特定概念或缩写，但无具体上下文难以给出确切翻译，若“MCP”为通用术语或品牌名，则保持原样）： @notionhq/notion-mcp-server
  • Slack MCP（此处“MCP”可能根据上下文有特定含义，但直译为中文即为“Slack MCP”，若“MCP”有具体含义，需根据实际情况翻译）： @modelcontextprotocol/server-slack
  • Figma MCP（注：MCP在此处可能是一个特定上下文或品牌中的缩写，没有直接的中文对应，因此保留原样，若需具体翻译需更多上下文）： figma-developer-mcp

开发环境

  • Next.js 14 - React框架
  • TypeScript - 型安全性
  • SCSS（FLOCSS） - 打造造型的方法
  • 哈士奇 - Git钩子管理
  • ESLint + Prettier - 代码质量管理

操作指南

1. 克隆仓库

git clone <repository>
cd Cursor-MCP

2. MCP设置

.cursor/mcp.json 在文件中设置MCP服务器：

{
  "mcpServers": {
    "private-github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_github_token",
        "GITHUB_REPOSITORY": "your_repository",
        "GITHUB_USERNAME": "your_username"
      }
    },
    "private-notionApi": {
      "command": "npx",
      "args": ["-y", "@notionhq/notion-mcp-server"],
      "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer your_notion_token\", \"Notion-Version\": \"2025-09-03\" }"
      },
      "transportType": "stdio"
    },
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "your_slack_bot_token",
        "SLACK_TEAM_ID": "your_team_id"
      }
    },
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=your_figma_api_key",
        "--stdio"
      ]
    }
  }
}

3. 运行Next.js应用程序

# 依存関係のインストール
pnpm install

# 開発サーバーの起動
pnpm run dev

4. 运行Python抓取系统

# 依存関係のインストール
pip install -r notion-sample/requirements.txt

# 設定ファイルの作成
cp notion-sample/config.sample.py notion-sample/config.py

# スクレイピングの実行
python notion-sample/web_scraper.py

项目构成

Cursor-MCP/
├── .cursor/
│   ├── mcp.json          # MCPサーバー設定
│   └── rules/            # Cursorルール
├── docs/
│   ├── images/           # 画像ファイル
│   └── lang/             # 多言語対応
├── notion-sample/        # Notion MCP検証用Pythonコード
├── src/                  # Next.jsアプリケーション
│   ├── app/             # App Router
│   ├── components/      # Reactコンポーネント
│   └── styles/          # SCSSスタイル
├── .husky/              # Gitフック
├── package.json         # Node.js依存関係
└── specification.md     # プロジェクト仕様書

验证结果

✅ 成功的功能

  • **GitHub MCP（注：MCP在此处可能是一个特定上下文中的缩写或项目名，没有具体上下文难以给出确切翻译，但按字面可译为“GitHub MCP项目”或“GitHub上的MCP”，具体需根据上下文确定）**拉取请求管理、代码审查自动化
  • **Notion MCP（注：这里的“MCP”可能是一个特定上下文中的缩写或术语，没有具体上下文难以给出准确翻译，但通常可保留原样或根据具体含义翻译）**网页抓取、数据结构化
  • **Slack MCP（注：这里的“MCP”可能是一个特定上下文中的缩写或专有名词，没有具体上下文难以给出准确翻译，但一般可理解为“Microsoft Certified Professional”或其他相关含义，若无具体含义，则可保留原样）**通知功能、频道管理
  • **Figma MCP（注：MCP可能代表某种特定的认证或课程，但在此上下文中未给出具体含义，因此直接保留原样）**设计解析、Next.js实现

🎯 实施质量

  • 代码质量0个ESLint错误，Prettier格式统一
  • 型号安全性通过TypeScript类型检查
  • 安全机密信息的妥善管理
  • 保守性FLOCSS结构、组件分割

相关 MCP