WeDevelop：用 AI Agent 简化应用开发

WeDevelop 是一个基于 LangChain4j 的 AI 零代码应用生成平台，通过智能 Agent 工作流编排，用户只需输入自然语言描述，即可自动生成 Vue 应用、HTML 页面或多文件代码项目。无需编写代码，像聊天一样完成应用开发。当然，WeDevelop 无法与 Cursor、Claude Code 这一类的 Code Agent 相提并论，但是可以作为学习 Agent 开发、拿做毕业设计的好项目。

---

0. 开源地址和在线体验地址

• GitHub: https://github.com/XiaoMaColtAI/WeDevelop
• Gitee: https://gitee.com/xiaomacoltai/WeDevelop
• 在线体验: http://wd.weseeworld.cn

---

1. 问题背景：为什么我们需要零代码应用生成？

在传统的软件开发流程中，从创意到可运行的应用需要经历以下环节：

每个环节都需要专业的技术能力：

• 需求分析：理解用户需求，转化为技术规格
• 技术选型：选择合适的框架和工具
• 架构设计：设计系统结构和模块划分
• 编码实现：编写数百甚至数千行代码
• 测试验证：确保功能正确、无 Bug
• 部署上线：配置服务器、构建项目

WeDevelop 的目标是将这一复杂流程简化为一步：输入你的想法，得到可运行的应用。

---

2. 项目部分截图

2.1 首页

展示应用列表和快速创建入口

2.2 AppChat 页面

与 AI 对话生成应用的核心界面

---

3. 解决方案：AI Agent 工作流如何工作？

WeDevelop 基于 LangGraph4j 构建了一个多 Agent 协同的工作流系统。整个应用生成过程由 7 个智能节点（Agent）协同完成：

3.1 工作流架构图

3.2 各节点职责详解

3.2.1 应用命名节点（AppNamingNode）

基于 AI 分析用户提示词，生成简洁、有意义的应用名称。

输入：用户的自然语言描述
输出：应用名称（如"个人博客"、“任务管理系统”）

3.2.2 图片收集节点（ImageCollectorNode）

并发调用 Pexels API 和 undraw 插画库，收集与应用主题相关的图片素材。

核心技术：

• 基于 AI 规划图片搜索关键词
• 并发执行多个图片搜索请求
• 筛选高质量、版权友好的图片

3.2.3 提示词增强节点（PromptEnhancerNode）

将收集的的图片信息整合到原始提示词中，形成更丰富的上下文。

增强后的提示词包含：

• 原始需求描述
• 推荐配图列表
• 应用场景说明
• 技术栈建议

3.2.4 智能路由节点（RouterNode）

根据提示词内容，自动判断应该生成哪种类型的代码：

类型	说明	适用场景
HTML	单页面 HTML 代码	简单展示页、落地页
MULTI_FILE	多文件项目结构	小型工具、多页面应用
VUE_PROJECT	完整 Vue 3 项目	交互式 Web 应用、管理后台

3.2.5 应用生成节点（CodeGeneratorNode）

核心代码生成节点，基于 LangChain4j 的 AI 模型调用能力，生成完整的应用代码。

生成的内容包括：

• HTML/CSS/JavaScript 源代码
• 项目配置文件
• 组件和路由定义
• 样式和资源文件

工具调用（Tool Calling）：

• 在代码生成过程中，AI 模型可以根据需要动态调用工具函数
• 支持文件读写、API 调用、外部服务集成等功能
• 通过 Tool Calling 机制，实现代码生成与外部资源的无缝衔接

3.2.6 代码质量检查节点（CodeQualityCheckNode）

自动检查生成代码的质量，确保：

• 语法正确性
• 结构完整性
• 可运行性

质检失败时：自动触发重新生成，形成闭环反馈。

3.2.7 项目构建节点（ProjectBuilderNode）

对 Vue 项目执行自动化构建：

• 安装依赖（npm install）
• 执行构建（npm run build）
• 部署到本地服务器

---

4. 技术架构

4.1 整体技术栈

层级	技术选型
AI 框架	LangChain4j 1.1.0 + LangGraph4j 1.6.0-rc2
后端框架	Spring Boot 3.5.8 + Java 21
前端框架	Vue 3.5.17 + Vite 7.0.0
数据库	MySQL 8.0+
缓存	Redis（Session + 缓存）
对象存储	腾讯云 COS

4.2 核心架构设计

---

5. 核心特性

5.1 零代码应用生成

无需编写任何代码，只需描述需求，AI 完成从设计到部署的全过程。

5.2 流式响应输出

基于 Server-Sent Events (SSE) 实现实时进度反馈：

5.3 智能 Agent 路由

根据用户需求自动选择最合适的生成策略：

类型	说明	适用场景
HTML	单页面 HTML 代码	简单展示页、落地页
MULTI_FILE	多文件项目结构	小型工具、多页面应用
VUE_PROJECT	完整 Vue 3 项目	交互式 Web 应用、管理后台

5.4 代码质量闭环

生成 → 检查 → 修正 → 构建，形成自动化质量保障闭环。

质检失败时：自动触发重新生成，形成闭环反馈。

5.5 用户与应用管理

• 用户注册/登录
• 应用创建和管理
• 对话历史保存和查询
• 应用代码下载

---

6. 技术亮点

6.1 LangGraph4j 状态机

基于 LangGraph4j 构建的 有向无环图（DAG） 工作流，支持：

• 条件路由：根据质检结果动态调整流程
• 并发执行：图片收集节点并发调用多个 API
• 状态保持：上下文在节点间传递

6.2 工具调用（Tool Calling）

