AI导哈

模型上下文协议演示

一个基于模型上下文协议（MCP）的概念验证项目，包含后端服务、MCP客户端和React UI，用于动态调用工具（如天气查询和日历事件预订）或直接通过LLM回答问题。

  • by SunilGhargaonkar
  • Java
  • 本地部署
  • 更新于
在 GitHub 查看 SunilGhargaonkar/mcp-fullstack-poc

使用说明

MCP-POC

这个项目很简单 模型上下文协议（MCP） 由三个本地应用程序组成的概念证明。

组件 描述 URL
后端 Spring Boot MCP服务器公开工具API http://localhost:8085/mcp
前端/mcp客户端 Spring Boot MCP客户端已连接到LLM和MCP服务器 http://localhost:8086
前端 用于与系统交互的React/Vite UI http://localhost:5173

架构概述

React UI (frontend)
        |
        v
MCP Client + LLM (frontend/mcp-client)
        |
        v
MCP Server (backend)
        |
        +--> WeatherTool
        +--> CalendarTool

运作原理

  • 这 React用户界面 向发送提示 MCP客户端
  • 这 MCP客户端 与LLM通信
  • LLM动态发现并调用由 MCP服务器
  • 如果不需要工具，MCP客户端将直接使用LLM进行应答

MCP服务器会 不 包含任何聊天逻辑或聊天工具。

可用工具

getWeather

使用OpenWeather返回城市的当前天气。

示例

What's the weather in London?

bookEvent

创建Google日历事件。

所需输入

  • 标题
  • UTC开始时间
  • 持续时间

示例

Book a meeting tomorrow at 10:00 UTC for 30 minutes

运行项目

按以下顺序启动每个服务。

1.启动MCP服务器

cd backend
mvn spring-boot:run

运行时间：

http://localhost:8085/mcp

2.启动MCP客户端

cd frontend/mcp-client
mvn spring-boot:run

运行时间：

http://localhost:8086

3.启动React UI

cd frontend
npm install
npm run dev

打开：

http://localhost:5173

配置

后端配置

文件：

backend/src/main/resources/application.properties

所需的环境变量：

export OPENWEATHER_API_KEY=<your-openweather-key>
export GOOGLE_CREDENTIALS_PATH=src/main/resources/credentials.json

MCP客户端/LLM配置

文件：

frontend/mcp-client/src/main/resources/application.properties

所需的环境变量：

export POC_LLM_API_KEY=<your-api-key>
export POC_LLM_BASE_URL=https://openrouter.ai/api
export POC_LLM_MODEL=deepseek/deepseek-r1-distill-llama-70b:free
export POC_MCP_ENDPOINT=http://localhost:8085/mcp

备注

  • MCP服务器仅公开：

    • CalendarTool
    • WeatherTool

  • 一般会话提示由LLM直接处理 frontend/mcp-client

  • UI从不直接与MCP服务器通信

相关 MCP