Chatllm MCP Simple

🎵 支持MCP的音乐助手

一个全栈应用程序，结合了人工智能聊天、音乐流、金融数据和模型上下文协议（MCP）服务。

alt text

特性

• AI聊天界面：具有意图识别功能的智能对话
• 音乐整合：通过Spotify API搜索和播放音乐
• 财务数据：通过人工智能分析实时股票和加密货币价格
• MCP支持：可配置的模型上下文协议服务
• 现代用户界面：React+TailwindCSS响应式界面

建筑

后端（Python+Flask+LangChain）

• 音乐和财务请求的意图分类
• Spotify API音乐搜索集成
• 雅虎财经+CoinGecko获取市场数据
• OpenAI集成用于LLM响应和财务分析
• MCP服务管理和执行

前端（React+Vite+TailwindCSS）

• 实时聊天界面
• 带预览功能的音乐播放器卡
• 财务数据可视化
• MCP服务切换界面
• 响应式设计

设置

1.后端设置

# Install Python dependencies
pip install -r requirements.txt

# Copy environment file and configure
cp .env.example .env

# Edit .env with your API keys:
# OPENAI_API_KEY=your_openai_api_key
# SPOTIFY_CLIENT_ID=your_spotify_client_id
# SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
# ALPHA_VANTAGE_API_KEY=your_alpha_vantage_api_key (optional)

2.前端设置

# Install Node.js dependencies
npm install

# Start development server
npm run dev

3.启动应用程序

# Terminal 1: Start Flask backend
python app.py

# Terminal 2: Start React frontend
npm run dev

该应用程序将在以下网址提供：

• 前端：http://localhost:3000
• 后端API：http://localhost:5000

需要API密钥

1. OpenAI API密钥：用于LLM回复和财务分析

- 来自：https://platform.openai.com/api-keys

1. Spotify API密钥：用于音乐搜索和流媒体

- 来自：https://developer.spotify.com/dashboard - 创建应用程序并获取客户端ID+客户端密码

1. Alpha Vantage API密钥 （可选）：用于增强库存数据

- 来自：https://www.alphavantage.co/support/#api-钥匙

MCP配置

编辑 mcp_setting_data.json 配置可用的MCP服务：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/allowed/path"],
      "link": "https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem"
    }
  }
}

使用示例

音乐请求

• “播放一些爵士音乐”
• “查找披头士乐队的歌曲”
• "播放一些古典音乐" (Chinese)

财务查询

• “AAPL的价格是多少？”
• “显示比特币价格”
• “特斯拉股票表现如何？”

普通信息

• “给我讲个笑话”
• “天气怎么样？”
• “帮我编程”

项目结构

mcp-music/
├── app.py                 # Flask backend entry point
├── services/              # Backend services
│   ├── intent_classifier.py
│   ├── music_service.py
│   ├── llm_service.py
│   └── mcp_service.py
├── src/                   # React frontend
│   ├── components/
│   │   ├── ChatInterface.jsx
│   │   ├── MCPSelector.jsx
│   │   ├── MusicCard.jsx
│   │   └── FinanceCard.jsx
│   └── App.jsx
├── mcp_setting_data.json  # MCP configuration
├── requirements.txt       # Python dependencies
└── package.json          # Node.js dependencies

发展

添加新的意图类型

1. 更新 intent_classifier.py 使用新关键字
2. 在中添加处理逻辑 app.py
3. 创建相应的UI组件

添加新的MCP服务

1. 将服务配置添加到 mcp_setting_data.json
2. 实施处理 mcp_service.py
3. 服务将自动出现在前端

定制

• 在中修改UI主题 tailwind.config.js
• 调整LLM行为 llm_service.py
• 在中添加新的API集成 services/ 目录

许可证

MIT许可证-有关详细信息，请参阅许可证文件。