【GitHub每日速递 20251209】Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！
<p><img src="https://img2024.cnblogs.com/blog/2450357/202510/2450357-20251016163017966-267609844.png"></p><p>原文: https://mp.weixin.qq.com/s/sp92prUjoAuJwfDEfL09Dg</p>
<h1 id="nextjs融合ai让drawio图表创建修改可视化全靠自然语言">Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！</h1>
<p> 是一个 集成AI功能的在线图表编辑工具 的 Web应用。简单讲，它让你用自然语言命令来画图、改图，AI帮你自动生成和优化图表。适用人群：需要快速制作流程图、架构图的产品经理、开发者和设计师。</p>
<p>项目地址：https://github.com/DayuanJiang/next-ai-draw-io</p>
<p>主要语言：TypeScript</p>
<p>stars: 3.0k</p>
<p><img src="https://img2024.cnblogs.com/blog/2450357/202512/2450357-20251209145308046-297618047.png"></p>
<h3 id="核心功能">核心功能</h3>
<ul>
<li><strong>大语言模型驱动的图表创建</strong>：可通过自然语言命令，利用大语言模型直接创建和操作 draw.io 图表。</li>
<li><strong>基于图像的图表复制</strong>：上传现有的图表或图像，AI 能自动复制并增强它们。</li>
<li><strong>图表历史记录</strong>：具备全面的版本控制，可跟踪所有更改，能查看和恢复 AI 编辑前图表的先前版本。</li>
<li><strong>交互式聊天界面</strong>：与 AI 实时交流以完善图表。</li>
<li><strong>AWS 架构图支持</strong>：专门支持生成 AWS 架构图。</li>
<li><strong>动画连接器</strong>：在图表元素之间创建动态的动画连接器，以实现更好的可视化效果。</li>
</ul>
<h3 id="技术栈">技术栈</h3>
<ul>
<li><strong>Next.js</strong>：作为前端框架和路由。</li>
<li><strong>Vercel AI SDK</strong>：用于流式传输 AI 响应和多供应商支持。</li>
<li><strong>react - drawio</strong>：用于图表的表示和操作。图表以可在 draw.io 中渲染的 XML 形式表示，AI 会根据命令生成或修改该 XML。</li>
</ul>
<h3 id="多供应商支持">多供应商支持</h3>
<p>支持多种 AI 供应商，包括 AWS Bedrock（默认）、OpenAI / 兼容 OpenAI 的 API、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek。其中，<code>claude - sonnet - 4 - 5</code> 在带有 AWS 徽标的 draw.io 图表上进行过训练，是创建 AWS 架构图的最佳选择。</p>
<h3 id="启动方式">启动方式</h3>
<ul>
<li><strong>使用 Docker（推荐）</strong>：先安装 Docker，然后运行特定的 Docker 命令，可通过浏览器访问 <code>http://localhost:3000</code> 查看应用。需根据需求替换环境变量以配置 AI 供应商。</li>
<li><strong>常规安装</strong>：克隆仓库，安装依赖，配置 AI 供应商（创建并编辑 <code>.env.local</code> 文件），运行开发服务器，最后通过浏览器访问 <code>http://localhost:3000</code>。</li>
</ul>
<h3 id="部署方式">部署方式</h3>
<ul>
<li>最简单的部署方式是使用 Vercel 平台，需在 Vercel 仪表板中设置环境变量。也可通过特定的部署按钮进行部署。</li>
</ul>
<h3 id="项目结构">项目结构</h3>
<ul>
<li><strong>app 目录</strong>：包含 Next.js 应用路由，有聊天 API 端点和主页面。</li>
<li><strong>components 目录</strong>：包含各种 React 组件，如聊天面板、聊天输入、历史对话框和 UI 组件。</li>
<li><strong>contexts 目录</strong>：包含 React 上下文提供者，用于全局图表状态管理。</li>
<li><strong>lib 目录</strong>：包含实用函数和帮助程序，如多供应商 AI 配置和 XML 处理工具。</li>
<li><strong>public 目录</strong>：包含静态资产，如示例图像。</li>
</ul>
<h3 id="优势">优势</h3>
<ul>
<li>集成了 AI 能力，通过自然语言即可操作图表，降低了图表创建和修改的难度。</li>
<li>支持多种 AI 供应商，用户可根据自身需求和偏好进行选择。</li>
<li>具备完善的版本控制和交互式聊天界面，方便用户对图表进行管理和优化。</li>
</ul>
<h3 id="应用场景">应用场景</h3>
<ul>
<li><strong>技术架构设计</strong>：可用于生成 AWS、GCP、Azure 等云服务的架构图，帮助技术人员快速可视化系统架构。</li>
<li><strong>创意绘图</strong>：例如绘制可爱的动物草图等，满足创意设计需求。</li>
<li><strong>教学和演示</strong>：在教学过程中，通过自然语言命令快速创建图表进行讲解；在演示中，利用动画连接器等功能增强可视化效果。</li>
</ul>
<h1 id="openai-codex-cli-安装使用全攻略chatgpt-计划也能搭配">OpenAI Codex CLI 安装使用全攻略，ChatGPT 计划也能搭配！</h1>
<p> 是一个在终端中运行的轻量级编程代理工具。简单讲，它能帮你自动生成代码、理解项目结构，并在命令行里完成编程任务。适用人群：开发者、程序员</p>
<p>项目地址：https://github.com/openai/codex</p>
<p>主要语言：Rust</p>
<p>stars: 51.8k</p>
<p><img src="https://img2024.cnblogs.com/blog/2450357/202512/2450357-20251209145352714-1408005097.png"></p>
<h3 id="主要信息">主要信息</h3>
<ul>
<li><strong>核心功能</strong>：Codex CLI 是 OpenAI 推出的一个本地运行的编码代理工具。它可以辅助开发者进行编码工作，并且可以与 ChatGPT 计划结合使用，支持多种配置选项和使用场景。</li>
<li><strong>安装方式</strong>
<ul>
<li>使用 npm 全局安装：<code>npm install -g @openai/codex</code></li>
<li>使用 Homebrew 安装：<code>brew install --cask codex</code></li>
<li>也可以从 最新 GitHub 版本 下载适合自己平台的二进制文件。</li>
</ul>
</li>
<li><strong>使用 ChatGPT 计划</strong>：运行 <code>codex</code> 后选择“Sign in with ChatGPT”，推荐使用 ChatGPT 的 Plus、Pro、Team、Edu 或 Enterprise 计划账号登录使用。也可以使用 API 密钥，但需要额外设置。</li>
<li><strong>Model Context Protocol (MCP)</strong>：Codex 可以访问 MCP 服务器，配置方法可参考 config docs。</li>
<li><strong>配置</strong>：Codex CLI 支持丰富的配置选项，偏好设置存储在 <code>~/.codex/config.toml</code> 中，完整配置选项见 Configuration。</li>
<li><strong>Execpolicy</strong>：可参考 Execpolicy quickstart 设置 Codex 可执行命令的规则。</li>
</ul>
<h3 id="优势-1">优势</h3>
<ul>
<li><strong>本地运行</strong>：可以在本地计算机上运行，减少对网络的依赖，提高响应速度。</li>
<li><strong>多方式集成</strong>：既可以通过命令行使用，也可以集成到代码编辑器（如 VS Code、Cursor、Windsurf）中使用。</li>
<li><strong>与 ChatGPT 结合</strong>：可以利用 ChatGPT 计划的资源，为开发者提供更强大的编码辅助。</li>
<li><strong>丰富配置</strong>：支持多种配置选项，能够根据不同需求进行个性化设置。</li>
</ul>
<h3 id="应用场景-1">应用场景</h3>
<ul>
<li><strong>日常编码</strong>：在编写代码时，利用 Codex 的提示和建议功能，提高编码效率。</li>
<li><strong>自动化任务</strong>：结合 GitHub Action、TypeScript SDK 或非交互模式（<code>codex exec</code>）实现自动化编码任务。</li>
<li><strong>代码审查</strong>：帮助开发者检查代码的质量和潜在问题。</li>
</ul><br><br>
来源：https://www.cnblogs.com/freedom-w/p/19326696
頁:
[1]