魔改鱼皮的 AI 零代码应用：加入 LangGraph 工作流、思维链可视化、三层压缩和 TODO 任务规划

最近在学习鱼皮的 AI 零代码应用生成平台时，【感谢yupi 鸽鸽😘】基于原项目做了一轮工程化改造。

我在这个基础上，重点参考了 Claude Code / Codex 这类 Agent 工具的运行机制，补充了更适合长链路 AI 代码生成的能力。

- 加入 LangGraph 工作流

- 推理过程和工具调用过程可视化

- 加入TODO 任务规划机制

- 加入三层上下文压缩机制

项目地址：

👉 https://github.com/LQF-dev/Zero-code

如果你也在做 AI 代码生成、AI Agent、LangChain4j、LangGraph4j 或者零代码平台相关项目，可以参考一下这个实现。

我主要做了哪些增强？

1. 加入 LangGraph4j 工作流模式

原来的项目中没有把LangGraph4j接入到业务生成链路中
这次我做的核心改造，是把普通生成模式和工作流生成模式统一抽象成同一类“代码生成引擎”。

我新增了 ChatCodeGenerationEngine 接口，用它定义统一的生成入口：

ClassicChatCodeGenerationEngine：普通模式，继续走原来的 AiCodeGeneratorFacade
WorkflowChatCodeGenerationEngine：工作流模式，走新的 CodeGenWorkflow
两种模式都统一返回 Flux<String>，因此后面的 SSE 推送、事件聚合、落库逻辑都不需要重复实现

整体调用流程是：

前端传 mode
↓
AppController 接收请求
↓
AppServiceImpl 解析 mode
↓
根据 mode 选择 ChatCodeGenerationEngine
↓
classic 走 AiCodeGeneratorFacade
workflow 走 CodeGenWorkflow
↓
统一返回 Flux<String>
↓
streamHandlerExecutor 继续处理 SSE、事件聚合、落库

2. 推理过程和工具调用过程可视化

yupi 代码没有做推理过程展示

我做了过程可视化：

展示模型 thinking / reasoning 过程
展示工具调用过程
展示工具执行结果
展示最终回复
每一轮对话都会聚合成结构化事件并落库

3. 加入 updatePlan TODO 任务规划机制

参考 Claude Code 的 TODO 思路，新增了 updatePlan 工具。

模型在生成 Vue 项目之前，需要先调用 updatePlan 创建任务计划，例如：

[
  {
    "id": "#1",
    "text": "创建项目骨架",
    "status": "in_progress",
    "deps": []
  },
  {
    "id": "#2",
    "text": "实现路由与布局",
    "status": "pending",
    "deps": ["#1"]
  },
  {
    "id": "#3",
    "text": "实现首页",
    "status": "pending",
    "deps": ["#2"]
  }
]

这个机制不是简单的顺序 checklist，而是支持依赖关系。

也就是说，TODO 可以表达成一个任务图：

#1 项目骨架
   ├── #2 路由与布局
   │     ├── #3 首页
   │     └── #4 其他页面
   └── #5 公共样式

后端会校验：

依赖的任务必须存在
任务进入 in_progress 前，它依赖的任务必须已经 completed
计划状态会持久化到 Redis
如果模型连续多次调用工具却不更新计划，会自动注入 reminder 提醒模型更新 TODO

前端也会实时展示 TODO 计划面板，让用户看到当前生成进度。

4. 加入三层上下文压缩机制

参考 Claude Code 的压缩机制加入三层上下文压缩机制

Layer 1：工具结果微压缩
Layer 2：达到context阈值后自动摘要压缩
Layer 3：手动压缩

Layer 1：工具结果微压缩

旧的工具执行结果会被替换成占位符：

[已执行: readFile]

压缩前：

{
  "id": "call_00_zWOMowxyqSEa6bEOGYx2hWfD",
  "toolName": "readFile",
  "text": "export const articles = [ ... 大段文件内容 ... ]",
  "type": "TOOL_EXECUTION_RESULT"
}

压缩后：

{
  "id": "call_00_zWOMowxyqSEa6bEOGYx2hWfD",
  "toolName": "readFile",
  "text": "[已执行: readFile]",
  "type": "TOOL_EXECUTION_RESULT"
}

最近的工具结果仍然保留原文，避免模型丢失最近上下文。

Layer 2：自动摘要压缩

当上下文超过阈值后，会调用模型生成结构化摘要，把多轮历史压缩成一条摘要消息。

摘要会重点保留：

已完成的操作
当前项目结构
用户核心需求
尚未完成的任务
关键修改的前后值

压缩前：

用户消息 + AI 回复 + thinking + 工具请求 + 工具结果 + 多轮文件修改记录 ...

压缩后：

[对话已压缩，完整记录保留在事件日志中]

1) 已完成的操作
- 创建了 package.json、vite.config.js、index.html、src/main.js 等文件
- 将首页标题从「静夜思」修改为「测试」

2) 当前项目状态
- 当前是 Vite + Vue3 项目
- 已包含路由、页面组件、公共样式和模拟数据

3) 用户需求和偏好
- 需要个人博客
- 需要文章列表、详情页、分类、搜索、评论和关于页面

4) 尚未完成的任务
- 无，当前需求已完成

压缩阈值在 application-ai.yml 中配置，不需要修改代码：

# 上下文压缩配置
context-compaction:
  # 触发自动压缩的 token 估算阈值
  # 建议设为所用模型最大上下文长度的 80%
  # 例如：DeepSeek V4-Pro 最大上下文 1M tokens → 800000
  #       GLM-4 最大上下文 128K tokens → 102400
  #       Qwen 最大上下文 128K tokens → 102400
  token-threshold: 800000
  # 送入摘要模型的最大字符数（避免摘要请求本身超长）
  max-summary-input-chars: 300000

Layer 3：手动压缩

也提供了手动压缩接口，可以主动触发上下文压缩。

完整历史不会丢失，因为完整事件仍然保存在 MySQL chat_event_log 中。压缩只影响下一轮发送给 LLM 的Context大小。

5. 适配 DeepSeek V4-Pro

原来 DeepSeek 是 deepseek-chat 和 deepseek-reasoner 两个模型分开用：

一个负责普通 chat
一个负责 reasoning

现在 DeepSeek V4 是统一模型模式，所以我做了适配：

统一切换到 deepseek-v4-pro
普通模式通过 thinking.type = disabled 关闭 thinking
推理模式通过 thinking.type = enabled 开启 thinking
支持 reasoning_effort
保留 reasoning 内容回放能力

这样普通生成和复杂 Agent 生成都可以使用同一个模型，只是通过参数控制是否开启思考。

6. 项目结构拆分

我也把项目结构整理了一下，把单体和微服务拆得更清楚：

zero-code-monolith      单体应用
zero-code-microservice  微服务应用
zero-code-frontend      前端应用

当前项目支持的能力

目前项目大致支持：

HTML / 多文件 / Vue 项目生成
LangGraph4j 工作流模式
LangChain4j 工具调用模式
三层上下文压缩
带依赖关系的任务计划规划 + redis 持久化
reasoning 思考过程展示
工具调用过程展示
DeepSeek V4-Pro thinking 模式
SSE 流式返回
Redis 会话记忆
MySQL 事件日志回放
选择器定点修改
patch 局部修改
一键本地部署
Redisson 分布式限流
精选应用 Redis 缓存
单体 / 微服务结构拆分

项目地址