前景

给大家推荐一下我最近做的项目：Zero Code Studio。

这是一个基于 Spring Boot + LangChain4j + LangGraph4j 的 AI 网站生成系统，完整覆盖“生成、修改、部署”链路。

项目地址在这里，喜欢的话点个心心吧，谢谢！
github地址

核心亮点

• 双模式生成引擎：支持 LangChain4j 工具调用模式 + LangGraph4j 工作流模式
• 工具调用过程可观测（推理过程 + 工具轨迹前端流式分层展示）
• 记忆系统：Redis短期记忆 + MySQL长期事件日志，可回放可重建。
• 多模型配置：支持 OpenAI 兼容接口模型切换（如 DeepSeek / Qwen / GLM）
• 输出内容 SSE 流式生成
• 前端界面选择器支持定点修改
• Redisson 分布式限流
• 精选应用 Redis 缓存
• 一键本地部署

如果你想看一个更偏工程化、可落地的 AI Coding 项目，欢迎体验和交流。

Zero Code Studio

一个面向零代码场景的 AI 网站生成平台

基于 LangChain4j 与 LangGraph4j 构建，支持 LangChain4j 工具调用模式生成代码与 Workflow 模式编排生成，覆盖「生成 → 修改 → 预览 → 部署」完整链路。

快速开始 • 核心能力 • 技术架构 • 工作流 • 缓存与限流 • 部署机制

---

项目简介

Zero Code Studio 是一个以工程化为目标的 AI 代码生成平台。
它不仅能生成网页代码，还能在生成过程中展示模型思考、工具调用过程，并将每一轮对话沉淀为可回放的结构化事件。

---

• 做了两种生成模式：标准模式(LangChain4j) 和 工作流模式(LangGraph4j)，同一入口可切换。
• 做了智能路由与模型分层：HTML / 多文件（原生 CSS + JS）走轻量模型；Vue 工程化生成走重模型与推理模式，并支持展示推理过程与工具调用。
• 做了流式对话闭环：SSE实时返回，前端边生成边展示。
• 做了工具调用能力：支持读目录、读文件、写文件、改文件、删文件、退出。
• 做了工作流编排：图片并发收集 → 提示增强 → 智能选择路由 → 生成 → 质检 → 构建。
• 做了记忆系统：Redis短期记忆 + MySQL长期事件日志，可回放可重建。
• 做了过程可视化：前端分层展示思考过程、工具调用、最终回复。
• 做了局部修改能力：支持patch 协议，减少全量重写。
• 做了本地部署闭环：生成后自动构建并发布到本地可访问地址。
• 做了可视化编辑：在预览页点选元素，带选择器发起定点修改。
• 做了接口限流保护：基于 Redis + Redisson 的分布式限流，按用户 / IP / API 维度控制请求频率。

---

核心能力

1) LLM 工程能力

• 幂等防重：基于 clientRequestId 防止浏览器 SSE 自动重连造成重复请求LLM。
• 工作流编排：支持基于 LangGraph4j 对 LLM 行为进行工作流级编排（路由、生成、质检、构建）。
• 工具调用：支持多工具协同执行，完整保留工具请求与结果。
• 推理过程落库：支持思考内容（reasoning）与工具轨迹分层展示。
• 多模型配置：支持 OpenAI 兼容接口模型切换（如 DeepSeek / Qwen / GLM）。

2) 业务能力

• 智能生成：支持 HTML、多文件、Vue 项目多种代码生成类型。
• 精准修改：支持基于选择器的定点修改和 patch 应用。
• 可视化编辑：在预览 iframe 中选中元素并自动注入上下文提示。
• 一键部署：生成后自动部署到本地静态访问地址，并异步生成封面截图。
• 接口限流：对 AI 对话接口进行用户维度频控（当前 10 次 / 60 秒），防止高频请求冲击服务。
• 精选缓存：首页的精选应用分页结果写入 Redis（前 10 页缓存，TTL 5 分钟），并在精选数据变更时主动失效。

---

技术架构

端到端数据流

说明：图中采用抽象角色表达，避免与具体类名绑定；对应实现仍是同一条工程化链路：幂等防重、记忆加载、流式分片、对话轮次聚合、结束落库、文件落盘。

关键数据对象

