AI导哈

多模态聊天协议应用

一个基于MCP协议的多模态聊天应用，支持文本和多媒体消息的交互，适用于多种技术栈的集成。

  • by kabiraelbardi
  • Java
  • 本地部署
  • 更新于
在 GitHub 查看 kabiraelbardi/mcpserver

使用说明

使用Spring AI、MCP、Python和NodeJS的聊天机器人应用程序

该项目使用多模式聊天协议（MCP）和不同技术实现了聊天机器人应用程序：

  • 主MCP服务器的Spring AI（SSE模式）
  • stdio模式下MCP服务器的NodeJS
  • stdio模式下MCP服务器的Python
  • 用于不同服务器集成的Java Spring Boot客户端
  • 角型浇注前端

项目建筑

该项目由几个相互通信的组件组成：

  1. Spring MCP服务器 ：使用Spring Boot和Spring AI在Java中实现的MCP服务器
  2. Node.js MCP服务器 ：使用Node.js（stdio模式）在JavaScript中实现的MCP服务器
  3. Python MCP服务器 ：用Python实现的MCP服务器（stdio模式）
  4. MCP客户端 ：可以与不同MCP服务器通信的Java Spring Boot客户端
  5. MCP客户端用户界面 ：与MCP客户端交互的Angular用户界面

项目结构

Project IA/
├── spring-mcp-server/       # Serveur MCP Spring AI (SSE)
│   ├── src/                 # Code source du serveur
│   └── postman/             # Collection Postman pour tester le serveur
├── node-mcp-server/         # Serveur MCP NodeJS (STDIO)
│   ├── index.js             # Point d'entrée du serveur
│   └── .env.example         # Exemple de configuration des clés API
├── python-mcp-server/       # Serveur MCP Python (STDIO)
│   ├── mcp_server.py        # Point d'entrée du serveur
│   └── .env.example         # Exemple de configuration des clés API
├── mcp-client/              # Client MCP avec Spring AI, Llama3.2, Claude et OpenAI
│   └── src/                 # Code source du client
└── mcp-client-ui/           # Interface utilisateur Angular
    └── src/                 # Code source de l'interface utilisateur

MCP协议

多模式聊天协议（MCP）是聊天机器人和人工智能助手的通信协议，允许在客户端和服务器之间交换文本和多模式消息（图像、音频等）。

主要特点：

  • 请求和响应的JSON格式
  • 支持多模式消息（文本、图像等）
  • 实时响应的流媒体支持
  • 消息和请求的可扩展元数据

项目组成部分

Spring MCP服务器

使用Spring Boot在Java中实现的MCP服务器。它公开了一个REST API来接收MCP请求并返回响应。

  • 技术 ：Java、Spring Boot、Spring AI
  • 断开通信模式 ：HTTP/SSE（服务器发送事件）

Node.js MCP服务器

使用Node.js在JavaScript中实现的MCP服务器。它通过STDIO（标准输入/输出）进行通信。

  • 技术 ：JavaScript、Node.js、OpenAI API
  • 断开通信模式 ：STDIO

Python MCP服务器

用Python实现的MCP服务器。它通过STDIO（标准输入/输出）进行通信。

  • 技术 ：Python，OpenAI API
  • 断开通信模式 ：STDIO

MCP客户端

可以与不同MCP服务器通信的Java Spring Boot客户端。它公开了一个REST API来接收请求并将其转发到适当的MCP服务器。

  • 技术 ：Java、Spring Boot、Spring Webflux
  • 功能 :
    • 与MCP Spring服务器的通信（HTTP/SSE）
    • 与MCP服务器Node.js和Python（stdio）通信
    • 用于接收请求的REST API
    • 文档切换器

MCP客户端用户界面

与MCP客户端交互的Angular用户界面。它允许您选择MCP服务器并发送消息。

  • 技术 ：TypeScript、Angular、Bootstrap
  • 功能 :
    • 界面去聊天
    • MCP服务器的选择
    • 支持流媒体
    • 显示服务器状态

安装和执行步骤

  1. 创建和测试Spring AI MCP服务器
  2. 使用Postman测试服务器
  3. 使用以下方式创建MCP客户端：
    • MCP Spring（SSE）服务器集成
    • NodeJS MCP服务器集成（stdio）
    • Python MCP服务器集成（stdio）
  4. 创建Angular前端

安装和启动

Spring MCP服务器

cd spring-mcp-server
./mvnw spring-boot:run

Node.js MCP服务器

cd node-mcp-server
npm install
# Le serveur sera démarré par le client MCP

Python MCP服务器

cd python-mcp-server
pip install -r requirements.txt
# Le serveur sera démarré par le client MCP

MCP客户端

cd mcp-client
./mvnw spring-boot:run

MCP客户端用户界面

cd mcp-client-ui
npm install
ng serve

访问 http://localhost:4200 使用户界面使用户。

API密钥Claude

CLAUDE_API_KEY=sk-ant-api03-YI3togU6PoB9qKpNbqkf3MPKpP90zgv9tqsdfqwd7zttFgeDDXedA3RvoY1oAlPuUApM_71gS7rb9t1VL3Ed6w-EpC2VAAA

文档

MCP客户端的Swagger文档可在 http://localhost:8080/swagger-ui.html.

参考视频

视频教程

相关 MCP