前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
返回 AI 情报前线
All News · 全部资讯8767
  • 人机交互场景下LLM低延迟推理工程实践
  • Anthropic Agent Skills 设计反思:Skill 不是 Capability
  • x402 协议实现可靠 Agent 支付的工程实践
  • DeepSeek涨价Claude Code烧钱:Dev成本控制三招
  • 2026年多AI编程智能体运行工具横评
  • AI智能体越界真相:一次34小时的真实攻击链复盘
  • Cohere Health基于Bedrock AgentCore的临床政策数字化实践
  • 生产级MCP服务器测试与调试指南
  • claude-crew:持久化多终端Claude Code智能体架构详解
  • TReNDS用Bedrock将根因分析从30分钟压缩到60秒
  • AI Agent访问控制架构:如何防止数据库被恶意篡改
  • AWS用约束规划自动计算NHL季后赛锁定条件,经验证四个赛季
  • AI Agent自动化开发者工作流:41%发布周期压缩实战
  • Token末日:Accenture 数据显示非工程师才是 token 消耗大户
  • Cloudflare 推出面向 AI Agent 的浏览器 Kitesurf
  • AI独立生成50次测试用例:49次精准覆盖所有边界条件
  • AI Agent支付基础设施一周内集体企业级化
  • AI Agent 故障隔离实战: blast radius 与三级 kill switch 设计
  • OpenAI发布Astra模型网络安全初步评估报告
  • Claude Code 高级编排:子 Agent 模式与防耗尽策略
  • 用 Spring Boot 搭建自托管 AI 客服组件,零 SaaS 订阅
  • 给 AI 写指令本质是写警告标签
  • Meta 认为编程代理的未来在于持久记忆而非更强模型
  • GitHub Code Quality 不再自动为 PR 添加 Copilot 审阅者
  • 别再往ChatGPT扔错误堆栈了
  • Claude Fable 5单次会话从推文构建可玩3D游戏
  • 让AI Agent拥有支付能力:x402协议实战
  • AI Agent工具优化:让Agent能安全调用你的工具
  • 用 Python + AI 自动化播客元数据流水线
  • AWS上Agentic AI实际成本拆解:单元经济学分析
  • open-connector:让AI Agent永远不接触用户凭证
  • npm脚本骗过多数用户:Agent权限提示研究
  • 警惕:MCP服务器正重蹈npm安全覆辙
  • GitHub Actions触发器丢失需手动恢复,附多条工具快讯
  • 本地语音助手如何做到「即时感」的工程实践
  • SpaceXAI Grok 4.6、OpenAI 免费无限聊、Meta 编程 Agent 入局
  • 子进程清理的正确姿势:terminate 的三个谎言
  • TypeScript 子代理设计指南:何时该分叉,何时该内联
  • LLM 返回 Markdown 而非 JSON 的工程解法
  • AI Agent降级早知道:三大监控指标
  • GraphRAG生产环境实体重复问题及免费修复方案
  • JSON提示词Runner bug验证:200次重跑结论依然显著
  • 传统 API 网关为何无法保护 AI Agent 及解决方案
  • AI Agent 事故响应:滚动消失前应记录的关键数据
  • 字节跳动训练10万亿参数大模型对标Anthropic
  • MasterGo MCP Server 打通设计工具与 IDE:减少上下文切换认知损耗
  • Node.js AI Agent 工具超时:超时机制设计与模型可见性
  • AI助手为何总是答非所问:RAG系统的版本地狱
  • 我在 Claude Code 用了一周十亿 token?97% 是缓存
  • 我把 croniter 移植到 Rust 拿了 228/228,但这个数字什么也证明不了
  • 用代码量化品牌在 AI 搜索引擎中的可见度:GEO 扫分工具
  • 已加载 51 / 8767
8.0
热点
AI SCORE
技术实践2026-08-07 23:19

用 Spring Boot 搭建自托管 AI 客服组件,零 SaaS 订阅

dev.to · AI#Spring Boot#AI 客服#开源
Editor brief · 编辑速览

完整实现了一个基于 Spring Boot + OpenAI API 的自托管客服 Widget,支持一键嵌入网站、完全私有化部署、无月费。

文章思维导图
Knowledge map
拖拽缩放
Full translation

完整中文译文

如今似乎每个新的 SaaS 都在嵌入 ChatGPT。

大多数 AI 客服解决方案依赖第三方平台、月费订阅和厂商锁定。这些产品确实很出色,但我想要一些不同的东西。

我想要完全的所有权。