• turnId：单轮会话主键，贯穿 SSE 聚合与最终落库。
• memoryId：appId_codeGenType，用于区分不同生成类型的会话记忆。
• chat_history：用户可读对话视图，保存 user / assistant 最终消息。
• chat_event_log：结构化事件事实表，保存 USER_MESSAGE、THINKING、TOOL_REQUEST、TOOL_RESULT、ASSISTANT_FINAL。

HTML 落盘链路中的设计模式

• Facade：AiCodeGeneratorFacade 统一封装“生成 + 解析 + 保存”流程。
• Executor 分发：CodeParserExecutor / CodeFileSaverExecutor 按 CodeGenTypeEnum 分发 HTML 与多文件实现。
• Template Method：CodeFileSaverTemplate 固化保存骨架，子类只实现 saveFiles 细节。
• Patch 优先策略：HtmlCodeParser 先解析 patch 协议，再回退完整 HTML；HtmlCodeFileSaverTemplate 优先应用 patch，再兜底全量写入。
• Reactive 聚合：StreamHandler 在 doOnNext/doOnComplete/doOnError 中完成流式聚合与一致性落库。

---

工作流

工作流主链路（LangGraph）

Agent 工具调用循环

---

工具清单

工具名	作用
readDir	读取目录结构
readFile	读取文件内容
writeFile	写入文件
modifyFile	替换指定内容实现局部修改
deleteFile	删除文件（含重要文件保护）
exit	结束工具调用循环

---

记忆与事件系统

• chat_history：用户与 AI 的对话视图，便于历史展示。
• chat_event_log：记录每轮关键事件（用户消息、思考、工具请求、工具结果、最终回复）。
• Redis 作为短期会话记忆，MySQL 作为长期事实日志。
• 当 Redis 记忆丢失时，可从 chat_event_log 回放重建关键上下文。

---

缓存与限流

限流特性（Redisson 分布式限流）

• 基于 @RateLimit + AOP，对接口做统一限流。
• 支持三种维度：USER、IP、API（按注解参数切换）。
• 当前 AI 对话接口 /app/chat/gen/code 限流规则：10 次 / 60 秒 / 用户。
• 限流器 key 统一前缀 rate_limit:，并在 Redis 中设置 1 小时过期，避免长期脏 key 堆积。
• 超限后返回友好提示：AI 对话请求过于频繁，请稍后再试。

精选应用缓存特性（Redis Cache）

• 精选列表接口 /app/good/list/page/vo 使用缓存空间 good_app_page。
• 仅缓存前 10 页请求（pageNum <= 10），避免深页低频数据占用缓存。
• good_app_page 单独配置 TTL 为 5 分钟（默认缓存 TTL 为 30 分钟）。
• 发生精选数据变更时主动清理缓存，避免用户命中旧数据：
  • 管理员更新应用且涉及精选状态变化时清理。
  • 用户更新精选应用信息时清理。
  • 删除精选应用时清理。

缓存序列化策略

• key 使用字符串序列化；value 使用 JSON 序列化并携带类型信息。
• 禁用 null 值缓存，减少无效缓存污染。

---

部署机制

项目内置本地部署闭环：

• 代码生成目录：tmp/code_output/{codeGenType}_{appId}
• 部署目录：tmp/code_deploy/{deployKey}
• Vue 项目部署前自动执行构建（npm install + npm run build）
• 静态访问路由：/api/static/{deployKey}/...
• 部署完成后返回访问 URL，并异步更新应用封面截图

---

快速开始

环境要求

• JDK 21+
• Node.js 18+
• MySQL 8+
• Redis 6+

后端启动

./mvnw spring-boot:run

前端启动

cd zero-code-frontend
npm install
npm run dev

数据库准备

运行sql/create_table.sql

访问地址

• 前端：http://localhost:5173
• 后端：http://localhost:8123/api

---

模型配置

项目使用 OpenAI 兼容接口配置模型，默认支持流式与推理流式模型分离配置。
可在 application-ai.yml 中按模板切换模型供应商（DeepSeek / Qwen / GLM）。

---

项目截图

登录

首页

应用对话生成页

可视化编辑模式

工具调用过程展示

一键部署结果页

---

Roadmap

• 标准模式 + 工作流模式双引擎
• 工具调用可观测化
• 事件聚合落库与回放
• patch 定点修改协议

---

License

MIT

---

Author

Eric

• 学历：UNSW IT 硕士 + 西南大学本科。

• 职业：Java 后端程序员。

• 博客：代码丰。

• 微信号：LQF-dev（随时欢迎骚扰）。

• 如果这个项目对你有帮助，欢迎点个 ⭐