MCP Demo Csci

MCP-demo-CSCI-435

Figma→ 声纳立方→ 具有完全可观察性的GitHub PR工作流

端到端自动化工作流程：

1. 获取Figma设计（通过现有的Figma MCP服务器）
2. 生成代码
3. 运行SonarQube分析（真实扫描仪+模拟回退）
4. 自动应用补丁
5. 验证质量门
6. 创建GitHub PR（通过现有的GitHub MCP服务器）

特征： 相关性跟踪、JSON-RPC相关性、SSE定时、实时仪表板、安全日志记录、速率限制、缓存。

文件

• workflow.py -编曲（Figma→ 声呐→ GitHub）
• sonar.py -SonarQube MCP服务器
• mcp_helpers.py -仪器和相关性
• sse_tracker.py -SSE事件跟踪
• dashboard.py -观察性仪表板
• test_sonar.py -测试

设置

# Install sonar-scanner
cd ~
wget https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-5.0.1.3006-linux.zip
unzip sonar-scanner-cli-5.0.1.3006-linux.zip
sudo mv ~/sonar-scanner-5.0.1.3006-linux /opt/sonar-scanner
echo 'export PATH=$PATH:/opt/sonar-scanner/bin' >> ~/.bashrc
source ~/.bashrc

# If no python: sudo apt install python3
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
# Edit .env with your tokens

code .

安装扩展：副驾驶MCP

Ctrl+Shift+X>搜索副驾驶MCP

添加github和figma MCP服务器

文件>打开文件>粘贴~/.vcode服务器/data/User/mcp.json

将配置粘贴到json文件中：

{
  "servers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${input:github_token}"
      }
    },
    "figma/mcp-server-guide": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp",
      "gallery": "https://api.mcp.github.com",
      "version": "1.0.0"
    }
  },
  "inputs": [
    {
      "id": "token",
      "type": "promptString",
      "description": "",
      "password": true
    },
    {
      "type": "promptString",
      "id": "github_token",
      "description": "GitHub Personal Access Token",
      "password": true
    }
  ]
}

更新.env变量

导航到.env并更新令牌变量

使用情况（MCP服务器模拟）

# Run workflow
python workflow.py

# With dashboard
python dashboard.py 8080  # Terminal 1
python workflow.py ""  # Terminal 2
# Open http://localhost:8080 in your browser

# Test
python test_sonar.py

用法（MCP服务器提示）

注意：使用Figma Starter计划或付费计划的View或Collab座位的用户每月最多只能进行6次工具调用。

Do NOT use workflow.py.

As the agent, personally invoke each MCP server tool step-by-step, printing results after each step. For SonarQube analysis, you MUST use the SonarQube MCP server tool (not local scripts or direct terminal commands).

**IMPORTANT:** After extracting code from Figma, you MUST create the extracted code file(s) in the repo (e.g., `figma_extracted/Home.jsx`) before running SonarQube analysis. Do NOT skip this step or attempt to fetch the file from GitHub. The SonarQube MCP server tool must analyze the actual file you created locally.

**IMPORTANT:** Do NOT use any local git or bash commands for branch, commit, or PR operations. Only use the GitHub MCP server tools for all repository actions (branch creation, file commits, pull requests, etc.). If you use any local commands, you must stop and switch to the MCP server tools.

**Step-by-step workflow:**
1. Use the Figma MCP server tool to fetch the design for https://www.figma.com/design/kn0QYBr8YvZp0jX4OgsL9U/Demo?node-id=9-2708&p=f&m=dev
Print: Step name, cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, status (✓/⊘/✗), and all returned data.
2. Use the Figma MCP server tool to extract code files from the design. 
Print: Step name,  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, status, and all returned data.
3. **Create the extracted code file(s) in the repo (e.g., `figma_extracted/Home.jsx`).**
Print: Confirmation,  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms,  and file paths.
4. **When running SonarQube analysis, use the MCP server tool with the following parameters:**
  - `project_key`: your project key
  - `files`: an object mapping filenames to their contents, e.g. `{ "Home.jsx": "" }`
Print: The full scan result,  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, including all metrics, issues, code smells, duplications, coverage, and the raw JSON response.
If issues are found: Print issue details, apply up to 3 suggested patches, print patch results, and reanalyze.
5. **After creating the extracted file(s), commit them to the new branch before creating a pull request.**
Print: Confirmation,  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms,  and branch name.
6. Use the SonarQube MCP server tool to poll status with the taskId and print the full scan result (including issues, metrics, etc.).
Print: Step name,  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, status, and all returned data.
7. Use the SonarQube MCP server tool to apply any suggested patches.
Print:  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, patch results and updated analysis.
8. Use the SonarQube MCP server tool to check the quality gate.
Print:  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, full quality gate result and status.
9. Use the GitHub MCP server tool to create a new branch, commit the extracted file(s) to it, and then create a pull request in the repo Tetsukiba/MCP-demo-CSCI-435 (or another repo).
Print:  cid, jsonrpc_id, parent ID, tool name, elapsed time in ms, PR URL and number.
10. At the end, print a summary of all steps, including the full SonarQube scan result, PR URL, tool performance statistics (calls, average time per tool), correlation chain tracking, cid, jsonprc_id and parent IDs.

**Notes:**
- Always check the required input format for each MCP server tool.
- Always print detailed output for each tool call and workflow step, including status icons and all returned data.
- Always commit new or changed files to the branch before creating a PR.
Do not use orchestrator scripts. Advance automatically through each step, confirming completion before proceeding.

故障排除

• 如果您看到“在PATH中找不到声纳扫描仪。返回模拟模式。”，请安装SonarScanner并检查您的PATH。

    #For Linux
    sudo apt-get install sonar-scanner

• 如果您看到身份验证错误，请检查您的令牌 .env.
• 始终在工作流之前运行仪表板以查看实时指标。

可观测性

• 所有操作的相关ID
• 秘密编辑（自动）
• 每工具指标
• MCP检查员： mcp dev sonar.py

______________________________________________________________________

用途 现有的 Figma和GitHub MCP服务器-不会复制它们！