2 篇文章带有标签 “nextjs”

Next AI Draw.io 架构设计分析

1. 项目概述

Next AI Draw.io 是一个 AI 驱动的图表创建工具，通过自然语言命令和 AI 辅助可视化来创建、修改和增强 draw.io 图表。

核心特性

  • LLM 驱动的图表创建：利用大语言模型通过自然语言直接创建和操作 draw.io 图表
  • 基于图像的图表复制：上传现有图表或图像，让 AI 自动复制和增强
  • PDF 和文本文件上传：上传 PDF 文档和文本文件以提取内容并生成图表
  • AI 推理显示：查看支持模型的 AI 思考过程（OpenAI o1/o3、Gemini、Claude 等）
  • 图表历史记录：全面的版本控制，跟踪所有更改
  • 交互式聊天界面：与 AI 实时交流以完善图表
  • 云架构图表支持：专门支持生成云架构图表（AWS、GCP、Azure）
  • 动画连接器：创建动态和动画化的图表元素连接器

技术栈

  • 框架：Next.js 16.x + React 19.x
  • AI SDK：Vercel AI SDK (ai + @ai-sdk/*)
  • 图表渲染：react-drawio
  • 样式：Tailwind CSS 4.x
  • UI 组件：Radix UI + shadcn/ui
  • 多语言支持：i18n
  • 桌面应用：Electron
  • 部署：Vercel / Cloudflare Workers / EdgeOne Pages

2. 整体架构

next-ai-draw-iodrawiodiagram-generationvercel-ai-sdknextjsreacttypescriptelectron

需求即代码：ZeroAI 让开发触手可及

ZeroAI 是一个通用的 AI 驱动软件开发助手，能够按照标准化的五步流程开发任意软件应用。从需求理解到代码生成，让 AI 帮你完成整个软件开发周期。

特性

  • 🚀 五步开发流程：需求分析 → 接口设计 → 数据库设计 → 业务逻辑设计 → 代码生成
  • 💾 版本管理：完整的项目版本控制，支持创建、查看和加载历史版本
  • 📝 Word 导出：一键导出项目文档到 Word 格式
  • 🎯 交互式审查：每一步生成结果都可查看、审批或重新生成
  • 📊 实时日志：完整记录 AI 开发过程中的所有操作和输出
  • 🔄 数据持久化：使用 SQLite 数据库存储项目数据

技术栈

核心依赖

  • 框架: Next.js 16 (App Router)
  • 语言: TypeScript
  • 样式: Tailwind CSS 4
  • 数据库: Better-SQLite3
  • AI: OpenAI API (兼容 LongCat 等第三方 API)
  • 文档导出: docx

测试依赖

  • 测试框架: Vitest
  • 测试 UI: Vitest UI
  • React 测试: @testing-library/react
  • DOM 断言: @testing-library/jest-dom
  • 用户事件: @testing-library/user-event
  • 浏览器环境: jsdom

快速开始

环境配置

  1. 复制环境变量模板：
cp .env.example .env
zeroaiagentsoftware-developmentnextjstypescriptsqliteopenai-apivitest