AI导哈

AI聊天客户端

基于Gemini API和Model Context Protocol（MCP）的AI聊天客户端，支持多聊天室管理、实时流式传输和工具调用。

  • by devbrother2024
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 devbrother2024/mcp-client

使用说明

MCP客户端

支持Model Context Protocol（MCP）的AI聊天客户端。它基于Gemini API，可与MCP服务器连接，以利用各种工具（Tools）、提示符（Prompts）和资源（Resources）。

主要功能

  • AI聊天：基于Gemini API的流式聊天
  • MCP服务器管理：支持STDIO、HTTP、SSE等多种传输方式
  • 调用工具：AI自动调用MCP服务器提供的工具
  • 管理聊天室：创建和管理多个聊天室（Supabase集成）
  • 实时流媒体：通过SSE以令牌为单位进行实时响应

🛠 技术堆栈

  • 框架：Next.js 15（应用路由器、Turbopack）
  • 语言：TypeScript
  • 造型：顺风CSS
  • UI组件：shadcn/ui，Radix ui
  • 图标：Lucide React
  • LLM：Google Gemini API
  • 主控程序：@modelcontextprotocol/sdk
  • 数据库：Supabase（保存聊天）
  • 马克敦：反应markdown，评论gfm，重新键入highlight

📋 要求

  • Node.js：推荐LTS版本（v18或更高版本）
  • 包管理器：pnpm（建议）或npm
  • API密钥：Gemini API Key，Supabase项目

🚀 开始

1.存储库克隆

git clone <repository-url>
cd mcp-client

2.安装依赖性

# pnpm (권장)
pnpm install

# 또는 npm
npm install

3.设置环境变量

在项目根目录中 .env.local 创建文件并输入以下内容：

# .env.example 파일을 참고하여 작성
cp .env.example .env.local

.env.local 文件内容：

# Gemini API Key (필수)
# Google AI Studio에서 발급: https://aistudio.google.com/app/apikey
GEMINI_API_KEY="YOUR_GEMINI_API_KEY"

# Supabase 설정 (채팅 저장용)
# Supabase 프로젝트 생성 후 Settings > API에서 확인
NEXT_PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"

如何发放API密钥

  1. Gemini API密钥

    • 谷歌AI工作室连接到
    • 单击“Create API Key”创建密钥
    • 生成的密钥 GEMINI_API_KEY在中输入

  2. Supabase

    • Supabase在中创建新项目
    • 在Project Settings>API菜单中查看URL和anon key
    • 各自 NEXT_PUBLIC_SUPABASE_URL和 NEXT_PUBLIC_SUPABASE_ANON_KEY在中输入

4.Supabase数据库设置

安装Supabase CLI

# macOS
brew install supabase/tap/supabase

# npm (전역 설치)
npm install -g supabase

# Windows (scoop)
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

连接Supabase项目

# Supabase 로그인
supabase login

# 프로젝트 연결 (Supabase 대시보드에서 Project ID 확인)
supabase link --project-ref YOUR_PROJECT_ID

运行迁移

# 원격 데이터베이스에 마이그레이션 적용
supabase db push

迁移文件 supabase/migrations/ 在文件夹中。

请参见：存储存储桶（chat-images）也将自动生成，包括在迁移中。

5.运行开发服务器

# pnpm
pnpm dev

# 또는 npm
npm run dev

在浏览器中 http://localhost:3000打开进行确认。

🗄️ 数据库模式

聊天室

专栏 类型 说明
id UUID 主键
title TEXT 聊天室标题
created_at TIMESTAMPTZ创建时间
updated_at TIMESTAMPTZ 修改时间

消息

专栏 类型 说明
id UUID 主键
chat_room_id UUID 聊天室FK
role TEXT “user”或“model”
content TEXT 消息内容
tool_calls JSONB 工具调用信息（选择）
created_at TIMESTAMPTZ创建时间

📁 项目结构

mcp-client/
├── app/                    # Next.js App Router
│   ├── api/               # API Routes
│   │   ├── chat/          # 채팅 API (스트리밍)
│   │   ├── chat-rooms/    # 채팅방 CRUD API
│   │   └── mcp/           # MCP 서버 연동 API
│   ├── mcp/               # MCP 관리 페이지
│   ├── page.tsx           # 메인 채팅 페이지
│   └── layout.tsx         # 루트 레이아웃
├── components/            # React 컴포넌트
│   ├── mcp/              # MCP 관련 컴포넌트
│   └── ui/               # shadcn/ui 컴포넌트
├── contexts/              # React Context
│   └── mcp-context.tsx   # MCP 상태 관리
├── lib/                   # 유틸리티 및 라이브러리
│   ├── chat-storage.ts   # 채팅 저장 로직
│   ├── mcp-client.ts     # MCP 클라이언트
│   ├── mcp-storage.ts    # MCP 설정 저장
│   ├── mcp-types.ts      # MCP 타입 정의
│   └── supabase.ts       # Supabase 클라이언트
├── supabase/              # Supabase 설정
│   ├── config.toml       # CLI 설정
│   └── migrations/       # DB 마이그레이션 파일
└── public/               # 정적 파일

🔧 可用脚本

pnpmnpm说明 |------|-----|------| | pnpm dev | npm run dev 运行开发服务器（Turbopack） | pnpm build | npm run build |生产构建| | pnpm start | npm run start |运行生产服务器| | pnpm lint | npm run lint | ESLint检查| | pnpm format | npm run format |使用Prettier格式化代码| | pnpm format:check | npm run format:check |检查格式|

🔌 连接MCP服务器

  1. 从主屏幕左上角转到MCP管理页面
  2. 单击“注册新服务器”按钮
  3. 输入服务器信息：
    • 工作室：command、args、env设置
    • HTTP/SSE：URL设置
  4. 连接服务器后检查工具、Prompts和资源

支持的传输方式

  • 工作室：基于本地进程（例如： npx, uvx)
  • 可流式传输的HTTP：HTTP流
  • 上海证券交易所：服务器发送的事件

注意事项

  • API密钥安全性: .env.local 永远不要将文件提交到Git
  • 公共PC：敏感信息存储在localStorage中，使用公共PC时要小心
  • 服务器端呼叫：所有外部API调用仅在服务器端执行

📄 许可证

MIT许可证

相关 MCP