SpringBoot3+LangChain4j+Vue3构建可运维AI应用平台-北京尧图网络

简介这是一套面向Java全栈开发者与AI应用工程师的开源AI平台工程实践资源聚焦大模型应用落地中的智能体编排、工作流可视化与生产级部署难题。平台基于Spring Boot 3后端框架与Vue 3前端构建深度集成LangChain4j与LangGraph4j支持智能代码生成、Tool Calling调用、多智能体协同及可视化工作流编辑配套Nginx反向代理、ARMSPrometheusGrafana监控体系兼顾开发效率与运维可观测性。资源包共216个文件含143个Java核心业务与模型接入类、21个TypeScript服务逻辑、19个Vue组件实现交互界面辅以JSON配置、YML环境定义及SQL初始化脚本整体压缩后仅1.14MB结构精炼、模块职责清晰。目前已有249人学习下载提供开箱即用的一键部署能力、完整目录结构与Cursor Vibe Coding适配支持是深入理解企业级AI应用架构与全栈协同开发的优质实操范例。1. 这不是又一个“AI Demo”而是一套能进产线的智能应用交付流水线SpringBoot3 LangChain4j Vue3 构建可运维、可编排、可灰度的 AI 应用平台你见过太多“SpringBoot LLM API 调用”的玩具项目前端点一下后端发个 HTTP 请求等几秒返回一串 JSON —— 看似智能实则黑匣子。一旦要加权限控制、要查调用链路、要改提示词灰度发布、要让销售同事自己拖拽编排一个客户问答流程立刻崩盘。本项目标题里每个技术栈都不是装饰SpringBoot3 是服务治理底座非仅启动器LangChain4j 是可调试、可拦截、可埋点的 Java 侧 AI 编排引擎非胶水层Vue3 是真正支撑复杂可视化编辑器的响应式内核非静态页面。它解决的是“AI 功能怎么从研发笔记本落地到业务系统”的核心断层——不是让模型跑起来而是让 AI 能被运维、被审计、被复用、被组合。适合已有 SpringBoot 微服务基座、正面临大模型接入合规压力、且需要快速交付多个垂直 AI 场景如智能客服、代码辅助、数据报告生成的技术团队。如果你还在用RestTemplate直接调 OpenAI或把 LangChain Python 版本硬塞进 Java 工程这篇笔记就是你跳过试错周期的后悔药。2. 从零搭建可运行骨架用 SpringBoot3 LangChain4j Vue3 初始化最小可验证平台2.1 初始化 SpringBoot3 后端工程避开 Log4j2 与 Logback 的依赖冲突雷区SpringBoot3 默认使用 Logback但大量企业级中间件如某些监控 SDK仍强依赖 Log4j2。若直接引入spring-boot-starter-log4j2会触发LoggerFactory冲突导致启动失败。正确做法是保留 Logback 为日志门面仅通过log4j-to-slf4j桥接旧组件!-- pom.xml -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- 关键禁用默认 logback-classic显式引入带桥接的 log4j2 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-logging/artifactId exclusions exclusion groupIdch.qos.logback/groupId artifactIdlogback-classic/artifactId /exclusion /exclusions /dependency dependency groupIdorg.apache.logging.log4j/groupId artifactIdlog4j-to-slf4j/artifactId version2.20.0/version /dependency dependency groupIdorg.slf4j/groupId artifactIdslf4j-api/artifactId /dependency提示logback-spring.xml在 SpringBoot3 中仍有效但需确保其位于src/main/resources下且命名准确若用log4j2.xml必须移除所有logback-classic依赖否则 SLF4J 绑定冲突报错Multiple bindings。我一般会在application.yml中加logging.configclasspath:logback-spring.xml显式指定避免自动发现歧义。2.2 集成 LangChain4j 核心能力不是简单封装 API而是构建可拦截的 Chain 生命周期LangChain4j 不是 SpringBoot 的“插件”它是独立的 Java AI 编排框架。关键在于理解其Chain抽象AiModel模型、PromptTemplate提示词、OutputParser输出解析、ToolExecutor工具调用共同构成可组合的执行链。初始化时必须注入AiModel实例并配置全局拦截器这是后续 ToolCalling 和 LangGraph4j 工作流的基础Configuration public class LangChain4jConfig { Bean public AiModel aiModel() { // 生产环境务必用企业级模型网关如自建 vLLM 服务 return OpenAiChatModel.builder() .baseUrl(http://your-llm-gateway:8000/v1) // 非直接连 OpenAI .apiKey(sk-xxx) // 建议从 Vault 或 K8s Secret 注入 .timeout(Duration.ofSeconds(60)) .build(); } Bean public PromptTemplate promptTemplate() { return PromptTemplate.from(你是一个资深Java工程师请根据以下需求生成SpringBoot代码{{requirements}}); } Bean public ToolExecutor toolExecutor() { // 注册所有可被 AI 调用的业务工具如数据库查询、代码生成器 return ToolExecutor.builder() .addTool(new CodeGeneratorTool()) // 自定义工具类 .addTool(new DatabaseQueryTool()) .build(); } }参数说明baseUrl必须指向内部模型网关而非公网 API —— 这是安全与审计的硬性要求timeout设为 60 秒是经验阈值低于 30 秒易因模型推理波动误判超时高于 120 秒会导致前端长时间无响应ToolExecutor是 ToolCalling 的执行中枢所有Tool注解方法必须在此注册否则 LangChain4j 无法识别。2.3 Vue3 前端工程初始化用 Vite TypeScript Pinia 构建高响应式编辑器基座Vue3 选型必须明确不用 Vue CLI用 Vite不用 Options API用 Composition API状态管理必须用 Pinia非 Vuex。Vite 的 HMR 对大型可视化编辑器如 LangGraph 流程图热更新速度比 Webpack 快 3 倍以上Pinia 的 store 分割天然适配多 tab 编辑场景# 创建项目注意必须指定 --template vue-ts npm create vitelatest ai-platform-fe -- --template vue-ts cd ai-platform-fe npm install # 安装核心依赖 npm install pinia2.1.7 vue-router4.4.5 ant-design-vue4.1.1 # 安装可视化编辑器基础库非直接用 Flowchart.js因其不支持动态节点增删 npm install vue-flow/core2.9.0 vue-flow/node-types2.9.0逻辑说明vue-flow/core是 Vue3 原生流程图库其useVueFlowHook 提供addNodes/removeNodes/onConnect等原子操作比基于 SVG 手写渲染的方案更易维护ant-design-vue提供企业级表单、弹窗、权限组件避免重复造轮子。切记不要安装vue-flow的旧版v1.x其对 Vue3 响应式支持有严重缺陷拖拽节点时会丢失绑定。3. 实现核心能力智能代码生成、AI 智能体、LangGraph4j 工作流与 ToolCalling 的四层落地3.1 智能代码生成用 LangChain4j 的 PromptTemplate OutputParser 构建结构化输出管道“生成代码”不是简单拼接字符串而是要求模型输出严格符合 Java 语法且可被 IDE 直接粘贴。LangChain4j 的JsonOutputParser可强制模型返回 JSON 结构再由 Java 解析为CodeSnippet对象// 定义输出结构 public record CodeSnippet(String className, String packageName, String content) {} // 在 Controller 中 PostMapping(/code/generate) public ResponseEntityCodeSnippet generateCode(RequestBody CodeGenRequest request) { PromptTemplate template PromptTemplate.from( 你是一个SpringBoot专家请生成一个满足以下需求的Java类\n 需求{{requirements}}\n 包名{{packageName}}\n 类名{{className}}\n 请严格按以下JSON格式输出不要任何额外文本\n {\className\:\xxx\,\packageName\:\xxx\,\content\:\public class xxx { ... }\} ); AiMessage aiMessage aiModel.generate( template.format(Map.of( requirements, request.getRequirements(), packageName, request.getPackageName(), className, request.getClassName() )) ); // 使用 JsonOutputParser 解析模型返回的 JSON 字符串 JsonOutputParserCodeSnippet parser new JsonOutputParser(CodeSnippet.class); CodeSnippet result parser.parse(aiMessage.text()); return ResponseEntity.ok(result); }参数说明JsonOutputParser的泛型类型CodeSnippet必须有无参构造函数和 getter 方法否则解析失败template.format()中的占位符{{requirements}}必须与request字段名完全一致LangChain4j 不做字段映射只做字符串替换生产环境必须在aiModel.generate()外加try-catch捕获RuntimeException如模型返回非 JSON否则一次错误将导致整个服务不可用。3.2 AI 智能体Agent用 LangChain4j 的ToolCallingAiModel实现自主决策闭环AI 智能体 ≠ 模型直连。LangChain4j 的ToolCallingAiModel会自动解析模型返回的ToolExecutionRequest调用对应Tool并将结果喂回模型迭代。这是实现“AI 自主查数据库生成报告”的关键Bean public AiModel toolCallingAiModel() { return ToolCallingAiModel.builder() .aiModel(aiModel()) // 底层模型 .toolExecutor(toolExecutor()) // 已注册的工具集合 .maxRetries(3) // 防止工具调用失败无限循环 .build(); } // Controller 中调用 PostMapping(/agent/query) public ResponseEntityString runAgent(RequestBody AgentRequest request) { // 构建 Agent 的初始输入含工具描述 String input 用户问“上个月销售额最高的产品是什么”\n 可用工具databaseQueryTool查询数据库; String result toolCallingAiModel.generate(input); return ResponseEntity.ok(result); }逻辑说明ToolCallingAiModel的maxRetries3是血泪经验 —— 某些模型如 Qwen在工具调用失败时会反复重试同一请求不设上限将耗尽线程池input字符串中必须显式列出可用工具名databaseQueryTool否则模型无法知道有哪些工具可调用工具类DatabaseQueryTool的Tool方法必须返回String不能是ListMapString,ObjectLangChain4j 只接受字符串结果作为下一轮模型输入。3.3 LangGraph4j 工作流用 StateGraph 构建可持久化、可中断的多步骤 AI 流程LangGraph4j 是 LangChain4j 的工作流扩展其StateGraph允许定义带状态的节点流转。例如“客户投诉处理流程”先分类 → 若属技术问题则调用代码生成工具 → 若属销售问题则查 CRM → 最终汇总回复。关键在于State接口的设计它决定了整个流程的数据契约// 定义流程状态 public interface ComplaintState extends State { String getComplaintText(); void setComplaintText(String text); String getCategory(); void setCategory(String category); String getGeneratedCode(); void setGeneratedCode(String code); String getCrmResult(); void setCrmResult(String result); } // 构建工作流 Bean public StateGraphComplaintState complaintWorkflow() { StateGraph.BuilderComplaintState builder StateGraph.builder(ComplaintState.class); builder.addNode(classify, state - { // 调用分类模型 String category classifyModel.generate(state.getComplaintText()); state.setCategory(category); return state; }); builder.addNode(generateCode, state - { if (technical.equals(state.getCategory())) { String code codeGeneratorTool.execute(state.getComplaintText()); state.setGeneratedCode(code); } return state; }); builder.addNode(queryCrm, state - { if (sales.equals(state.getCategory())) { String crmData crmTool.execute(state.getComplaintText()); state.setCrmResult(crmData); } return state; }); builder.setEntryPoint(classify); builder.addEdge(classify, generateCode); builder.addEdge(classify, queryCrm); return builder.build(); }参数说明StateGraph的State接口必须用interface非classLangGraph4j 通过代理机制动态增强状态对象addNode的 lambda 参数必须返回state否则流程中断setEntryPoint必须在addEdge之前调用否则构建失败抛IllegalStateException。3.4 ToolCalling 可视化编辑用 Vue3 vue-flow 实现拖拽式工具编排界面前端需将 LangGraph4j 的StateGraph节点映射为可拖拽节点并支持双击编辑工具参数。核心是useVueFlow的nodes和edges响应式数组!-- WorkflowEditor.vue -- script setup import { useVueFlow, Node, Edge } from vue-flow/core import { ref, onMounted } from vue const { nodes, edges, addNodes, addEdges, removeNodes } useVueFlow() // 从后端加载已保存的工作流 const loadWorkflow async () { const res await fetch(/api/workflow/1) const data await res.json() // 将后端 StateGraph 节点转为 VueFlow 节点 const vueNodes data.nodes.map(node ({ id: node.id, type: default, position: { x: node.x || 100, y: node.y || 100 }, data: { label: node.name, toolName: node.toolName } })) const vueEdges data.edges.map(edge ({ id: ${edge.source}-${edge.target}, source: edge.source, target: edge.target })) addNodes(vueNodes) addEdges(vueEdges) } onMounted(() { loadWorkflow() }) /script template VueFlow :nodesnodes :edgesedges !-- 自定义节点组件 -- template #node-default{ node } div classnode-box div classnode-header{{ node.data.label }}/div div classnode-tool{{ node.data.toolName }}/div /div /template /VueFlow /template逻辑说明vue-flow/core的nodes数组必须是响应式对象直接push()无效必须用addNodes()data属性用于存储节点元数据如toolName它会被序列化为 JSON 存入后端双击编辑功能需监听onNodeClick事件弹出ToolConfigModal表单修改后调用updateNode更新nodes数组。4. 可视化编辑、一键部署与应用管理让 AI 应用像微服务一样被运维4.1 可视化编辑器深度集成支持节点参数配置、条件分支与错误重试策略LangGraph4j 的StateGraph支持条件边Conditional Edge但 VueFlow 默认不渲染条件标签。需扩展Edge组件显示condition文本!-- CustomEdge.vue -- script setup import { EdgeProps, BaseEdge, EdgeLabelRenderer, getBezierPath } from vue-flow/core const props definePropsEdgeProps() /script template BaseEdge :idprops.id :source-xprops.sourceX :source-yprops.sourceY :target-xprops.targetX :target-yprops.targetY / EdgeLabelRenderer div classedge-label v-ifprops.data?.condition {{ props.data.condition }} /div /EdgeLabelRenderer /template参数说明props.data.condition来自后端StateGraph的addConditionalEdge方法例如builder.addConditionalEdge(classify, generateCode, state - technical.equals(state.getCategory()))前端需将state - technical.equals(...)表达式转为可读字符串category technical存入data.condition否则运维人员无法理解流程逻辑。4.2 一键部署将可视化工作流编译为可执行 Jar 包并推送到 K8s 集群“一键部署”本质是将前端编辑的 JSON 工作流定义转换为 SpringBoot 可加载的StateGraphBean 并打包。关键在WorkflowCompiler服务它动态生成 Java 类字节码Service public class WorkflowCompiler { public byte[] compileWorkflow(WorkflowDefinition definition) { // 1. 解析前端 JSON生成 State 接口源码 String stateSource generateStateInterface(definition); // 2. 生成 StateGraph 构建代码 String graphSource generateStateGraphBuilder(definition); // 3. 用 JavaCompiler API 编译为 .class 文件 JavaCompiler compiler ToolProvider.getSystemJavaCompiler(); StandardJavaFileManager fileManager compiler.getStandardFileManager(null, null, null); // 4. 将编译后的 class 打包进临时 jar return buildJarFromClasses(stateSource, graphSource); } }逻辑说明WorkflowCompiler不是魔法它依赖javax.tools.JavaCompilerAPI因此必须在 JDK 环境运行非 JRE生成的 Jar 包需包含spring-boot-loader依赖才能被 K8skubectl apply -f直接部署生产环境必须对compileWorkflow方法加分布式锁如 RedisLock防止并发编译导致 class 文件冲突。4.3 应用管理后台用 Vue3 Ant Design Vue 实现 AI 应用全生命周期看板应用管理页需展示应用名称、状态Running/Stopped、最近调用次数、平均延迟、错误率。核心是对接 SpringBoot Actuator 的/actuator/metrics端点!-- AppManagement.vue -- script setup import { ref, onMounted } from vue const apps ref([]) const loadAppMetrics async () { const res await fetch(/actuator/metrics) const metrics await res.json() // 提取自定义指标需在 SpringBoot 中用 Micrometer 注册 const appMetrics metrics.names .filter(name name.startsWith(ai.app.)) .map(name ({ name: name.replace(ai.app., ), calls: getMetricValue(ai.app.${name}.calls), latency: getMetricValue(ai.app.${name}.latency.avg) })) apps.value appMetrics } const getMetricValue async (metricName) { const res await fetch(/actuator/metrics/${metricName}) const data await res.json() return data.measurements?.[0]?.value || 0 } /script template a-table :data-sourceapps a-table-column title应用名 keyname>Bean public RetryPolicy retryPolicy() { return RetryPolicy.builder() .maxAttempts(3) .onFailure((attempt, failure) - { // 发送 WebSocket 进度事件 String taskId Thread.currentThread().getName(); // 用线程名标识任务 webSocketService.sendProgress(taskId, 第 attempt 次尝试失败 failure.getMessage()); }) .build(); } // Controller 中启用重试 PostMapping(/code/generate/async) public ResponseEntityString generateAsync(RequestBody CodeGenRequest request) { String taskId UUID.randomUUID().toString(); // 异步执行避免阻塞 HTTP 线程 CompletableFuture.supplyAsync(() - { try { // 构建带重试的 Chain Chain chain Chain.builder() .add(promptTemplate()) .add(aiModel()) .add(outputParser()) .retryPolicy(retryPolicy()) .build(); return chain.execute(request); } catch (Exception e) { webSocketService.sendError(taskId, e.getMessage()); throw e; } }); return ResponseEntity.accepted().body(taskId); }6.2 前端用 Vue3 的WebSocket监听任务进度支持断点续跑script setup import { ref, onMounted, onUnmounted } from vue const taskId ref() const progress ref() const ws ref(null) const connectWebSocket () { ws.value new WebSocket(ws://localhost:8080/ws/task/${taskId.value}) ws.value.onmessage (event) { const data JSON.parse(event.data) if (data.type progress) { progress.value data.message } else if (data.type complete) { alert(任务完成) } else if (data.type error) { alert(任务失败 data.message) // 提供“重试”按钮调用后端重试接口 document.getElementById(retry-btn).style.display block } } } const retryTask () { fetch(/api/task/${taskId.value}/retry, { method: POST }) } onMounted(() { taskId.value abc123 // 从路由或表单获取 connectWebSocket() }) onUnmounted(() { if (ws.value) ws.value.close() }) /script template div任务ID{{ taskId }}/div div当前进度{{ progress }}/div button idretry-btn styledisplay:none clickretryTask重试/button /template关键参数WebSocketURL 中的taskId必须与后端webSocketService的会话 ID 一致否则消息无法路由onmessage回调必须用JSON.parse()解析因为后端推送的是 JSON 字符串onUnmounted中必须手动关闭 WebSocket否则页面跳转后连接泄漏K8s 环境下 1000 个泄漏连接将触发 Pod OOM Kill。我坚持在每个 LangChain4j 的Chain上加retryPolicy哪怕只是maxAttempts1—— 它不是为容错而是为统一注入onFailure钩子让所有 AI 任务具备可追踪性。Vue3 的WebSocket不是炫技而是把“AI 黑匣子”变成透明流水线销售看到“正在查询 CRM”开发看到“第2次重试SQL 超时”运维看到“任务卡在节点 generateCode”。这比任何 Dashboard 都真实。希望帮到你。本文还有配套的精品资源点击获取

SpringBoot3+LangChain4j+Vue3构建可运维AI应用平台

相关推荐

用 TaoToken 统一 Key 跑通 ARIS 双智能体科研自动化：settings.json 配置与验证

单列索引与多列索引：从典型查询看索引设计

RISC-V开发板实战：将Bao Hypervisor移植到RVA23的完整指南

更多资讯

Claude正式接管你的电脑！Computer Use深度拆解：原理、上手、安全与竞品全解析

DeepSeek R1-Lite-Preview 推理模型实测：用 TaoToken 统一 Key 跑通 OpenAI o1 对比配置

MCP 完整学习指南与 Spring AI 实战：从零搭建可复用的 MCP 服务端

Windows 64位下MySQL 5.7安装全指南：下载、配置、排错一步到位

STM32入门到实战：选型、开发环境与核心外设详解

Beyond Compare命令行自动化：实现文件夹差异自动检测与报告

今日更新

BunnyScholar硕士论文跨章节检查：长文档双栏如何梳理因果链

维普标红教育学SEM量表怎么办：助研君修改与RMSEA指标复核

知网标红有限元仿真与网格划分怎么办：助研君按字修改与参数复核

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？