使用说明
聪明地使用编码代理with MCP服务器
🎯 会话目标
利用模型上下文协议（MCP） 学习文档→制定计划→编写测试→重构代码→验证→PR生成自动化到的整个工作流。
📚 要使用的MCP服务器
- 背景7：实时学习最新的库文档
- GitHub：自动创建和管理问题/PR
- 剧作家：自动生成和运行E2E测试
🚀 开始
1.MCP服务器设置
1.1验证首选项
项目的 /.gemini 文件夹中已经配置了默认的Gemini CLI MCP规范。
1.2安装MCP服务器
在终端上运行以下命令安装所需的MCP服务器：
# GitHub MCP 서버 설치
gemini extensions install https://github.com/github/github-mcp-server
# Context7 MCP 서버 설치
gemini extensions install https://github.com/upstash/context7
注意： PlayWright MCP已经
settings.json中明示。
1.3设置环境变量
/.gemini 文件夹中 .env 创建文件并添加所需的API密钥：
发放Context7 API密钥
- Context7网站登录加入会员
- 从仪表板发放API密钥
/.gemini/.env将以下内容添加到文件：
CONTEXT7_API_KEY=your_context7_api_key_here
GitHub Personal Access Token（PAT）
- GitHub PAT生成页面连接到
- 设置以下权限：
- 存储库访问：选择All repositories
- 权限：Issues，选择Pull Requests
- 生成令牌后
/.gemini/.env添加到文件：
GITHUB_TOKEN=your_github_pat_here
最终.env文件示例
# /.gemini/.env
CONTEXT7_API_KEY=your_context7_api_key_here
GITHUB_TOKEN=your_github_pat_here
2.安装依赖性
yarn install
3.运行开发服务器
yarn start
4.验证MCP服务器连接
运行Gemini CLI /mcp 输入命令检查MCP服务器连接状态。
显示以下三个MCP服务器时，设置已完成：
- 上下文7 -学习最新的库文档
- GitHub -GitHub问题/PR管理
- 剧作家 -自动化E2E测试
📁 项目结构
client/
├── src/
│ ├── before/ # 리팩토링 전 코드 (React 18 패턴)
│ │ ├── ProfileForm.jsx # 폼 제출 처리 (useState 4개 사용)
│ │ └── TextGenerator.jsx # AI 텍스트 생성 (수동 상태 관리)
│ ├── after/ # 리팩토링 후 코드 (React 19 패턴)
│ │ └── (실습 중 생성됨)
│ ├── api.js # Mock API 함수
│ ├── ErrorBoundary.jsx # 에러 처리용 컴포넌트
│ ├── App.jsx # 메인 앱 컴포넌트
│ ├── main.jsx # 진입점
│ └── index.css # 스타일
├── tests/ # 테스트 파일 (선택사항)
│ └── .gitkeep
├── PROMPTS_CHEATSHEET.md # 프롬프트 치트시트
├── INSTRUCTOR_GUIDE.md # 강사용 가이드
└── README.md # 이 파일
🍀 基础练习：通过Context7学习文档
目标
使用Context7 MCP学习最新的库文档并将其反映在代码中。
提示
c7을 이용해서 google/genai 라이브러리를 학습하고
텍스트 생성을 생성형 AI를 사용하도록 변경해줘
结果
- Context7获取google/genai的最新文档
- Gemini基于文档更新代码
🧨 深入实践：MCP集成工作流
现在 src/before/ProfileForm.jsx按照React 19的最新语法进行重新打包的整个工作流。
第1阶段：学习React 19文档
提示：
c7을 이용해서 React 19 문서를 학습해줘.
结果： Copilot将获得React 19的最新知识。
第2阶段：制定计划和创建问题
提示：
현재 작업 중인 내용을 최신 react 문법을 이용해 리팩토링할 계획을 세우고
GitHub MCP를 이용하여 새로운 이슈로 만들어 줘.
结果：
- Copilot在分析当前文件后制定了重新构建计划
- GitHub MCP自动生成问题（例如Issue#1）
第3阶段：编写测试
提示：
이 폼의 동작을 검증할 PlayWright 테스트 코드를 만들어서
'tests/ProfileForm.spec.js' 파일로 저장해 줘.
测试方案：
- 确认表单渲染正常
- 确认是否可以在名字输入字段中输入值
- 确认点击保存按钮时是否更改为加载状态（
aria-busy="true") - 确认是否显示成功信息（
data-testid="profile-success-message") - 测试错误场景（提交空名称等）
结果：
- 使用PlayWright创建E2E测试
- 自动生成tests/ProfileForm.spec.js文件
第4阶段：代码重写
提示：
ProfileForm을 최신 리액트 문법을 이용하여 리팩토링 진행해줘
그리고 완성된 파일을 App.jsx에 추가해줘
重新生成核对表：
- ✅
useActionState通过集成状态管理 - 现有
data-testid保留属性（测试兼容性） - ✅
aria-busy,role保持等接近性属性 - 保障相同的UI/UX行为
结果：
- Copilot根据此计划重新生成代码
src/after/ProfileForm.jsx创建文件- 将重新打包的文件添加到App.jsx
第5阶段：重新配置验证
提示：
PlayWright 테스트를 실행해서
리팩토링이 잘 됐는지 확인해 줘.
验证点：
- 在After版本中也通过了与Before版本相同的测试
- 所有
data-testid保留属性，可重复使用测试代码 - 用户体验（加载、错误、成功消息）工作原理相同
- 利用React 19的新功能，代码变得更加简洁
结果： 运行PlayWright测试并查看结果
第6阶段：创建PR
提示：
변경 사항을 커밋하고,
아까 만든 이슈와 연결해서 PR까지 올려 줘.
结果：
- GitHub MCP自动生成提交消息
- 自动创建与问题相关联的PR
💡 关键点
- 背景7：实时学习最新文档，为AI提供准确的上下文
- GitHub MCP：通过自动化问题/PR管理简化工作流
- PlayWright MCP：通过自动测试生成确保重构的稳定性
Context7诊断提示
gemini -c context7 "React 19에서 useFormStatus를 사용했는데 'pending' 상태가 업데이트되지 않아. 내 코드를 확인하고 React 19 문서를 바탕으로 이유를 설명해줘. (파일:./src/broken/ProfileForm_broken.jsx)"
🎉 测试最新功能：React 19.2
证明Context7的最新信息能力
gemini -c context7 "방금 릴리스된 React 19.2 (2025년 10월)의 새로운 기능인 '<Activity />' 컴포넌트에 대해 설명해줘. 어떤 문제를 해결하기 위해서 사용하는 거야?"
💡 核心信息
用MCP解决的“知识鸿沟（Information Gap）”
问题：现有AI的局限性
- 固定的知识：被困在学习数据的特定时间点
- 缺少最新信息：新的库版本，不知道API更改
- 手动更新：开发人员必须自己查找并提供最新文档
解决方案：通过MCP进行实时上下文连接
- 背景7：实时学习最新的库文档
- GitHub：自动跟踪代码更改历史记录和问题
- 剧作家：通过自动化测试确保重构的稳定性
结果：真正的AI配对编程
MCP不仅仅是一个工具， 为AI提供实时知识的管道是。
这使AI能够应用最新的最佳实践，并生成可靠的代码。
参考
- 如何将context7连接到gemini-cli：https://github.com/upstash/context7
- 如何将Gihub MCP连接到gemini-cli：https://github.com/github/github-mcp-server/blob/main/docs/installation-guides/install-gemini-cli.md
