mcp-deepseek-demo

mcp-deepseek-demo

11
communicationdeveloper_toolsai_chatbot

The MCP DeepSeek Demonstration Project is an application for interacting with the DeepSeek AI model using the Model Context Protocol (MCP). It features a real-time chat interface and supports tool invocation through a modern UI with responsive design.

MCP DeepSeek 演示项目

状态开发中 版本0.1.0 语言TypeScript 框架Next.js

项目概述

MCP DeepSeek 演示项目是一个基于 Model Context Protocol (MCP) 的客户端应用，用于与 DeepSeek AI 模型进行交互。该项目展示了如何将 MCP 协议与 DeepSeek API 集成，实现工具调用和实时通信。

项目采用了 monorepo 结构，包含两个主要组件：

  • mcp-client: 基于 Next.js 的前端应用，提供了用户界面和与 DeepSeek API 的集成
  • mcp-sse-server: 基于 SSE (服务器发送事件) 的 MCP 服务器，提供工具调用功能

功能特点

  • 现代化的中文用户界面
  • 实时聊天与 AI 助手交互
  • 支持多种工具调用，如产品查询、库存管理等
  • 基于 SSE 的实时通信
  • 自动重连机制
  • 响应式设计，适配不同设备

开始使用

前置条件

  • Node.js 16+ 和 npm/yarn/pnpm
  • DeepSeek API 密钥

安装

  1. 克隆仓库
git clone https://github.com/yourusername/mcp-deepseek-demo.git
cd mcp-deepseek-demo
  1. 安装依赖
pnpm install
  1. 配置环境变量

在 mcp-client 目录下创建 .env 文件，并添加以下配置：

# MCP服务器配置
MCP_SERVER_URL=http://localhost:8083/sse

# AI提供商配置
DEEPSEEK_API_KEY=sk-...
DEEPSEEK_API_URL=https://api.deepseek.com/v1/chat/completions

# 默认使用的AI模型
DEFAULT_MODEL=deepseek-chat

在 mcp-sse-server 目录下创建 .env 文件，并添加以下配置：

# 服务器配置
PORT=8083
ALLOWED_ORIGINS=http://localhost:3000,https://yourdomain.com
LOG_LEVEL=info
HEARTBEAT_INTERVAL=30000

启动服务

  1. 启动 MCP SSE 服务器 和 客户端应用
pnpm run dev
  1. 打开浏览器访问 http://localhost:3000

项目结构

mcp-deepseek-demo/
├── packages/
│   ├── mcp-client/         # Next.js 客户端应用
│   │   ├── app/            # Next.js 页面和路由
│   │   ├── components/     # React 组件
│   │   ├── lib/            # 工具函数和服务
│   │   └── public/         # 静态资源
│   └── mcp-sse-server/     # MCP 服务器
│       ├── src/            # 服务器源代码
│       ├── services/       # 服务实现
│       └── files/          # 文件操作相关功能
├── package.json           # 项目配置
└── README.md               # 项目文档

使用指南

  1. 连接到服务器

    • 启动应用后，客户端会自动尝试连接到 MCP 服务器
    • 连接状态会在页面顶部显示

  2. 与 AI 助手对话

    • 在聊天输入框中输入消息并发送
    • AI 助手会分析您的请求并响应

  3. 使用工具

    • 左侧面板显示可用的工具
    • 您可以在聊天中直接要求 AI 使用特定工具
    • 例如，可以输入“获取所有产品”来使用 getProducts 工具

工具列表

当前系统支持以下工具：

  • getProducts: 获取所有产品信息[mock]
  • getInventory: 获取库存信息[mock]
  • getOrders: 获取订单信息[mock]
  • purchase: 创建购买订单[mock]
    • 你可以问他购买一个商品，他会调用 purchase 工具
  • getFiles: 获取指定文件夹下的文件列表
    • 你可以问他获取 /xxx 目录下的文件列表，他会调用 getFiles 工具

技术栈

  • 前端: Next.js, React, TypeScript, Tailwind CSS
  • 后端: Node.js, TypeScript
  • 通信: Server-Sent Events (SSE)
  • API: DeepSeek API, Model Context Protocol (MCP)

贡献指南

欢迎贡献代码或提出问题！请遵循以下步骤：

  1. Fork 该仓库
  2. 创建您的特性分支 (git checkout -b feature/amazing-feature)
  3. 提交您的更改 (git commit -m 'Add some amazing feature')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 打开一个 Pull Request

许可证