GitHub MCP演示-DevOps工作流演示
🎯 演示场景概述
这个项目是 第一期付款 在全面的人工智能开发工作流程系列中，演示 人工智能工作流程 人工智能提供帮助，但需要循序渐进的指导。
演示系列演变：
- 此演示: 人工智能工作流程（AI作为工具）
- ****：自主AI工作流程（AI作为队友）
- ****：保障人工智能工作流程（人工智能作为质量把关人）
该项目使用 GitHub MCP（模型上下文协议）服务器 与VS Code Copilot的集成，展示了人工智能如何通过人在环方法在从问题检测到部署的整个软件开发生命周期中提供帮助。
📋 演示场景：CSS样式表错误
🐛 演示场景
World Clock web应用程序具有 严重错误 -由于HTML文件中的拼写错误，CSS样式表未加载：
文件: index.html （第7行）\ 问题: ❌ （缺少“e”）\ 应: ✅
影响：整个页面看起来没有样式，完全破坏了用户体验。
🧠 以人为本的战略
这个演示展示了人工智能作为强大助手的传统方法，但每一步都需要人工指导：
- 手动问题发现：人类识别问题并指导人工智能调查
- 分步工作流程：AI在执行每个阶段时都有明确的人类提示
- 人类决策：用户做出所有关于分支、合并等的战略决策。
- 辅助执行：人工智能处理技术实施，但遵循人类指导
🎯 学习目标
此演示展示了：
- 人工智能开发：如何引导人工智能完成工作流程的每一步
- GitHub MCP集成：使用MCP工具从VS代码无缝操作GitHub
- DevOps基础：从问题发现到部署的完整工作流程
- 最佳实践：适当的分支、提交消息和PR管理
- 协同开发：在人工智能的帮助下进行问题跟踪和代码审查
- 基础技能：构建更先进的人工智能工作流程
🔄 工作流程图
graph TD
P[🔧 Pre-Demo Setup: Create Demo Branch]
P --> A[🔍 Phase 1: Issue Discovery]
A --> B[📝 Phase 2: Issue Management via GitHub MCP]
B --> C[🌿 Phase 3: Create Hotfix Branch]
C --> D[🛠️ Phase 4: Local Development & Fix]
D --> E[📤 Phase 5: Push & Create PR]
E --> F[🎉 Phase 6: Merge & Close Issue]
F --> G[🔧 Phase 7: Post-Demo Cleanup]
P1["Create 'demo' branch for safe demonstration"] --> P
A1["Human: Website styling broken! AI: Investigate"] --> A
B1["Create issue with MCP tools"] --> B
C1["Branch: hotfix/css-stylesheet-typo"] --> C
D1["Fix: styls.css → styles.css"] --> D
E1["Push + Auto-link PR to issue"] --> E
F1["Merge PR + Close issue"] --> F
G1["Delete demo branch & cleanup"] --> G
style P fill:#ff6b6b
style A fill:#4ecdc4
style B fill:#45b7d1
style C fill:#96ceb4
style D fill:#feca57
style E fill:#ff9ff3
style F fill:#a8e6cf
style G fill:#ff6b6b🎮 如何运行演示
这个交互式演示展示了人工引导的AI工作流程，您可以在其中指导AI完成完整DevOps周期的每一步。您将体验人工智能辅助开发的基本方法。
🎯 您将体验到： 传统的人工智能辅助模型，您可以通过问题发现、分支管理、代码修复和部署过程来指导人工智能。
先决条件
- VS代码与GitHub Copilot：人工智能开发助理已准备好指导工作流程
- GitHub MCP服务器已配置：通过VS Code实现无缝的GitHub操作
- 已安装Live Server扩展：可选-可视化错误并修复
- Git仓库已连接到GitHub：对问题和PR拥有适当的权限
🔧 MCP服务器设置
在开始演示之前，请确保GitHub MCP服务器正在运行：
- 打开VS代码 在此项目目录中
- 按 Ctrl+Shift+P 打开命令面板并搜索
MCP: Show Installed Server - 这 MCP服务器-已安装 面板将出现在VS Code的左下角
- 找到 GitHub 在列表中，右键单击它，然后选择 启动服务器
- 验证连接 –服务器应显示为“已连接”或“正在运行”
- 测试MCP工具 –您应该在Copilot中看到GitHub MCP函数可用
故障排除：
- 如果没有出现启动按钮或MCP服务器，请确保
.vscode/mcp.json文件存在 - 如果MCP服务器未出现，请重新启动VS代码
- 检查GitHub Copilot扩展是否经过正确身份验证
- 有关详细的设置说明:
- 适用于MCP与Copilot聊天:
未来之旅：快速入门概述
- 🔧 设置和验证：创建演示分支，查看损坏的、未设置样式的网站
- 🔍 引导发现：指导人工智能调查和识别CSS链接问题
- 📋 问题管理：使用MCP工具通过GitHub issues创建和跟踪错误
- 🛠️ 协同开发：引导AI完成分支、修复和PR创建
- ✨ 人工监督：在人工智能处理技术执行的同时进行审查、批准和合并
准备好体验AI作为你的指导助手了吗？ 按照以下阶段完成完整的人工指导工作流程。
阶段0：预演示设置 🔧
🎪 为引导式AI工作流程奠定基础
创建一个安全的演示环境，您可以在其中指导AI完成完整的DevOps周期。
这一阶段实现了什么：创建专用 demo 该分支用于人类引导的人工智能工作流程的安全实验。
用户提示：
Can you create a demo branch remotely from main and switch to it.预期人工智能行动：
- 使用
mcp_github_create_branch从main创建演示分支 - 在本地切换到新的演示分支
- 确认分行创建和结账成功
第一阶段：问题发现 🔍
🕵️ 引导式调查：教授人工智能分析问题
指导你的人工智能助手调查造型问题。这展示了如何通过问题分析和根本原因识别来指导人工智能。
这一阶段实现了什么：展示了如何在保持人类对发现过程的监督的同时，提示人工智能进行技术调查。
用户提示：
Copilot, I just opened my World Clock website and it looks completely broken - all the beautiful styling is missing and it's just plain HTML. Can you investigate what's wrong with the styling?预期人工智能行动：
- 分析HTML文件中的CSS链接问题
- 识别中的拼写错误
href="styls.css" - 解释根本原因和影响
第二阶段：通过GitHub MCP进行问题管理 📝
📝 协作错误跟踪：使用MCP工具进行问题管理
演示如何使用GitHub MCP工具直接从VS Code创建和管理问题。这展示了集成工作流的强大功能。
这一阶段实现了什么：使用MCP工具创建GitHub问题，展示开发环境和项目管理之间的无缝集成。
用户提示：
Now that we've found the CSS link typo, can you create a GitHub issue to track this bug? Make it a critical priority since it breaks the entire user experience. Please create the issue against the current demo branch (not main).预期人工智能行动：
- 使用
mcp_github_create_issue创建错误报告 - 包括CSS链接拼写错误的详细描述
- 设置适当的标签（错误、严重）和优先级
- 参考具体的文件和行号
- 链接到演示分支上下文
第3阶段：创建修补程序分支 🌿
🌱 战略分支：实施最佳实践
引导AI通过适当的分支策略进行修补。这展示了专业的开发工作流程和Git最佳实践。
这一阶段实现了什么：按照命名约定创建一个专用的hotfix分支，为独立的bug修复开发做准备。
用户提示：
Perfect! Now let's create a hotfix branch to fix this CSS issue. Can you create a branch called 'hotfix/css-stylesheet-typo' and switch to it?预期人工智能行动：
- 使用描述性名称创建修补程序分支
- 切换到新分支进行开发
- 确认分支创建和当前工作分支
第四阶段：地方开发与修复 🛠️
🔧 引导式代码修复：人工智能辅助的错误解决
指导人工智能实施实际修复，同时保持对更改的人工监督。这展示了协作开发实践。
这一阶段实现了什么：在AI的帮助下修复了CSS链接拼写错误，演示了如何引导AI完成特定的代码更改。
用户提示：
Now let's fix the actual bug. Can you correct the CSS link in index.html from 'styls.css' to 'styles.css'? Please show me the change you're making.预期人工智能行动：
- 在index.html中找到不正确的CSS链接
- 进行更正：
href="styls.css"→href="styles.css" - 显示正在进行的差异/更改
- 验证修复程序是否正确应用
第五阶段：推动和创建公关 📤
🚀 协作评审：为集成准备更改
引导AI提交更改并创建拉取请求，并将其与原始问题正确链接。
这一阶段实现了什么：展示正确的提交实践和PR创建，并建立问题链接，设置审查流程。
用户提示：
Excellent! The fix looks good. Now let's commit this change and push it to create a PR. Make sure to link it to the issue we created earlier using "Fixes #[issue-number]" in the commit message.预期人工智能行动：
- 使用描述性消息进行阶段和提交更改
- 包括自动问题链接的“修复#\[问题编号\]”
- 将修补程序分支推送到远程存储库
- 使用
mcp_github_create_pull_request创建PR - 将PR链接到原始问题以进行跟踪
第6阶段：合并并关闭问题 🎉
🎊 人的监督：审查和整合
审查PR并指导AI完成合并和清理过程。这展示了审批工作流中的人为监督。
这一阶段实现了什么：显示人工审核和批准步骤，然后引导AI完成合并和清理操作。
用户提示：
Excellent! The PR looks good. Can you merge it into the demo branch, delete the hotfix branch and close the issue after adding a comment to it?预期人工智能行动：
- 使用
mcp_github_merge_pull_request将PR合并到演示分支中 - 使用
mcp_github_add_issue_comment向问题添加完成注释 - 由于PR描述中的“修复#”，问题将自动关闭
- 在本地和远程删除修补程序分支
- 切换回本地演示分支
- 确认所有清理已成功完成
第7阶段：演示后清理 🔧
用户提示：
Finally, can you now delete the demo branch locally and remotely?预期人工智能行动：
- 使用
mcp_github_delete_branch或终端命令删除远程演示分支 - 使用git命令删除本地演示分支
- 切换回主分支
- 确认清理完成
🚀 后续步骤
准备好高级AI工作流程了吗？
既然你已经掌握了这种由人类引导的人工智能工作流程，那么就迈出自主人工智能开发的下一步吧！
🤖
不同之处：
- 此演示：您逐步指导AI完成每个阶段
- 下一个演示：人工智能在最少的人为监督下自主工作
关键升级：
- ✅ AI独立性：不再需要逐步提示
- ✅ 任务委派：只需将问题分配给GitHub编码代理
- ✅ 自主解决问题：AI处理分支、编码、测试和PR创建
- ✅ 人工审核焦点：你审查和批准，而不是微观管理
这一演变展示了人工智能如何从 “AI作为一种工具” 到 “AI作为队友” -展示协作软件开发的未来！
📚 其他资源
______________________________________________________________________
准备好展示AI驱动的DevOps工作流程的力量了！ 🚀