AI导哈

聊天机器人应用

一个使用Model Context Protocol (MCP)连接Claude AI与自定义工具和服务的全栈聊天机器人应用，采用微服务架构，支持独立部署和扩展。

  • by serhii-lyzun
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 boxior/MCP

使用说明

MCP聊天机器人项目

一个使用模型上下文协议（MCP）将Claude AI与自定义工具和服务连接起来的全栈聊天机器人应用程序。采用微服务架构构建，可独立部署和扩展。

项目结构

MCP/
├── react-app/              # Next.js chatbot UI (Port 3000)
├── mcp-middleware/         # Express server connecting to Claude API (Port 3001)
├── weather/                # HTTP MCP weather server with auth (Port 3002)
└── mcp-client-typescript/  # TypeScript MCP client (legacy)

建筑

3-服务架构：

[React App] → [Middleware] → [Weather MCP Server]
   :3000         :3001              :3002
                              (Bearer Auth)

特性

  • React聊天用户界面 -具有实时流媒体功能的专业聊天机器人界面
  • MCP集成 -通过HTTP MCP传输将Claude AI连接到自定义工具
  • 气象MCP工具 -具有承载令牌身份验证的独立HTTP MCP服务器
  • 微服务 -每个服务都可以独立部署和扩展
  • TypeScript -用于类型安全的全类型代码库

快速开始

选项1:Docker Compose（推荐）

# 1. Copy environment template
cp .env.example .env

# 2. Add your Anthropic API key to .env
# ANTHROPIC_API_KEY=your_key_here

# 3. Start all services
docker-compose up --build

# Access:
# - Frontend: http://localhost:3000
# - Middleware: http://localhost:3001
# - Weather MCP: http://localhost:3002

选项2：手动设置

终端1-气象MCP服务器：

cd weather
npm install
npm run b:s
# Runs on http://localhost:3002

终端2-中间件：

cd mcp-middleware
npm install

# Create .env file
echo "ANTHROPIC_API_KEY=your_key_here" > .env
echo "MCP_SERVER_URL=http://localhost:3002/mcp" >> .env
echo "MCP_SERVER_API_KEY=demo-api-key-123" >> .env

npm start
# Runs on http://localhost:3001

终端3-React应用程序：

cd react-app
npm install
npm run dev
# Runs on http://localhost:3000

运作原理

  1. 用户输入 → React聊天机器人UI向中间件发送消息
  2. 中间件 → 通过HTTP连接到Claude API和Weather MCP服务器
  3. 工具执行 → Claude调用MCP工具（带Bearer身份验证的天气）
  4. 响应 → 结果实时流式返回UI

技术栈

服务 技术
前端 Next.js、React、TypeScript、@chatscope/聊天ui工具包React
中间件 Node.js、Express、Anthropic SDK、MCP HTTP客户端
天气MCP TypeScript、Express、Zod、MCP SDK、HTTP传输
AI模型 克劳德·十四行诗4

API终点

中间件（端口3001）

  • POST /api/chat -主聊天端点
  • GET /health -健康检查

气象MCP（端口3002）

  • POST /mcp -MCP端点（需要承载身份验证）
  • GET /health -健康检查

关键文件

  • docker-compose.yml -开发环境设置
  • docker-compose.production.yml -生产环境测试
  • ARCHITECTURE.md -详细的系统架构
  • DEPLOYMENT.md -所有平台的部署指南
  • .env.example -环境变量模板

部署

要部署的3个单独服务：

  1. 气象MCP服务器（端口3002）
  2. 中间件（端口3001）
  3. React应用程序（端口3000）

看 部署.md 有关分步部署指南：

  • 渲染（可用的免费层）
  • 铁路
  • Fly.io
  • 本地Docker

自由层策略：

  • 前端：Vercel（无限免费）
  • 中间件：渲染（750小时=始终打开）
  • 天气MCP：渲染（750小时=始终打开）
  • 总计：0美元/月 （冷启动）

相关 MCP