MCP Chat App

MCP聊天应用程序-人工智能产品助手

一个全栈应用程序演示 模型上下文协议（MCP） 使用Claude AI、FastAPI、MongoDB和Next.js。该应用程序展示了如何构建一个智能聊天机器人，该机器人可以通过自然语言与您的业务数据进行交互。

🌟 特性

• 🤖 Claude AI集成 -通过工具调用实现自然语言理解
• 🔧 MCP协议 -双服务器方法（REST API+自定义工具）
• 💬 智能对话 -上下文感知多回合对话
• 📊 商业智能 -库存分析、价格统计、库存警报
• 🎨 现代用户界面 -美丽的玻璃造型设计与Tailwind CSS
• 🐳 Docker就绪 -完成集装箱化部署
• 📱 响应式 -适用于台式机、平板电脑和移动设备

🏗️ 建筑

┌─────────────────────────────────────────────────────────┐
│                     User Browser                        │
│              (Next.js + React Frontend)                 │
└────────────────────┬────────────────────────────────────┘
                     │
                     ▼
            ┌────────────────┐
            │  Claude API    │
            │  (Anthropic)   │
            └────────┬───────┘
                     │
         ┌───────────┴───────────┐
         │                       │
         ▼                       ▼
┌──────────────────┐   ┌──────────────────┐
│  FastAPI Server  │   │  Custom MCP      │
│  Port 8000       │   │  Tools Server    │
│                  │   │                  │
│  • REST API      │   │  • Analytics     │
│  • CRUD Ops      │   │  • Calculations  │
│  • Products      │   │  • Reports       │
└────────┬─────────┘   └──────────────────┘
         │
         ▼
   ┌──────────┐
   │ MongoDB  │
   │ Port     │
   │ 27017    │
   └──────────┘

🚀 快速开始

先决条件

• 码头工人 & Docker Compose （推荐）
• 或者： Node.js 18+, Python 3.11+, MongoDB
• 无烟煤API密钥 (在这里买一个)

选项1:Docker（推荐）

1.克隆存储库：

git clone 
cd mcp-chat-app

2.设置环境变量：

cp .env.example .env.local
# Edit .env.local and add your ANTHROPIC_API_KEY

3.用Docker开始一切：

docker-compose up -d

4.填充样本数据：

docker exec mcp-backend python populate_data.py

5.打开浏览器：

http://localhost:3000

就是这样！ 🎉

选项2：手动设置

Click to expand manual setup instructions

1.启动MongoDB：

docker run -d -p 27017:27017 --name mongodb mongo:latest

2.设置Python后端：

cd backend
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
pip install -r requirements.txt
python populate_data.py
python main_simple_mcp.py

3.设置Next.js前端（新终端）：

cd ..  # Back to project root
npm install
cp .env.example .env.local
# Add your ANTHROPIC_API_KEY to .env.local
npm run dev

4.打开http://localhost:3000

📚 用法示例

自然语言查询

💬 "List all Furniture products"
→ Shows products from FastAPI database

💬 "Calculate inventory value for Electronics"  
→ Calls custom analytics tool

💬 "Which products need restocking?"
→ Finds low-stock items

💬 "Tell me about the desk lamp"
→ Searches and retrieves specific product

💬 "What's the average price of products?"
→ Calculates price statistics

可用工具

REST API工具（FastAPI）：

• list_products -获取所有带有过滤功能的产品
• get_product_by_id -检索特定产品
• create_product -添加新产品
• update_product -修改现有产品
• delete_product -删除产品

自定义分析工具：

• calculate_inventory_value -总库存价值
• find_low_stock_products -库存警报
• get_price_statistics -定价分析
• generate_restock_report -补货建议
• compare_categories -类别性能

🛠️ 发展

项目结构

mcp-chat-app/
├── src/
│   ├── app/
│   │   ├── api/chat/route.ts      # Claude API integration
│   │   ├── page.tsx               # Main chat interface
│   │   └── globals.css            # Styles
│   ├── components/
│   │   ├── Message.tsx            # Chat message bubbles
│   │   ├── ChatInput.tsx          # Input field
│   │   └── ToolsPanel.tsx         # Tools sidebar
│   ├── lib/
│   │   └── mcp-client.ts          # MCP client
│   └── types/
│       └── index.ts               # TypeScript types
├── backend/
│   ├── main_simple_mcp.py         # FastAPI server
│   ├── custom_tools_standalone.py # Custom tools (optional)
│   ├── database.py                # MongoDB connection
│   ├── models.py                  # Pydantic models
│   └── populate_data.py           # Sample data script
├── docker-compose.yml             # Docker orchestration
├── Dockerfile                     # Frontend container
└── backend/Dockerfile             # Backend container

运行测试

# Frontend
npm run lint

# Backend
cd backend
pytest  # (if tests are added)

环境变量

🐳 Docker命令

# Start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Stop all services
docker-compose down

# Rebuild after code changes
docker-compose up -d --build

# Reset everything (including data)
docker-compose down -v

🎨 定制

更改主题颜色

编辑 tailwind.config.js:

colors: {
  primary: {
    500: '#your-color',
    600: '#your-color',
  }
}

添加新工具

1.添加FastAPI端点：

# backend/main_simple_mcp.py
@app.get("/your-endpoint", operation_id="your_tool")
async def your_tool():
    return {"data": "..."}

2.工具自动出现在Claude中！

修改用户界面

• 欢迎屏幕: src/app/page.tsx （第250行附近）
• 消息样式: src/components/Message.tsx
• 你好，世界: src/components/ChatInput.tsx

📖 文档

• MCP协议文件
• API无烟煤文件
• FastAPI文档
• Next.js文档

🔧 故障排除

“无法连接到API”

• 检查后端是否正在运行： curl http://localhost:8000/health
• 验证CORS是否已启用（已配置）

“API密钥无效”

• 确保 .env.local 有正确 ANTHROPIC_API_KEY
• 密钥应以开头 sk-ant-

“MongoDB连接失败”

• 检查MongoDB是否正在运行： docker ps | grep mongo
• 验证端口27017是否未使用

Docker问题

# Clean rebuild
docker-compose down -v
docker-compose build --no-cache
docker-compose up -d

🚢 部署

部署到Vercel（前端）

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Add environment variable in Vercel dashboard:
# ANTHROPIC_API_KEY=your-key

部署后端

• 铁路：连接GitHub仓库，Railway自动检测FastAPI
• 渲染：类似的自动部署
• AWS/GCP：使用Docker镜像

🤝 贡献

欢迎投稿！拜托：

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 提交拉取请求

📄 许可证

麻省理工学院许可证-您可以自由地将此项目用于学习或商业目的！

🙏 致谢

• Anthropic 用于Claude API和MCP协议
• 快速API 令人惊叹的Python框架
• Next.js React框架团队
• 维塞尔 用于托管平台

📧 联系

问题？打开一个问题或联系我们！

______________________________________________________________________

内置于❤️ 使用MCP、Claude、FastAPI和Next.js