原文: 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 版本](https://github.com/openai/codex/releases/latest) 下载适合自己平台的二进制文件。 * **使用 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`）实现自动化编码任务。 * **代码审查**：帮助开发者检查代码的质量和潜在问题。