平台集成了多种 AI 工具：

工具	功能
ImageSearchTool	调用 Pexels API 搜索图片
UndrawIllustrationTool	获取 undraw 插画资源
FileReadTool	读取项目文件
FileWriteTool	写入生成代码
ExitTool	退出工作流

6.3 护轨机制（Guardrails）

在关键节点设置输出护轨，确保生成内容的安全性：

• Prompt 安全审查：过滤恶意提示词
• 输出质量检查：自动验证代码可运行性
• 重试机制：失败时自动重新尝试

---

7. 本地安装与部署指南

7.1 环境要求

环境	版本要求
JDK	21 或更高版本
Maven	3.6 或更高版本
Node.js	18 或更高版本
MySQL	8.0 或更高版本
Redis	6.0 或更高版本（可选）

7.2 步骤一：克隆项目

git clone https://github.com/XiaoMaColtAI/WeDevelop.git
cd WeDevelop

国内用户也可从 Gitee 克隆：

git clone https://gitee.com/xiaomacoltai/WeDevelop.git
cd WeDevelop

7.3 步骤二：数据库初始化

mysql -u root -p < sql/init_database.sql

7.4 步骤三：配置后端

1. 复制配置文件

# Windows
copy src\main\resources\application-local.yml.template src\main\resources\application-local.yml

# Linux/Mac
cp src/main/resources/application-local.yml.template src/main/resources/application-local.yml

2. 编辑配置文件

编辑 src/main/resources/application-local.yml：

# 数据库配置
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/we_develop
    username: root
    password: your_password

# Redis 配置
  data:
    redis:
      host: localhost
      port: 6379

# AI 模型配置（以 DeepSeek 为例）
langchain4j:
  open-ai:
    chat-model:
      base-url: https://api.deepseek.com
      api-key: your_api_key_here  # 替换为你的 API Key
      model-name: deepseek-chat
      max-tokens: 8192

# Pexels 图片搜索 API Key
pexels:
  api-key: your_pexels_api_key_here

3. 启动后端服务

# Maven 方式
mvn spring-boot:run

# 或使用 Maven Wrapper（Windows）
mvnw.cmd spring-boot:run

后端服务默认运行在：http://localhost:8123/api

7.5 步骤四：配置前端

1. 进入前端目录

cd WeDevelop_frontend

2. 安装依赖

npm install

3. 配置环境变量

创建 src/config/env.ts 文件：

export default {
  apiBaseUrl: 'http://localhost:8123/api',
}

4. 启动前端服务

npm run dev

前端服务默认运行在：http://localhost:5173

---

8. 使用指南

8.1 快速开始

1. 访问平台：打开浏览器访问前端地址
2. 注册/登录：创建账号并登录
3. 创建应用：点击"新建应用"，输入应用描述
4. 生成应用：等待 AI 工作流执行完成
5. 查看结果：预览生成的应用，下载源代码

8.2 提示词技巧

为了获得更好的生成效果，建议：

技巧	示例
明确应用类型	“创建一个个人博客网站”
描述核心功能	“需要有文章列表、文章详情、分类导航功能”
指定风格偏好	“简洁现代风格，以白色为主色调”
说明目标用户	“面向技术人员的技术分享博客”

优质提示词示例：

创建一个任务管理系统，支持创建任务、分配负责人、设置优先级和截止日期。需要有看板视图和列表视图切换功能。界面简洁专业，适合小团队协作使用。

---

9. 适用场景

场景	说明
原型开发	快速验证产品创意，生成 MVP
学习实践	初学者通过 AI 生成代码学习编程
内部工具	快速搭建管理后台、数据展示页面
个人项目	个人博客、作品集网站快速上线
毕业设计	计算机类专业学生的理想毕业设计选题

9.1 作为毕业设计选题的优势

WeDevelop 平台作为计算机类专业的毕业设计项目具有显著优势：

技术先进性

技术方向	涉及内容
人工智能	LangChain4j、LangGraph4j、大模型 API 调用
后端开发	Spring Boot 3.x、Java 21、MyBatis-Flex
前端开发	Vue 3、Vite、Ant Design Vue、Pinia
数据库	MySQL、Redis
云存储	腾讯云 COS 对象存储

功能完整性

• 用户管理系统（注册、登录、权限管理）
• 应用管理功能（创建、编辑、删除、部署）
• 对话历史管理（保存、查询、复用）
• AI 工作流编排（多 Agent 协同）
• 代码自动生成与质量检查
• 流式响应输出（SSE）

创新点突出

1. 基于 LangGraph4j 的智能工作流编排 — 支持条件路由、并发执行、状态保持
2. 多 Agent 协同的应用生成机制 — 7 个节点各司其职，协同完成代码生成
3. 代码质量闭环保障机制 — 自动生成 + 质量检查 + 修正反馈
4. 护轨机制保障安全性 — Prompt 安全审查、输出质量验证

可扩展性强

• 可扩展支持更多前端框架（React、Svelte 等）
• 可增加后端代码生成能力
• 可引入更多 AI 工具和函数调用
• 可构建应用模板市场

论文写作素材丰富

• AI Agent 技术研究与实现
• 工作流引擎的设计与优化
• 代码生成技术对比分析
• 用户体验与交互设计

---

10. 总结与展望

WeDevelop 通过 AI Agent 工作流重新定义了应用开发的方式：

核心理念：

• 零代码：无需编程基础，自然语言即可生成应用
• 智能化：多 Agent 协同，自动完成分析、设计、编码
• 可信赖：代码质量检查闭环，确保生成结果可用

如果这个项目对你有帮助，请给项目一个 Star ⭐