【GitHub每日速递 20251209】Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！

原文: https://mp.weixin.qq.com/s/sp92prUjoAuJwfDEfL09Dg

Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！

[next-ai-draw-io] 是一个 集成AI功能的在线图表编辑工具 的 Web应用。简单讲，它让你用自然语言命令来画图、改图，AI帮你自动生成和优化图表。适用人群：需要快速制作流程图、架构图的产品经理、开发者和设计师。

项目地址：https://github.com/DayuanJiang/next-ai-draw-io

主要语言：TypeScript

stars: 3.0k

核心功能

• 大语言模型驱动的图表创建：可通过自然语言命令，利用大语言模型直接创建和操作 draw.io 图表。
• 基于图像的图表复制：上传现有的图表或图像，AI 能自动复制并增强它们。
• 图表历史记录：具备全面的版本控制，可跟踪所有更改，能查看和恢复 AI 编辑前图表的先前版本。
• 交互式聊天界面：与 AI 实时交流以完善图表。
• AWS 架构图支持：专门支持生成 AWS 架构图。
• 动画连接器：在图表元素之间创建动态的动画连接器，以实现更好的可视化效果。

技术栈

• Next.js：作为前端框架和路由。
• Vercel AI SDK：用于流式传输 AI 响应和多供应商支持。
• react - drawio：用于图表的表示和操作。图表以可在 draw.io 中渲染的 XML 形式表示，AI 会根据命令生成或修改该 XML。

多供应商支持

支持多种 AI 供应商，包括 AWS Bedrock（默认）、OpenAI / 兼容 OpenAI 的 API、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek。其中，claude - sonnet - 4 - 5 在带有 AWS 徽标的 draw.io 图表上进行过训练，是创建 AWS 架构图的最佳选择。

启动方式

• 使用 Docker（推荐）：先安装 Docker，然后运行特定的 Docker 命令，可通过浏览器访问 http://localhost:3000 查看应用。需根据需求替换环境变量以配置 AI 供应商。
• 常规安装：克隆仓库，安装依赖，配置 AI 供应商（创建并编辑 .env.local 文件），运行开发服务器，最后通过浏览器访问 http://localhost:3000。

部署方式

• 最简单的部署方式是使用 Vercel 平台，需在 Vercel 仪表板中设置环境变量。也可通过特定的部署按钮进行部署。

项目结构

• app 目录：包含 Next.js 应用路由，有聊天 API 端点和主页面。
• components 目录：包含各种 React 组件，如聊天面板、聊天输入、历史对话框和 UI 组件。
• contexts 目录：包含 React 上下文提供者，用于全局图表状态管理。
• lib 目录：包含实用函数和帮助程序，如多供应商 AI 配置和 XML 处理工具。
• public 目录：包含静态资产，如示例图像。

优势

• 集成了 AI 能力，通过自然语言即可操作图表，降低了图表创建和修改的难度。
• 支持多种 AI 供应商，用户可根据自身需求和偏好进行选择。
• 具备完善的版本控制和交互式聊天界面，方便用户对图表进行管理和优化。

应用场景

• 技术架构设计：可用于生成 AWS、GCP、Azure 等云服务的架构图，帮助技术人员快速可视化系统架构。
• 创意绘图：例如绘制可爱的动物草图等，满足创意设计需求。
• 教学和演示：在教学过程中，通过自然语言命令快速创建图表进行讲解；在演示中，利用动画连接器等功能增强可视化效果。

OpenAI Codex CLI 安装使用全攻略，ChatGPT 计划也能搭配！

[codex] 是一个在终端中运行的轻量级编程代理工具。简单讲，它能帮你自动生成代码、理解项目结构，并在命令行里完成编程任务。适用人群：开发者、程序员

项目地址：https://github.com/openai/codex

主要语言：Rust

stars: 51.8k

主要信息

• 核心功能：Codex CLI 是 OpenAI 推出的一个本地运行的编码代理工具。它可以辅助开发者进行编码工作，并且可以与 ChatGPT 计划结合使用，支持多种配置选项和使用场景。
• 安装方式
  • 使用 npm 全局安装：npm install -g @openai/codex
  • 使用 Homebrew 安装：brew install --cask codex
  • 也可以从 最新 GitHub 版本 下载适合自己平台的二进制文件。
• 使用 ChatGPT 计划：运行 codex 后选择“Sign in with ChatGPT”，推荐使用 ChatGPT 的 Plus、Pro、Team、Edu 或 Enterprise 计划账号登录使用。也可以使用 API 密钥，但需要额外设置。
• Model Context Protocol (MCP)：Codex 可以访问 MCP 服务器，配置方法可参考 config docs。
• 配置：Codex CLI 支持丰富的配置选项，偏好设置存储在 ~/.codex/config.toml 中，完整配置选项见 Configuration。
• Execpolicy：可参考 Execpolicy quickstart 设置 Codex 可执行命令的规则。

优势

• 本地运行：可以在本地计算机上运行，减少对网络的依赖，提高响应速度。
• 多方式集成：既可以通过命令行使用，也可以集成到代码编辑器（如 VS Code、Cursor、Windsurf）中使用。
• 与 ChatGPT 结合：可以利用 ChatGPT 计划的资源，为开发者提供更强大的编码辅助。
• 丰富配置：支持多种配置选项，能够根据不同需求进行个性化设置。

应用场景

• 日常编码：在编写代码时，利用 Codex 的提示和建议功能，提高编码效率。
• 自动化任务：结合 GitHub Action、TypeScript SDK 或非交互模式（codex exec）实现自动化编码任务。
• 代码审查：帮助开发者检查代码的质量和潜在问题。