30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度在实际 AI 图像创作中一个常见的痛点是工具链的割裂构思时需要在笔记软件里写提示词生成图片时切换到另一个 AI 绘图工具管理素材又得打开文件管理器而复杂的多图迭代和方案探索更是缺乏一个统一的视觉化工作空间。开源项目infinite-canvas无限画布正是为了解决这一问题而生。它将画布编排、AI 生图、参考图编辑、对话助手、提示词库和素材管理集成在一个界面中为创作者提供了一个可无限延展、支持连续迭代的视觉工作台。本文面向希望搭建个人 AI 创作工作台的开发者、设计师或 AI 爱好者。我们将从零开始完成infinite-canvas的本地部署、核心功能配置并深入解析其作为“素材 提示词 批量出图一站式工作台”的技术实现与使用技巧。通过本文你将能够搭建一个属于自己的、可完全掌控的 AI 创作环境并理解如何利用其画布、Agent 和提示词库来优化你的创作流程。1. 理解无限画布的核心概念与架构在开始部署之前我们需要先理解infinite-canvas试图解决的几个核心问题以及它是如何通过技术架构来应对的。1.1 为什么需要“无限画布”传统的 AI 绘图流程通常是线性的输入提示词 - 生成图片 - 如果不满意修改提示词再生成。这个过程缺乏视觉化的上下文关联。当你需要基于上一张图进行局部修改或者需要将多张图、多个提示词版本进行对比和组合时线性流程就显得效率低下。infinite-canvas引入了“画布”这一概念。你可以将画布想象成一个无限大的白板节点化每一张生成的图片、每一段文本提示、每一个参考素材都可以作为一个独立的“节点”放置在画布上。可视化关联你可以通过连线来建立节点之间的逻辑关系例如“灵感草图 - 提示词 - 生成图A - 局部修改提示词 - 生成图B”。迭代与探索这种可视化关联使得回溯创作思路、尝试不同分支例如同一草图的不同风格化方向变得非常直观。1.2 项目架构与技术栈概览infinite-canvas是一个典型的现代 Web 应用其架构清晰便于部署和二次开发。前端基于Next.js(React框架) 构建使用TypeScript保证类型安全Tailwind CSS和Ant Design负责 UI 组件与样式状态管理则交给了轻量且高效的Zustand数据获取使用TanStack Query。后端/服务端项目主体是一个前端应用AI 生成请求由浏览器前端直接发送到你配置的 OpenAI 兼容 API如 OpenAI、各类中转服务或本地部署的模型服务。此外它包含少量Next.js Route用于实现第三方提示词库的抓取与缓存、以及可选的 WebDAV 代理功能。本地智能体一个独立组件Canvas Agent可以运行在你的本地机器上。它通过MCP协议与Codex或Claude Code等 AI 编程助手连接使得这些 AI 助手能够“看到”并操作你的画布实现更复杂的自动化创作。部署官方推荐使用Vercel进行一键部署同时也提供了完整的Docker镜像方便在任何支持 Docker 的环境如个人服务器、云主机上运行。这种架构意味着你的图片生成数据API Key、生成记录、画布内容默认保存在浏览器本地存储中。这对于个人使用来说简单快捷但如果你需要在多设备间同步则需要考虑额外的数据持久化方案。1.3 核心功能模块解析根据项目描述我们可以将其核心能力分解为以下几个模块模块功能描述技术实现关键点无限画布多画布项目管理、节点拖拽缩放、连线、小地图、撤销/重做、导入/导出。基于 Canvas 或 SVG 的绘图库如react-konva或fabric.js配合 Zustand 管理画布状态。AI 创作文生图、图生图、参考图编辑、文本问答、音频/视频生成。前端直接调用配置的 OpenAI 格式接口/v1/images/generations,/v1/chat/completions等。画布助手围绕选中节点进行对话或生图并将结果插回画布。将当前画布选区的上下文如图片、文本作为提示词的一部分发送给 AI 接口。提示词库聚合多个开源项目的提示词缓存在实例内存中供查询。Next.js Route 定时抓取 GitHub 等源的提示词数据前端通过接口查询。本地 Agent通过 MCP 协议让 Codex/Claude Code 等工具操作画布。独立的canvas-agent服务作为 MCP 服务器与 AI 编程客户端和画布前端通信。插件生态提供 Codex App 插件简化 Agent 连接。遵循 Cursor/Claude 等工具的插件规范自动注册并尝试拉起本地 Agent。理解这些模块有助于我们在后续配置和排查问题时快速定位是前端界面、AI接口、还是本地服务出现了异常。2. 环境准备与项目部署我们将选择最通用的 Docker 部署方式它屏蔽了 Node.js 环境差异适合大多数用户。如果你想进行前端代码开发则需准备 Bun/Node.js 环境。2.1 基础环境要求在开始之前请确保你的操作系统Windows/macOS/Linux已安装以下软件Docker 与 Docker Compose这是运行项目的最简单方式。Windows/macOS建议安装 Docker Desktop 。Linux可通过包管理器安装docker和docker-compose-plugin。验证安装打开终端或命令提示符运行docker --version和docker compose version确认版本信息正常输出。一个可用的 OpenAI 兼容 API这是项目运行的核心依赖。你需要准备API 地址例如 OpenAI 官方的https://api.openai.com/v1或任何支持相同接口规范的服务地址。API Key对应服务的有效密钥。注意项目本身不提供 AI 模型它只是一个调用接口的客户端。你可以使用 OpenAI、Azure OpenAI、或任何部署了Stable Diffusion WebUI的--api模式、Midjourney的仿 OpenAI 接口服务等。2.2 通过 Docker 快速部署这是最推荐的方式适合只想快速使用功能的用户。步骤一获取项目代码打开终端克隆项目仓库到本地。git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas步骤二使用 Docker Compose 启动项目根目录下已经提供了docker-compose.yml文件。直接运行以下命令即可构建并启动容器。docker compose up -d-d参数表示在后台运行。首次运行会下载基础镜像并构建项目可能需要几分钟时间请耐心等待。步骤三访问应用容器启动成功后默认会在主机的3000端口提供服务。打开你的浏览器访问http://localhost:3000。 如果端口被占用你可以修改docker-compose.yml文件中的端口映射例如将“3000:3000”改为“8080:3000”然后通过http://localhost:8080访问。步骤四停止与清理如需停止服务在项目目录下运行docker compose down如需彻底删除容器和镜像可以运行docker compose down -v # 删除关联的卷 docker rmi $(docker images “infinite-canvas” -q) # 删除构建的镜像2.3 通过源码运行适用于开发者如果你想修改前端代码或进行二次开发需要从源码运行。前置条件你需要安装 Bun 运行时。Bun 是一个更快的 JavaScript 运行时项目使用它作为包管理器和开发服务器。安装 Bun根据官网指引安装。进入前端目录并安装依赖cd infinite-canvas/web bun install这个过程会下载所有必要的 npm 包。启动开发服务器bun run dev终端会输出类似 Ready on http://localhost:3000的信息。访问应用同样在浏览器中打开http://localhost:3000。注意源码运行模式默认使用开发环境配置并且 AI 相关配置如 API Key同样需要后续在浏览器界面中设置。它与 Docker 运行的主要区别在于热重载和便于代码调试。3. 核心功能配置与使用详解成功访问http://localhost:3000后你会看到一个简洁的界面。首次使用最关键的一步是配置 AI 接口。3.1 配置 AI 接口API Key 与 Base URL这是整个项目能进行 AI 创作的基础。点击页面右上角的设置齿轮图标按钮。找到配置项在设置面板中找到与 AI 接口相关的配置区域。通常命名为“AI 设置”、“API 配置”或“模型设置”。填写关键信息Base URL填入你的 OpenAI 兼容 API 地址。例如OpenAI 官方https://api.openai.com/v1本地 Stable Diffusion WebUI (--api)http://127.0.0.1:7860(注意WebUI 的接口路径可能需要额外配置确保其兼容 OpenAI 格式)其他中转服务请参照服务商提供的地址。API Key填入对应服务的 API 密钥。保存并测试保存配置后通常可以在界面的聊天或生图区域进行简单测试例如发送一句“你好”看是否能收到 AI 的回复以验证连接是否成功。常见配置问题与排查问题现象可能原因检查与解决方式生图或对话一直失败提示“Network Error”或超时。1. Base URL 填写错误。2. 网络无法访问该地址如本地服务未启动。3. API Key 无效或余额不足。1. 在浏览器中直接访问{BaseURL}/models看是否能返回模型列表需携带正确 Header。2. 检查本地服务如 SD WebUI是否已启动并开启了--api选项。3. 前往 API 服务商后台检查 Key 状态和余额。接口返回 401/403 错误。API Key 错误、过期或没有相应权限。重新生成一个有效的 API Key 并替换。确保该 Key 拥有调用所需模型如dall-e-3,gpt-4的权限。生图成功但画布上不显示图片。可能是图片下载或浏览器内容安全策略问题。打开浏览器开发者工具F12的“网络(Network)”和“控制台(Console)”标签页查看是否有跨域错误或图片加载失败。3.2 探索无限画布你的视觉工作台配置好 API 后就可以开始使用核心功能了。点击“新建画布”或进入默认画布。添加节点在画布空白处右键或使用工具栏可以添加“文本节点”、“图片节点”、“AI 生成节点”等。操作节点拖拽移动位置使用鼠标滚轮或工具栏按钮缩放画布选中节点后拖动边缘可以调整大小。建立关联选中一个节点其边缘会出现连接点拖动连接点到另一个节点即可建立一条连线。这可以用来表示“提示词 - 生成图”或“草图 - 变体”等关系。画布助手选中一个或多个节点后侧边栏或右键菜单会出现“画布助手”选项。你可以让它“根据选中的图片生成描述”、“优化这段提示词”或“基于这些内容生成新图”。生成的结果会自动作为新节点插入画布并与原节点连线。提示词库在生图或对话时通常有一个“提示词库”或“灵感”按钮。点击后可以浏览项目内置或从开源项目抓取的提示词模板一键应用或进行修改。画布使用技巧使用Ctrl/Cmd Z/Y进行撤销和重做。利用“小地图”快速导航大画布。定期使用“导出”功能备份你的画布项目通常是 JSON 格式防止浏览器数据丢失。将常用的元素如公司 Logo、风格关键词保存为“素材”方便在不同画布中复用。3.3 配置与使用本地 Canvas Agent这是infinite-canvas更进阶的功能能让 AI 编程助手直接操作你的画布。工作原理Canvas Agent是一个本地运行的服务它实现了MCP协议。当你在Codex或Claude Code中安装对应插件后这些 AI 助手就能通过 MCP 调用Canvas Agent提供的“工具”例如“在画布上添加一个文本节点”、“获取当前画布内容”等。部署步骤确保画布前端运行你的infinite-canvas前端服务Docker 或源码运行需要正在运行并且你能正常访问。启动 Canvas Agent在项目根目录下运行以下命令启动 Agent 服务。# 进入 agent 目录 cd canvas-agent # 安装依赖并启动 npm install npm start # 或者使用 bun bun install bun start启动后Agent 会监听一个本地端口如3001并输出日志。在 AI 编程工具中配置对于 Cursor/Claude Code通常需要在设置中找到 MCP 服务器配置。添加一个新的 MCP 服务器地址填写http://localhost:3001具体端口以 Agent 启动日志为准。使用官方插件项目提供了Codex app插件安装后可能会自动完成上述配置。开始使用配置成功后在你的 AI 编程工具中你可以尝试输入指令例如“帮我在我的无限画布上创建一个关于‘星空咖啡馆’的思维导图节点”AI 助手就能通过 Agent 在画布上执行操作。Agent 常见问题连接失败检查 Agent 服务是否成功启动防火墙是否阻止了端口通信以及 AI 编程工具中的 MCP 服务器地址是否正确。操作无响应确认画布前端地址是否在 Agent 的配置范围内通常需要配置CANVAS_URL环境变量指向你的前端地址如http://localhost:3000。4. 生产环境考量与最佳实践目前项目处于活跃开发阶段作者也明确指出“不建议直接公网多人共用”。但对于个人希望更稳定地使用或小团队内部试用可以参考以下建议。4.1 数据持久化告别浏览器本地存储默认数据存在浏览器本地清除缓存或换设备就会丢失。有几种提升方案连接外部数据库项目代码中可能预留了数据库连接配置查看.env.example文件。你可以通过环境变量配置 PostgreSQL 或 MySQL 数据库让画布和素材数据存入后端数据库。这需要你具有一定的后端部署和数据库管理能力。定期手动导出备份养成习惯在完成重要阶段后使用画布的“导出”功能将项目保存为 JSON 文件到本地硬盘或网盘。使用浏览器同步功能如果仅在个人设备间同步可以依赖 Chrome/Firefox 的浏览器账号同步功能同步本地存储数据但这并非百分百可靠。4.2 安全与隐私API Key 安全前端直接调用 API 意味着你的 API Key 会在浏览器中处理。虽然不发送到项目方的服务器但如果你将部署的实例公开到公网任何能访问你网站的人理论上都可能通过浏览器开发者工具窃取 Key。因此绝对不要将配置了高额度 API Key 的实例公开暴露。仅用于本地或受信任的私有网络。镜像源与依赖安全在 Docker 构建或bun install时确保网络环境安全避免依赖包被篡改。可以考虑使用安全的私有镜像源。4.3 性能优化画布节点数量当单个画布内节点过多如数百个高清图片节点时浏览器内存占用会升高操作可能变卡顿。建议按主题或阶段拆分成多个画布项目。图片素材管理生成的图片默认以 Base64 或 Blob 形式存储在浏览器中。大量图片会显著增加存储压力。考虑将项目配置为将生成的图片上传到你自己的图床或对象存储如果项目支持该功能画布内只保存链接。提示词库缓存提示词库数据缓存在内存中重启服务会丢失。如果提示词库对你很重要可以研究其抓取逻辑考虑将其改为持久化到数据库或文件。4.4 自定义与扩展修改前端界面前端代码在web/目录下使用 React TypeScript。你可以修改 UI、添加新类型的节点或定制工作流。集成自有模型只要模型服务提供 OpenAI 兼容的 API 接口就可以通过修改Base URL接入。你需要确保该接口支持项目调用的端点如/v1/chat/completions,/v1/images/generations。开发自定义 Agent 工具如果你熟悉 MCP 协议可以扩展canvas-agent为其增加新的“工具”让 AI 助手能执行更复杂的画布操作。5. 常见问题排查清单遇到问题时可以按照以下清单逐步排查。阶段问题排查步骤部署访问localhost:3000失败。1. 运行docker ps查看容器是否在运行。2. 检查docker compose logs查看启动日志是否有错误。3. 确认主机 3000 端口未被其他程序占用。API 配置AI 功能全部无法使用。1. 检查设置中的 Base URL 和 API Key 是否正确填写无多余空格。2. 打开浏览器开发者工具“网络(Network)”标签查看 AI 请求是否发出、状态码和响应内容是什么。3. 使用curl或 Postman 直接测试你的 API 地址和 Key 是否有效。画布操作画布卡顿、节点无法拖动。1. 检查浏览器控制台是否有 JavaScript 错误。2. 尝试减少画布上的节点数量特别是图片节点。3. 清除浏览器缓存或尝试无痕模式。图片生成生图成功但画布不显示。1. 查看网络请求图片 URL 是否可访问。2. 检查图片 URL 是否因跨域策略被浏览器阻止。3. 尝试右键“在新标签页打开图片”看是否能加载。本地 AgentAI 编程工具无法连接 Agent。1. 确认canvas-agent服务已启动且无报错。2. 确认 AI 工具中配置的 MCP 服务器地址和端口与 Agent 日志一致。3. 检查防火墙设置确保端口可访问。数据丢失刷新页面后画布内容消失。1. 确认是否使用了浏览器“无痕模式”该模式关闭后本地存储会被清除。2. 检查是否手动清除了浏览器站点数据。3.立即养成导出备份的习惯。infinite-canvas项目为 AI 视觉创作提供了一个富有想象力的新范式。它不仅仅是一个 AI 生图工具更是一个将构思、生成、编辑、管理串联起来的可视化工作空间。通过本地部署你可以完全掌控自己的数据和创作流程避免云端服务的限制与隐私担忧。对于初学者建议从配置一个简单的 AI 接口开始熟悉画布的基本操作和提示词库的使用。对于进阶用户可以深入探索本地 Agent 的集成尝试用自然语言指令来驱动复杂的画布编排这或许能开启人机协同创作的新思路。项目的开源特性也意味着你可以根据自己的需求进行定制无论是修改界面、接入自研模型还是扩展新的节点类型都拥有充分的自由度。记住在享受其便利的同时务必关注数据持久化和 API Key 安全让你的创作之旅既高效又安心。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度