AI聊天应用程序（MCP集成）
结合Google Gemini API和Model Context Protocol（MCP）的AI聊天应用程序。
主要功能
- 🤖 Gemini API集成：使用Google Gemini 2.0 Flash模型进行AI聊天
- 🔧 MCP工具集成：通过Model Context Protocol使用外部工具
- 💬 实时流媒体：使用Server-Sent Events进行实时响应
- 🛠️ 函数调用：AI自动调用MCP服务器上的工具
- 📱 响应式UI：支持移动和桌面
- 🌙 黑暗模式：自动切换亮/暗主题
技术堆栈
- 框架：Next.js 15（应用路由器）
- 用户界面：顺风CSS+shadcn/ui
- 人工智能：Google Gemini API（@Google/genai）
- 主控程序：模型上下文协议SDK
- 语言：TypeScript
- 包管理器：pnpm
安装和运行
1.安装依赖性
pnpm install2.设置环境变量
.env.local 创建文件并设置以下环境变量：
GEMINI_API_KEY=your_gemini_api_key_here
LLM_MODEL=gemini-2.0-flash-0013.运行开发服务器
pnpm dev在浏览器中 http://localhost:3000打开查看应用程序。
如何连接MCP服务器
1.MCP服务器管理
您可以在应用程序顶部的“管理MCP服务器”选项卡中添加和管理MCP服务器。
2.支持的MCP传输方式
- 工作室：运行本地命令（例如：
npx -y @philschmid/weather-mcp) - 上海证券交易所：基于Server-Sent Events的Web服务器连接
- 超文本传输协议：Streamable HTTP连接（支持SSE自动回退）
3.激活MCP工具
在聊天屏幕中，您可以通过MCP工具面板启用/禁用连接服务器上的工具。
4.函数调用过程
- 用户输入问题
- 如果需要AI，自动调用MCP工具
- 根据工具运行结果生成最终答案
示例MCP服务器
# 날씨 정보 MCP 서버
npx -y @philschmid/weather-mcp
# 파일 시스템 MCP 서버
npx -y @modelcontextprotocol/server-filesystem项目结构
ai-chat-hands-on/
├── app/
│ ├── api/
│ │ ├── chat/stream/ # 스트리밍 API
│ │ ├── chat/execute-function/ # 함수 실행 API
│ │ └── mcp/ # MCP API Routes
│ │ ├── connect/ # 서버 연결
│ │ ├── disconnect/ # 서버 연결 해제
│ │ ├── tool/ # 도구 호출
│ │ ├── prompt/ # 프롬프트 실행
│ │ ├── resource/ # 리소스 읽기
│ │ └── status/ # 연결 상태 확인
│ └── page.tsx # 메인 페이지
├── components/
│ ├── chat/ # 채팅 관련 컴포넌트
│ ├── mcp/ # MCP 관리 컴포넌트
│ └── ui/ # 공통 UI 컴포넌트
├── lib/
│ ├── actions/ # MCP 서버 로직 (Server Actions에서 변경됨)
│ ├── contexts/ # React 컨텍스트
│ ├── mcp/ # MCP 클라이언트 (API Routes 기반)
│ ├── types/ # 타입 정의
│ └── utils/ # 유틸리티 함수开发指南
验证代码质量
pnpm typecheck # TypeScript 타입 체크
pnpm lint # ESLint 검사
pnpm format # Prettier 포맷팅运行测试
pnpm test发布
建议使用Vercel部署：
- 将代码推送到GitHub
- Vercel项目import
- 设置环境变量（
GEMINI_API_KEY) - 完成自动部署
许可证
通过MIT许可提供。