React 低代码 AI 开发平台

一个基于 React 和 NestJS 构建的低代码开发平台。它集成了可视化拖拽编辑器、节点式逻辑流构建器以及 AI 辅助能力，旨在加速应用开发流程。

🚀 核心特性

🤖 AI 驱动开发

• 智能助手: 内置 AI 聊天面板，能够理解您的项目上下文、当前页面结构以及选中的组件。
• 自然语言编辑: 使用自然语言创建组件、修改样式并生成复杂的逻辑流（例如：“创建一个登录表单”或“把这些按钮变成蓝色”）。
• 多模型支持:
  • DeepSeek 集成: 原生支持 DeepSeek Chat 和 DeepSeek Reasoner (R1) 模型。
  • 自定义模型: 用户可以直接在 UI 中配置自己的 API Key 和端点（兼容 OpenAI 协议）。
  • 上下文感知: 聊天输入框支持 IDE 风格的智能标签（如 #Button），可精准引用特定组件。
  • 逻辑生成: AI 可以生成交互式的事件流（例如：“点击按钮 A 时隐藏图片 B”）。

🎨 可视化编辑器

• 拖拽画布: 直观的所见即所得（WYSIWYG）编辑器，用于构建 UI 布局。
• 丰富组件库: 内置按钮、输入框、表格、表单、模态框、图表等多种组件。
• 属性与样式面板: 对组件属性、样式和布局进行精细化控制。
• 层级管理: 基于树状视图管理组件层级结构。

⚡ 逻辑与交互

• 可视化逻辑流: 无需编写代码即可定义复杂交互的节点式编辑器。
  • 节点类型: 开始、动作、条件判断 (If/Else)、循环、API 请求、变量操作。
• 变量系统: 支持全局和页面级变量，并支持表达式绑定。
• 事件系统: 全面的事件触发机制（onClick, onChange, onMount 等）。

🛠️ 企业级能力

• 身份认证: 支持邮箱、Google 和 GitHub 登录（基于 Passport.js）。
• 后端架构: 基于 NestJS 和 Prisma (PostgreSQL) 构建的稳健 API。
• 部署: 支持一键部署项目。

📦 技术栈

• 前端:

  • React 19
  • Vite
  • Tailwind CSS
  • Ant Design
  • Zustand (状态管理)
  • React Flow (逻辑编辑器)

• 后端:

  • NestJS
  • Prisma ORM
  • PostgreSQL
  • LangChain (AI 编排)
  • Passport (认证)

• 工具:

  • pnpm (Monorepo 管理)
  • Docker (数据库与服务)

🏁 快速开始

前置要求

• Node.js >= 18
• pnpm
• PostgreSQL (或使用 Docker)
• Redis (可选，用于缓存/队列)

安装步骤

1. 克隆仓库

   git clone <repository-url>
   cd project

2. 安装依赖

   pnpm install

3. 环境配置

   • 复制 apps/server 和 apps/web 目录下的 .env.example 为 .env。
   • 在 apps/server/.env 中配置您的数据库连接字符串。
   • 在 .env 中或通过 UI 配置 AI API Key（OpenAI, DeepSeek 等）。

4. 数据库迁移

   cd apps/server
   npx prisma migrate dev

5. 启动项目 在根目录下运行：

   pnpm dev

   这将同时启动前端 (http://localhost:5173) 和后端 (http://localhost:3000)。

🤖 AI 配置

平台支持动态 AI 模型配置。您可以在 .env 文件中设置默认模型，也可以让用户通过 UI 添加自己的 Key。

支持的提供商:

• OpenAI (GPT-4o, GPT-3.5)
• DeepSeek (Chat, Reasoner)
• 阿里云 (通义千问 Qwen)
• 自定义/本地 LLM (通过 OpenAI 兼容的 Base URL，例如 Ollama)

配置 DeepSeek

1. 从 DeepSeek 开放平台 获取您的 API Key。
2. 添加到 apps/server/.env:

   DEEPSEEK_API_KEY=sk-your-key

3. 或者在 Web UI 中手动添加: AI 助手面板 -> 设置 (⚙️) -> 添加自定义模型。

📂 项目结构

.
├── apps/
│   ├── web/          # React 前端应用
│   ├── server/       # NestJS 后端应用
│   └── docs/         # 文档站点 (Rspress)
├── package.json      # 根 package.json
└── pnpm-workspace.yaml

🤝 参与贡献

欢迎贡献代码！请阅读 开发指南 了解我们的行为准则以及提交 Pull Request 的流程。

📄 许可证

MIT