聪明地使用编码代理with MCP服务器
🎯 会话目标
利用模型上下文协议（MCP） 学习文档→制定计划→生成问题→代码重构→验证→PR生成自动化到的整个工作流。
📚 要使用的MCP服务器
- 背景7：实时学习最新的库文档
- GitHub：自动创建和管理问题/PR
🚀 开始
1.设置Gemini CLI型号
在Gemini CLI中 /model 输入命令以查看可用模型的列表。 从列表中 专业版 选择型号以获得更好的性能。
# Gemini CLI에서 실행
> /model
# 표시되는 목록에서 Pro 모델 선택
│ Select Model │
│ │
│ 1. Auto (recommended) │
│ Let the system choose the best model for your task │
│ ● 2. Pro │
│ For complex tasks that require deep reasoning and creativity │
│ 3. Flash │
│ For tasks that need a balance of speed and reasoning │
│ 4. Flash-Lite │
│ For simple tasks that need to be done quickly │
│ > To use a specific Gemini model on startup, use the --model flag.2.MCP服务器设置
2.1确认首选项
项目的 /.gemini 文件夹中已经配置了默认的Gemini CLI MCP规范。
2.2安装MCP服务器
在终端上运行以下命令安装所需的MCP服务器：
# GitHub MCP 서버 설치
gemini extensions install https://github.com/github/github-mcp-server
# Context7 MCP 서버 설치
gemini extensions install https://github.com/upstash/context72.3设置环境变量
/.gemini 文件夹中 .env 创建文件并添加所需的API密钥：
GitHub Personal Access Token（PAT）
- 连接到
- 设置以下权限：
- 存储库访问：选择All repositories - 权限：Issues，选择Pull Requests
- 生成令牌后
/.gemini/.env添加到文件：
GITHUB_MCP_PAT=your_github_pat_here最终.env文件示例
# /.gemini/.env
GITHUB_MCP_PAT=your_github_pat_here3.安装依赖性
yarn install4.运行开发服务器
yarn start5.验证MCP服务器连接
运行Gemini CLI /mcp 输入命令检查MCP服务器连接状态。
显示以下两个MCP服务器时，设置已完成：
- 上下文7 -学习最新的库文档
- GitHub -GitHub问题/PR管理
📁 项目结构
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 # 스타일
└── README.md # 리드미 파일🍀 基础练习：通过Context7学习文档
目标
使用Context7 MCP学习最新的库文档并将其反映在代码中。
提示
context7을 통해 불러온 '/googleapis/js-genai' 라이브러리 문서를 참고하여 TextGenerator.jsx 코드 수정을 수행해줘.
结果
- Context7获取google/genai的最新文档
- Gemini基于文档更新代码
______________________________________________________________________
🧨 深入实践：MCP集成工作流
现在 src/before/ProfileForm.jsx按照React 19的最新语法进行重新打包的整个工作流。
第1阶段：学习React 19文档
提示：
context7을 이용해서 React 19 문서를 학습해줘.结果： Gemini CLI将获得React 19的最新知识。
______________________________________________________________________
第2阶段：制定计划和创建问题
提示：
현재 작업 중인 내용을 최신 React 문법을 이용해 ProfileForm.jsx 파일을 리팩토링할 계획을 세우고
GitHub MCP를 이용하여 현재 레포지토리와 연결된 원격 저장소에 새로운 이슈로 만들어 줘.结果：
- Gemini CLI在分析当前文件后制定重新配置计划
- GitHub MCP自动生成问题（例如Issue#1）
______________________________________________________________________
第3阶段：代码重写
提示：
ProfileForm을 최신 리액트 문법을 이용하여 계획한 리팩토링 진행해줘
그리고 완성된 파일을 App.jsx에 추가해줘重新生成核对表：
- 使用最新的React语法集成状态管理
- 保障相同的UI/UX行为
结果：
- Gemini CLI按计划重新生成代码
src/after/ProfileForm.jsx创建文件- 将重新打包的文件添加到App.jsx
______________________________________________________________________
第4阶段：创建PR
提示：
새로운 브랜치를 만든뒤 변경 사항을 커밋하고, 아까 만든 이슈와 연결해서 원격 저장소(origin)에 PR까지 올려 줘.结果：
- GitHub MCP自动生成提交消息
- 自动创建与问题相关联的PR
______________________________________________________________________
💡 关键点
- 背景7：实时学习最新文档，为AI提供准确的上下文
- GitHub MCP：通过自动化问题/PR管理简化工作流
其他使用示例
1.学习最新的库文档
利用Context7学习最新库的API和最佳实践。
提示示例：
context7을 이용해서 Tanstack Query v5 문서를 학습하고,
현재 프로젝트의 데이터 페칭 로직을 최신 패턴으로 리팩토링해줘.2.错误调试
可以参考特定存储库中的最新文档来解决错误。
提示示例：
context7을 이용해서 React 19 문서를 참고해.
useFormStatus를 사용했는데 'pending' 상태가 업데이트되지 않는 이유를
분석하고 해결 방법을 제시해줘.3.浏览最新功能
了解新发布的功能并了解如何使用它们。
提示示例：
context7을 이용해서 React19의 새로운 기능들을 학습하고,
현재 프로젝트에 적용 가능한 기능과 그 이점을 설명해줘.💡 核心信息
用MCP解决“知识鸿沟”
问题：现有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