Spring AI系列——开发MCP Server和MCP Client（SSE方式）

优质文章学习记录

— 8 min read
Spring AI系列——开发MCP Server和MCP Client（SSE方式）

文章目录

一、概述

MCP架构图

在这里插入图片描述

MCP生命周期

在这里插入图片描述

二、创建MCP SERVER的java工程

生成初始化工程代码

访问网址：https://start.spring.io/
填写基本信息→添加依赖项

在这里插入图片描述


选择Server

在这里插入图片描述


点击生成

在这里插入图片描述
在这里插入图片描述


解压后用IDEA打开

修改pom.xml文件

把spring-ai-starter-mcp-server依赖改为spring-ai-starter-mcp-server-webmvc

在这里插入图片描述


完整pom.xml内容

<?xml version="1.0" encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.5.8</version><relativePath/><!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>test-mcp-server</artifactId><version>0.0.1-SNAPSHOT</version><name>test-mcp-server</name><description>Demo project for Spring Boot</description><url/><licenses><license/></licenses><developers><developer/></developers><scm><connection/><developerConnection/><tag/><url/></scm><properties><java.version>17</java.version><spring-ai.version>1.1.2</spring-ai.version></properties><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-mcp-server-webmvc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>${spring-ai.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

定义服务类MathTool

在这里插入图片描述
packagecom.example.tool;importorg.springframework.ai.tool.annotation.Tool;publicclassMathTool{@Tool(description ="两个数字相加")publicstaticintaddNumbers(int a,int b){return a + b;}@Tool(description ="两个数字相减")publicstaticintsubtractNumbers(int a,int b){return a - b;}}

通过配置类的方式把MathTool注入到Spring容器中

创建config包，在下面创建McpConfig类

在这里插入图片描述
packagecom.example.test_mcp_server.config;importcom.example.tool.MathTool;importorg.springframework.ai.tool.ToolCallbackProvider;importorg.springframework.ai.tool.method.MethodToolCallbackProvider;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;@ConfigurationpublicclassMcpConfig{@BeanpublicToolCallbackProvidermathTool(){returnMethodToolCallbackProvider.builder().toolObjects(newMathTool()).build();}}

修改配置文件application.yaml

配置内容为：

server:port:8080spring:application:name: math_mcp_server ai:mcp:server:enabled:truename: test_mcp_server version: 1.0.0 sse-endpoint: /api/v1/sse sse-message-endpoint: /api/v1/mcp capabilities:tool:truelogging:level:# 查看MCP详细日志io.modelcontextprotocol: TRACE org.springframework.ai.mcp: TRACE

启动服务

在这里插入图片描述


启动成功，并提示注册了两个Tool

在这里插入图片描述

三、如何使用MCP Server

方式一：使用Chatbox连接MCP Server

设置AI模型提供方

在这里插入图片描述


我这里选择智谱的ChatGLM6B, API密钥去智谱官网申请，点击检查

在这里插入图片描述


在这里插入图片描述


点确认

在这里插入图片描述


在这里插入图片描述

配置MCP服务器

点击左侧的MCP

在这里插入图片描述


添加服务器

在这里插入图片描述


在这里插入图片描述


配置信息后点击测试

在这里插入图片描述


编写的两个工具成功显示

在这里插入图片描述


**PS：必须点测试，这样才能完成服务端的初始化连接**
服务端日志：

在这里插入图片描述

点击保存

在这里插入图片描述

使用MCP Server

按ECS键退出设置，点击新对话，可以看到刚才添加的MCP服务

在这里插入图片描述

输入“运维小兵的计算服务有哪些功能”
AI给的回复很好的总结了工具的功能

在这里插入图片描述

问：8加7等于几
工具成功调用

在这里插入图片描述


服务端日志内容

在这里插入图片描述


测试完毕，符合预期

方式二：开发一个Client来连接Server

创建java工程

跟创建MCP Server类似，改下Artifact名字

在这里插入图片描述


添加Client的依赖

在这里插入图片描述


在这里插入图片描述


保存工程文件，解压后用IDEA打开

修改pom.xml,添加核心依赖

<properties><java.version>17</java.version><spring-ai.version>1.1.2</spring-ai.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--调用智谱系列大模型的依赖--><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-model-zhipuai</artifactId></dependency><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-mcp-client-webflux</artifactId></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>${spring-ai.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement>

配置application.yaml

server:port:8081spring:application:name: test-mcp-client ai:zhipuai:# 智谱官网创建API Key，配置到机器的环境变量ZHIPU_KEYapi-key: ${ZHIPU_KEY}base-url:"https://open.bigmodel.cn/api/paas"# 配置模型地址chat:options:model: glm-4-flash mcp:client:sse:connections:server1:# 填写MCP Server的地址url: http://localhost:8080sse-endpoint: /api/v1/sse

创建Controller

在这里插入图片描述

ConnectMcpServer.java

packagecom.example.test_mcp_client.controller;importorg.springframework.ai.chat.client.ChatClient;importorg.springframework.ai.tool.ToolCallbackProvider;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/mcp")publicclassConnectMcpServer{privatefinalChatClient chatClient;publicConnectMcpServer(ChatClient.Builder builder,ToolCallbackProvider toolCallbackProvider){this.chatClient = builder .defaultToolCallbacks(toolCallbackProvider.getToolCallbacks()).build();}@GetMapping("/test")publicStringtest(@RequestParam(name ="query")String query){return chatClient.prompt().system("你是一个有用的AI助手").user(query).call().content();}}

启动Client服务

服务启动成功

在这里插入图片描述


SERVER端完成初始化

在这里插入图片描述

访问接口进行测试

GET http://localhost:8081/mcp/test?query=8加6等于几

在这里插入图片描述


查看SERVER日志


完美。

四、资料

Spring AI官网：https://docs.spring.io/spring-ai/reference/index.html
视频：https://www.bilibili.com/video/BV1yT8qzMEbd/?spm_id_from=333.337.search-card.all.click&vd_source=0467ab39cc5ec5940fee22a0e7797575

Read more

前端文件上传详细解析

前言 文件上传是前端开发中高频且核心的业务能力，几乎所有中后台系统、用户中台、内容平台都离不开该功能，如头像上传、Excel导入、附件提交、视频/图片发布等。前端文件上传并非简单的表单提交，而是涉及 HTML 基础语法、JavaScript 核心 API、浏览器兼容性、大文件分片、断点续传、进度监控、文件校验、跨域处理、文件预览等多维度的综合知识点。 本文将从基础原理到高级实战，从原生实现到主流方案，详细讲解前端文件上传的核心知识点。 一、文件上传的核心前置知识：HTML 核心上传标签 前端文件上传的根基是 HTML 提供的两个核心标签 / 属性，所有上传逻辑都基于它们实现，重中之重，必须先掌握： 1. 核心标签：<input type="file"> 这是前端文件上传的唯一入口，专门用于让用户「选择本地文件」

前端安全：别让你的网站成为黑客的游乐场

前端安全：别让你的网站成为黑客的游乐场 毒舌时刻 前端安全？这不是后端的事吗？ "我只是个前端，安全关我什么事？"——结果网站被XSS攻击，用户信息泄露， "我用了框架，应该很安全吧？"——结果框架有漏洞，被人轻松突破， "我的网站小，没人会攻击的"——结果被黑客当作练手的靶子。 醒醒吧，前端安全不是可有可无的，而是必须重视的！ 为什么你需要这个？ * 保护用户数据：防止用户信息被窃取 * 维护网站声誉：避免安全事件影响品牌形象 * 遵守法律法规：如GDPR、CCPA等数据保护法规 * 防止业务损失：避免因安全问题导致的经济损失 反面教材 // 反面教材：直接拼接HTML字符串 function renderUserInput() { const userInput = document.getElementById('user-input').value; // 危险！直接将用户输入插入到DOM中

AI Skills：前端新的效率神器！

近来，AI 领域有个火爆的话题：Skills。 Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。 有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。 不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。 围绕 Skills，它们在做的就是为了完成一件事情：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将“知道”转化为“做到”的本领。 详解什么是 Skills 要说清楚什么是 Skills，先来了解一下关于 AI 的 2