mcp-deepseek-demo
MCP DeepSeek 演示项目是一个基于 Model Context Protocol (MCP) 的客户端应用，用于与 DeepSeek AI 模型进行交互。
MCP DeepSeek Demo Project
Certification
Overview
The MCP DeepSeek Demo is a client application built on the Model Context Protocol (MCP), designed to interact with the DeepSeek AI model. This project demonstrates how to integrate the MCP protocol with the DeepSeek API to enable tool calling and real-time communication.
The project follows a monorepo structure with two main components:
mcp-client: A Next.js-based frontend application providing a user interface and DeepSeek API integration.mcp-sse-server: An MCP server using Server-Sent Events (SSE) for real-time tool execution.
Key Features
✅ Modern Chinese/English UI
✅ Real-time chat with AI assistant
✅ Supports multiple tool calls (product lookup, inventory management, etc.)
✅ SSE-based real-time communication
✅ Auto-reconnect mechanism
✅ Responsive design (mobile & desktop)
Getting Started
Prerequisites
- Node.js 16+ & npm/yarn/pnpm
- DeepSeek API Key
Installation
- Clone the repository
git clone https://github.com/yourusername/mcp-deepseek-demo.git
cd mcp-deepseek-demo
- Install dependencies
pnpm install
- Configure environment variables
For mcp-client, create .env and add:
# MCP Server Config
MCP_SERVER_URL=http://localhost:8083/sse
# AI Provider
DEEPSEEK_API_KEY=sk-...
DEEPSEEK_API_URL=https://api.deepseek.com/v1/chat/completions
DEFAULT_MODEL=deepseek-chat
For mcp-sse-server, create .env and add:
# Server Config
PORT=8083
ALLOWED_ORIGINS=http://localhost:3000,https://yourdomain.com
LOG_LEVEL=info
HEARTBEAT_INTERVAL=30000
Running the Project
- Start both MCP Server & Client
pnpm run dev
- Open
http://localhost:3000in your browser
Project Structure
mcp-deepseek-demo/
├── packages/
│ ├── mcp-client/ # Next.js Frontend
│ │ ├── app/ # Pages & Routing
│ │ ├── components/ # React Components
│ │ ├── lib/ # Utilities & Services
│ │ └── public/ # Static Assets
│ └── mcp-sse-server/ # MCP SSE Server
│ ├── src/ # Server Code
│ ├── services/ # Business Logic
│ └── files/ # File Operations
├── package.json # Root Config
└── README.md # Documentation
User Guide
-
Connect to the Server
- The client auto-connects on startup.
- Connection status is shown at the top.
-
Chat with the AI Assistant
- Type messages in the input box.
- The AI will analyze and respond.
-
Use Tools
- Available tools are listed in the left panel.
- Request tools naturally (e.g., "Get all products" triggers
getProducts).
Available Tools
🔧 getProducts: Fetch product list (mock)
📦 getInventory: Check inventory (mock)
📝 getOrders: Retrieve orders (mock)
🛒 purchase: Create an order (mock)
📂 getFiles: List files in a directory
Tech Stack
- Frontend: Next.js, React, TypeScript, Tailwind CSS
- Backend: Node.js, TypeScript
- Communication: Server-Sent Events (SSE)
- APIs: DeepSeek API, Model Context Protocol (MCP)
Contributing
We welcome contributions!
- Fork the repository
- Create a branch (
git checkout -b feature/your-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/your-feature) - Open a Pull Request