我想把一切都部署在自己的服务器上,使用自己的 OpenAI API Key,自定义体验的每一个细节,通过一个 script 标签就能把 widget 嵌入任何网站。

于是我用 Spring Boot 和 Vanilla JavaScript 构建了自己的自托管 AI 客服 widget。

在构建小型产品和网站时,我意识到客户服务很快就会成为一个问题。

用户会有关于定价、功能、退货的问题,或者simply get stuck。

大多数开发者通过集成 Intercom、Crisp 或 Tidio 这类服务来解决这个问题。

这些平台非常优秀,但同时也意味着:

每月订阅费用 厂商锁定 客户对话存储在第三方平台上 有限的定制能力 又一个外部依赖

我想要一个开发者能完全拥有的解决方案。

构建一个 AI 驱动的客服 widget,开发者可以部署在自己的服务器上,不到一分钟就能集成到任何网站中。

用 AI 回答客户问题 从自定义知识库中学习 匹配公司品牌 存储对话历史 支持人工交接 易于部署 只需一个 script 标签即可嵌入

技术栈

Java 17 Spring Boot 3 Spring Security Spring Data JPA Thymeleaf Vanilla JavaScript H2 Database(支持 MySQL) OpenAI API

整体架构有意保持简洁。

Visitor ▼

AI Chat Widget(Vanilla JavaScript) ▼

Spring Boot REST API ▼

OpenAI API ▼

Database(H2 / MySQL)

保持前端无框架化使得 widget 轻量且易于嵌入几乎任何网站。

将 widget 添加到网站只需一个 script。

<script src="/widget/widget.js" data-api-base=""></script>

不需要 React。

该项目包含:

✅ AI 驱动的客户服务 ✅ Spring Boot 后端 ✅ 安全的管理员认证 ✅ 自定义知识库 ✅ 对话历史 ✅ 品牌定制 ✅ 带邮件通知的人工交接 ✅ OpenAI API 配置 ✅ H2 支持及 MySQL 生产配置 ✅ 一行代码网站集成

管理员可以从仪表板配置一切,而不必在应用内硬编码提示词。

公司名称 问候语 品牌颜色 OpenAI API key 知识库 通知邮箱

修改立即生效,无需重启应用。

一个有趣的设计决策是刻意没有实现 Retrieval-Augmented Generation(RAG)。

相反,管理员维护一个简单的知识库,包含在 AI 的 system prompt 中。

对于中小型企业来说,这种方式保持了部署的极简性,同时仍然能提供准确的回答。

如果项目增长,之后添加向量搜索也非常直接。

有时候简单才是更好的工程决策。

AI 不能回答所有问题。

当访问者需要人工帮助时,他们可以提交自己的邮箱。

将线索存入数据库 发送邮件通知(如果配置了 SMTP) 让管理员手动继续对话

这确保了用户永远不会走到死胡同。

构建 OpenAI 集成实际上并不是最难的部分。

真正的工程挑战是:

设计灵活的架构 认证和授权 对话持久化 提示词管理 使 widget 独立于框架 创建非开发者也能使用的管理员体验

这些部分最终比简单地调用 AI API 有趣得多。

刻意忽略的部分

每个项目都需要边界。

我刻意跳过了:

多租户 Stripe 订阅 向量数据库 多 AI 提供商 复杂的 AI 编排

目标是构建一个清晰、可理解的代码库,开发者可以快速部署并按自己的方式扩展。

我正在考虑添加:

流式 AI 响应 多 AI 提供商 RAG 支持 文件上传 对话分析 多租户架构

这个项目让我意识到,构建 AI 产品不仅仅是连接到 LLM。

真正的工程发生在它周围:

认证 配置 部署 可用性 持久化 开发者体验

这些才是把一个 API 调用转化为真正产品的部分。

我很想听听你是如何用 Java 或 Spring Boot 构建 AI 应用的,以及你会为自托管客服 widget 添加哪些功能。

对完整项目感兴趣?

我把这个做成了一个完整的、生产就绪的 Spring Boot 项目。如果你想要完整的源代码、设置指南和部署说明,可以在这里找到:

👉(https://swarnalata25.gumroad.com/l/supportai-springboot)

我还在构建更多自托管的 Java & Spring Boot 产品,所以反馈和建议始终欢迎。

Original source

本文由 AI 翻译整理自 dev.to · AI,原文版权归原作者所有。

阅读英文原文
上一篇
Claude Code 高级编排:子 Agent 模式与防耗尽策略
下一篇
给 AI 写指令本质是写警告标签