AI导哈

AI聊天客户端

一个开源的AI聊天应用，支持多AI提供商切换、实时流式响应，并与Model Context Protocol (MCP) 服务器集成。

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

使用说明

MCP客户端聊天

一个由模型上下文协议（MCP）支持的开源AI聊天机器人应用程序，使用Next.js和Vercel的AI SDK构建。

特徴

  • 多个AI供应商支持: OpenAI、Anthropic、Groq、XAI等多个AI可切换供应商
  • 流响应: AI SDK by Vercel实时流文本响应
  • MCP统合: Model Context Protocol (MCP) 通过与服务器的完全集成，扩展可用的工具和功能
  • HTTP/SSE対応：各种各样的MCP可连接到工具提供商HTTP以及SSE传输类型
  • 推理模型支持：支持具有推理能力的模型
  • 时髦的UI: shadcn/ui组件和Tailwind CSSーーーUI
  • Next.js应用路由器：最新Next.js App Router构建

安装，安装

所需环境

  • Node.js 18以上
  • npm 或pnpm
  • PostgreSQL数据库（AWS RDS、Neon、其他PostgreSQL兼容数据库）

安装说明

  1. 克隆存储库
git clone https://github.com/sakoda007/mcp-client-chat.git
cd mcp-client-chat
  1. 安装相关性
npm install
# または
pnpm install
  1. 设置环境变量

项目根目录.env.local创建文件并设置以下环境变量：

# データベース接続URL（PostgreSQL）
DATABASE_URL="postgresql://username:password@host:5432/database?sslmode=require"

# AI API キー（使用するプロバイダーのキーを設定）
OPENAI_API_KEY="sk-..."
ANTHROPIC_API_KEY="sk-ant-..."
GROQ_API_KEY="gsk_..."
XAI_API_KEY="xai-..."

数据库连接URL格式：

  • AWS RDS如果： postgresql://username:password@host:5432/database?sslmode=require
  • SSL禁用证书验证： ?sslmode=no-verify（仅推荐开发环境）
  1. 数据库设置

执行数据库迁移：

npm run db:push

因此chats和messages在数据库中创建表。

  1. 启动开发服务器
npm run dev

在浏览器中 http://localhost:3000 中所述修改相应参数的值。

用法

基本用法

  1. API设置关键帧

    • 聊天界面设置图标（⚙️）来修改标记元素的显示属性
    • 使用，使用AI供应商的API输入密钥
    • 「Save」保存

  2. 选择模型

    • 从聊天界面顶部的模型选择器中选择要使用的模型
    • 可用型号：
      • 开放人工智能: gpt-4o, gpt-4o-mini, gpt-4-turbo
      • Groq: kimi-k2, qwen3-32b, llama4
      • 可解释人工智能: grok-3-mini

  3. 开始聊天

    • 在文本输入栏中输入消息
    • Enter通过键或发送按钮发送
    • AI流式传输显示来自的响应

MCP服务器设置

此应用程序包括：Model Context Protocol (MCP) 可以连接到服务器并访问工具。

MCP添加服务器

  1. 聊天界面设置图标（⚙️）来修改标记元素的显示属性
  2. 「MCP Servers」在本节中，单击添加服务器
  3. 输入服务器名称
  4. 选择传输类型：
    • 超文本传输协议: HTTP用于基础远程服务器
    • SSE（服务器发送事件）: SSE用于基础远程服务器
  5. 服务器URL输入（例如： https://mcp.example.com/mcp）
  6. 「Add Server」来修改标记元素的显示属性
  7. 「Enable Server」单击可在当前聊天会话中启用服务器

可用的MCP服务器示例

  • 公司简介 -提供搜索、代码解释器和其他工具
  • Zapier MCP - Zapier提供对工具的访问
  • 拥抱脸部MCP - Hugging Face Hub的工具访问
  • HTTP或SSE任何与传输兼容的MCP服务器

开発

可用脚本

# 開発サーバーの起動
npm run dev

# プロダクションビルド
npm run build

# プロダクションサーバーの起動
npm start

# リンターの実行
npm run lint

# データベース関連
npm run db:generate  # マイグレーションファイルの生成
npm run db:migrate   # マイグレーションの実行
npm run db:push      # スキーマをデータベースに直接プッシュ
npm run db:studio    # Drizzle Studioを起動（データベースGUI）

项目结构

mcp-client-chat/
├── app/              # Next.js App Router
│   ├── api/         # APIルート
│   └── chat/         # チャットページ
├── components/       # Reactコンポーネント
├── lib/              # ユーティリティとヘルパー
│   ├── db/          # データベース設定とスキーマ
│   └── mcp-client.ts # MCPクライアント
├── ai/               # AIプロバイダー設定
└── drizzle/          # データベースマイグレーションファイル

故障排除

数据库连接错误

  • 密码验证错误：验证数据库凭据（用户名、密码）是否正确
  • 连接超时:
    • 确认数据库是否允许公共访问
    • 检查安全组中的端口5432是否打开
    • 当前IP确认是否允许从地址连接

构建错误

  • .next删除并重建文件夹： rm -rf .next && npm run dev
  • node_modules删除并重新安装： rm -rf node_modules && npm install

API键错误

  • 环境变量或localStorage的API确认密钥是否正确设置
  • 对应使用的模型API确认是否设置了键

许可证

这个项目Apache License 2.0中所述修改相应参数的值。了解更多信息许可证请参见文件。

原始项目

这个项目 Scira板材 中所述修改相应参数的值。

貢献

欢迎普尔请求和伊修的报告。如果要进行重大更改，请首先打开标题讨论更改。

相关 MCP