AI 组件代码生成器

AI 组件代码生成器

基本信息

  • 名称: Agultor 组件代码生成引擎
  • 技术栈: NextJs、Shadcn UI、Vercel AI SDK、MongoDB、Docker
  • 亮点：集成了现代前端技术栈和多种 AI 模型能力，支持自由定制基于多种技术栈、组件库、场景、代码规范、AI 模型等的组件代码生成器。

技术架构设计

技术模块
  • 数据库模块：lib/db
  • 前端模块：components/ui、components/biz、app/*//page.tsx
  • 后端模块：app/api/codegen/list/route.ts
  • AI 模块：app/api/ai-core
AI 友好的后端整洁分层

alt text

第一层： DB 层(lib/db/*)：

  • types.ts (数据表类型定义)
  • schema.ts (schema 定义)
  • selectors.ts (数据查询)
  • mutations.ts (数据变更)

第二层：API 层(app/api/*)：

  • */types.d.ts (跟前端的 req、res 类型定义)
  • */list/route.ts (列表)
  • */create/route.ts (创建)
  • */update/route.ts (更新)
  • */delete/route.ts (删除)
AI 友好的前端整洁分层

alt text

第一层：基础组件层(components/ui/*)，来源于 shadcn-ui 的组件：

  • Accordion
  • Button
  • Card
  • ...

第二层：业务组件层(components/biz/*)，基于 shadcn-ui 基础组件 + 业务规则的二次封装：

  • index.ts 导出组件
  • [ComponentName].tsx 组件实现
  • [ComponentName].stories.tsx 组件文档
  • interface.ts 组件接口类型定义

第三层：API 请求服务层(app/services/*)：

  • 统一管理前端需要调用的 API 请求，包括请求参数类型、请求方法、请求路径、请求头、请求体类型、响应数据类型等

第四层：server-store 层(app/*//server-store/*)：

  • 统一管理对应页面需要对接的后台 api 数据，包括数据变更、数据查询等

第五层：页面层(app/*//page.tsx)：

  • 统一拼装对应页面需要对接的业务组件、同时给页面接入在 server-store 中管理的数据
AI 工作流

alt text