开源AI创作工作台infinite-canvas：一站式可视化无限画布部署与使用指南

🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Claude 随心用，限时 5 折。 👉 点击领海量免费额度

开源AI创作无限画布infinite-canvas，是一个把素材管理、提示词工程、AI生图、画布编排和智能助手整合在一起的一站式工作台。它不是一个独立的AI模型，而是一个基于Web的前端应用，核心价值在于提供了一个可视化的创作环境，让你能在一个界面里完成从灵感构思、素材整理、AI生成到方案迭代的全过程。

这个项目由开发者 basketikun 开源，目前在GitHub上获得了超过2.6k的Star，热度很高。它的定位非常明确：为AI图片创作提供高效的工作流。你不用再在多个标签页或软件间来回切换——找参考图、写提示词、调用AI接口、保存结果、二次编辑，这些操作都可以在同一个无限大的画布上完成。

对于想尝试AI绘画但觉得流程繁琐的开发者或创作者来说，infinite-canvas的核心吸引力在于其“一体化”和“可视化”。它支持文生图、图生图、参考图编辑，甚至集成了对话助手和本地Agent，可以直接在画布上与AI协作。更重要的是，它完全兼容OpenAI的API生态，这意味着你可以接入任何支持OpenAI格式的AI服务，无论是官方的API，还是各类开源模型部署后提供的兼容接口，甚至是社区提供的免费中转服务，灵活性极高。

本文将带你快速上手infinite-canvas，从环境部署、服务启动、API配置，到核心的无限画布操作、AI生图测试、提示词库使用，以及如何利用本地Agent进行自动化创作。我们重点关注它的实际部署门槛、功能集成度、以及作为工作台是否能真正提升创作效率。

1. 核心能力速览

在深入部署和操作之前，我们先通过一个表格快速了解infinite-canvas的核心规格和能力边界，帮助你判断它是否适合你的需求。

从表格可以看出，infinite-canvas最大的特点是低门槛和高集成度。它对用户本地的硬件几乎没有要求，真正的计算压力转移到了你配置的AI服务上。这使其非常适合那些已经拥有或可以访问稳定AI API（如Midjourney API、Stable Diffusion API服务、或各类开源模型中转服务）的创作者，用于构建一个专属的、可定制化的创作中心。

2. 适用场景与使用边界

在决定投入时间部署和使用前，明确它的适用场景和限制至关重要。

它非常适合以下人群和场景：

1. AI绘画流程优化者：厌倦了在Discord、WebUI、PS、文件管理器之间反复切换，希望有一个统一界面管理整个创作流程。
2. 视觉方案探索者：需要快速生成大量草图或变体，并在一个画布上对比、组合、迭代，例如UI/UX设计、概念艺术、营销素材创作。
3. 提示词工程师：需要系统地管理、测试和复用不同风格的提示词，infinite-canvas内置的提示词库和画布节点化操作非常适合这一点。
4. 希望集成AI到工作流的开发者：项目提供了本地Agent和MCP支持，允许像Codex这样的AI编码助手直接操作画布，为实现自动化创作流程提供了可能。
5. 追求数据隐私的个人/小团队：由于可以完全本地部署，且数据默认存储在浏览器本地，对于不希望创作过程和素材上传到第三方云服务的用户来说是一个安全的选择。

它可能不适合或需要注意的边界：

1. 非“开箱即用”的AI生成器：它本身不包含任何AI模型。你必须自己准备一个可用的、支持OpenAI兼容接口的AI服务（如图像生成、对话大模型），并正确配置API密钥和地址。这对于不熟悉API调用的纯新手有一定门槛。
2. 高并发生产环境：项目README明确提示，当前处于开发阶段，数据结构和存储格式可能变动，不建议直接用于公网多人共用。它更偏向于个人或小范围的内部工具。
3. 复杂的图像精修：虽然支持参考图编辑（图生图），但其图像处理能力取决于后端AI服务的功能。对于需要复杂图层、蒙版、笔刷操作的专业级修图，仍需依赖Photoshop等专业软件。
4. 版权与合规性：使用AI生成内容时，必须遵守相关法律法规和平台政策。确保你使用的后端AI服务合法合规，并对生成的内容（尤其是涉及肖像、商标、特定风格）拥有相应的使用权。项目本身是工具，不承担内容合规责任。

安全与合规提醒：

• 素材来源：上传至画布的参考图、素材，请确保你拥有相应的版权或使用权。
• AI服务合规：你配置的AI API服务应来自合法合规的渠道，遵守其服务条款，不用于生成违法、侵权或不良内容。
• 数据备份：由于数据默认存储在浏览器本地，清除浏览器数据可能导致丢失。重要项目务必定期使用画布的导出功能进行备份。

3. 环境准备与前置条件

部署infinite-canvas本身非常简单，核心在于准备好可用的AI服务环境。以下是部署前需要确认的事项清单。

1. 基础运行环境：

• 操作系统：Windows 10/11, macOS, 或 Linux (如Ubuntu) 均可。项目通过Docker或Node.js运行，跨平台兼容性好。
• Node.js环境 (可选)：如果你选择从源码运行开发服务器，需要安装Node.js (推荐LTS版本) 和包管理器Bun或npm/yarn。从网络材料看，项目推荐使用Bun。
• Docker环境 (推荐)：如果希望环境隔离、部署简单，强烈推荐安装Docker和Docker Compose。这是最通用且不易出错的方式。
• Git：用于克隆代码仓库。

2. 核心依赖：可用的AI API服务这是最关键的一步。infinite-canvas需要至少一个支持OpenAI兼容接口的后端服务。你有多种选择：

• 商业API：如OpenAI的DALL-E API、Midjourney API（如果提供兼容接口）。
• 开源模型自建服务：在本地或云服务器上部署Stable Diffusion WebUI (配--api参数)、ComfyUI (通过comfy-api等扩展)、或其他任何能提供类似/v1/images/generations或/v1/chat/completions接口的服务。
• 第三方中转/聚合API：网络上一些项目提供了将不同模型封装成OpenAI格式的服务，例如材料中提到的chatgpt2api、grok2api、flow2api、newapi等。使用这类服务时，请务必确认其可靠性、稳定性和隐私政策。

你需要准备好：

• API Base URL：你的AI服务的地址，例如http://localhost:7860/v1(Stable Diffusion WebUI) 或https://api.openai.com/v1。
• API Key：对应服务的密钥。对于本地部署的开源模型，可能不需要密钥或使用固定字符串。

3. 网络与端口：

• infinite-canvas默认运行在3000端口。确保该端口未被其他程序占用。
• 如果你的AI API服务运行在本地（如localhost:7860），浏览器需要能访问到这个地址。如果infinite-canvas部署在Docker容器内，可能需要配置网络让容器能访问宿主机服务。

4. 磁盘空间：项目本身很小，但生成的图片、缓存的数据会占用浏览器本地存储空间。确保有足够的磁盘空间。

4. 安装部署与启动方式

提供了从简单到灵活的多种部署方式，你可以根据自身情况选择。

4.1 方式一：Docker快速启动（最推荐）

Docker方式能避免环境依赖问题，是最简单快捷的启动方法。

1. 克隆仓库：

   git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas

2. 构建并运行Docker镜像： 项目根目录已提供了Dockerfile。执行以下命令构建镜像并运行容器：

   # 构建Docker镜像 (镜像名可自定义，如 infinite-canvas) docker build -t infinite-canvas . # 运行容器，将容器内3000端口映射到宿主机的3000端口 docker run --rm -p 3000:3000 infinite-canvas

   命令执行后，如果看到类似输出，说明服务已启动：

   > infinite-canvas@0.4.0 start > next start ▲ Next.js 14.2.5 - Local: http://localhost:3000

3. 访问服务： 打开浏览器，访问http://localhost:3000。你应该能看到infinite-canvas的界面。

4.2 方式二：本地开发模式运行

如果你需要修改代码或进行二次开发，可以选择此方式。

1. 克隆仓库并进入前端目录：

   git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas cd web # 核心前端代码在web目录下

2. 安装依赖并启动： 项目推荐使用Bun作为包管理器。如果你没有安装Bun，需要先安装它，或者使用npm/yarn。

   # 使用Bun (推荐) bun install bun run dev # 或使用npm npm install npm run dev # 或使用yarn yarn install yarn dev

3. 访问服务： 开发服务器启动后，同样访问http://localhost:3000。

4.3 方式三：一键部署到Vercel（免服务器）

对于想快速体验且不介意使用云服务的用户，可以直接将项目导入Vercel。

1. 访问 Vercel官网 并登录（支持GitHub账号登录）。
2. 点击“Add New...” -> “Project”。
3. 导入你的GitHub仓库basketikun/infinite-canvas。
4. 在配置页面，构建命令和输出目录通常会自动识别（根目录有vercel.json配置）。直接点击“Deploy”即可。
5. 部署完成后，你会获得一个*.vercel.app的域名，通过该域名即可访问你的infinite-canvas实例。

注意：Vercel部署是Serverless的，你的画布数据默认仍存储在访问者的浏览器本地，而不是Vercel服务器上。这意味着在不同设备或浏览器间数据不互通。

5. 首次配置与API连接

成功启动服务并打开页面后，第一件事就是配置AI服务，否则大部分功能无法使用。

1. 进入配置页面： 点击页面右上角的设置图标（通常是一个齿轮或用户头像），找到“系统设置”或“API配置”相关入口。

2. 配置AI服务： 你需要填写两个核心信息：

   • Base URL：你的OpenAI兼容API的基础地址。例如：
     • 本地Stable Diffusion WebUI:http://127.0.0.1:7860/v1
     • 本地ComfyUI API:http://127.0.0.1:8188
     • 第三方服务:https://api.example.com/v1
   • API Key：对应服务的密钥。对于很多本地开源服务，可以填写任意非空字符串，如sk-demo。

3. 使用“New API自动配置”链接（可选）： 如果你使用的服务支持一种特定的配置链接格式，可以在设置中找到“添加聊天设置”的地方，直接填入如下格式的链接：

   https://canvas.best?apiKey=你的API_KEY&baseUrl=你的BASE_URL

   访问此链接（或将canvas.best替换为你自己的部署地址）后，页面会自动弹出配置弹窗并填充信息。这是一个便捷的分享配置方式。

4. 测试连接： 配置保存后，尝试在画布上使用“对话助手”或“文生图”功能。如果能正常收到AI的回复或生成图片，说明配置成功。

6. 核心功能测试与效果验证

配置好API后，我们就可以深入测试infinite-canvas的各项核心功能了。我们将按照一个典型的创作流程来验证。

6.1 功能一：无限画布与节点操作

这是项目的基石，所有创作都在这个画布上进行。

测试目的：验证画布的基本交互能力，包括创建、编辑、组织节点。操作步骤：

1. 进入主界面，默认会有一个空白画布。你可以通过鼠标滚轮缩放，拖拽画布背景移动视角。
2. 创建节点：在画布空白处右键，或使用快捷键，选择创建不同类型的节点，如“文本节点”、“图像节点”、“AI生成节点”。
3. 编辑节点：点击节点，右侧或下方会出现属性面板，可以编辑节点的内容（如文本）、样式、关联的AI参数等。
4. 连接节点：从一个节点的输出锚点拖拽到另一个节点的输入锚点，可以建立节点间的逻辑关系。例如，将一个“提示词”文本节点的输出连接到“文生图”节点的输入。
5. 画布管理：测试创建多个画布项目、使用小地图导航、撤销/重做操作、导入/导出画布（通常为JSON格式）。

预期结果与成功标准：

• 能够流畅地缩放、拖动画布。
• 可以成功创建、移动、删除各类节点。
• 节点之间的连线操作正常，连线能清晰表达数据流向。
• 画布的导入导出功能能正确保存和恢复工作状态。

6.2 功能二：AI文生图与提示词库

这是最常用的AI创作功能。

测试目的：验证通过配置的API进行文生图，并利用内置提示词库提升效率。操作步骤：

1. 创建生成节点：在画布上添加一个“AI图像生成”节点（可能命名为“文生图”、“Generate Image”等）。
2. 编写提示词：
   • 手动输入：在节点的“Prompt”输入框中直接编写描述，如“a beautiful sunset over a mountain lake, digital art”。
   • 使用提示词库：点击提示词输入框旁的按钮（或从侧边栏打开提示词库）。提示词库会从多个GitHub开源项目抓取并缓存了大量分类提示词。你可以浏览、搜索，并点击插入到当前输入框。
3. 设置参数：配置生成参数，如模型选择（取决于后端API）、图片尺寸、生成数量、采样步数等。
4. 执行生成：点击节点上的“生成”或“运行”按钮。节点状态会变化，生成完成后，图片会显示在节点上或作为输出。

预期结果与成功标准：

• 提示词库能够正常加载并显示分类和内容。
• 点击生成后，能收到来自后端API的响应，并在合理时间内（取决于API速度）在画布上看到生成的图片。
• 生成的图片质量符合后端AI模型的能力预期。

6.3 功能三：图生图与参考图编辑

基于现有图片进行迭代创作。

测试目的：验证上传参考图并以此为基础进行AI再创作的功能。操作步骤：

1. 上传参考图：可以将本地图片直接拖拽到画布上，或通过“上传”按钮添加，创建一个图像节点。
2. 创建图生图节点：添加一个“图生图”节点。
3. 连接节点：将图像节点的输出连接到图生图节点的“参考图”输入端口。
4. 设置参数：在图生图节点上，除了输入提示词，还可以设置“重绘强度”、“去噪强度”等参数，控制新图像与参考图的相似度。
5. 执行生成：点击生成，观察输出结果。

预期结果与成功标准：

• 图片上传成功，并能正确显示在画布上。
• 图生图节点能正确接收参考图输入。
• 生成的图片在内容和风格上受到参考图的影响，调整参数能产生可感知的变化。

6.4 功能四：画布助手与对话创作

这是一个集成在画布环境中的AI对话助手。

测试目的：验证在画布上下文中与AI对话，并让AI直接操作画布元素的能力。操作步骤：

1. 在画布上选中一个或多个节点（如一个文本节点包含角色描述，一个图像节点包含风格参考）。
2. 打开“画布助手”面板（可能是一个聊天侧边栏）。
3. 向助手提问，例如：“基于我选中的角色和风格，生成一个场景描述”或“为选中的图片生成三个变体”。
4. 助手会根据选中的节点内容进行理解，并可能直接调用AI生成新的节点（如图片、文本）插入到画布中。

预期结果与成功标准：

• 画布助手能够正确识别当前选中的节点内容。
• 助手给出的回复或执行的操作（如生成新图片）与画布上下文相关。
• 新生成的内容能自动作为节点添加到画布合适的位置。

6.5 功能五：本地Agent与MCP集成（高级功能）

这是实现自动化工作流的关键。

测试目的：验证通过本地Canvas Agent，让外部AI编码助手（如Codex, Claude Code）能读取和操作当前画布。操作步骤：

1. 启动Canvas Agent：根据项目文档（AGENTS.md），在本地运行Canvas Agent服务。这通常是一个独立的进程或服务。
2. 安装Codex App插件：如果你使用Codex App，安装项目提供的插件。插件会自动注册MCP（Model Context Protocol）并尝试连接本地运行的Canvas Agent。
3. 在Codex中操作画布：在Codex中，你可以用自然语言描述对画布的修改，例如：“在画布中央添加一个文本节点，内容为‘Hello World’”，或“将当前画布上所有图片节点的尺寸调整为512x512”。Codex会通过MCP将指令发送给Canvas Agent执行。

预期结果与成功标准：

• Canvas Agent服务能正常启动并与infinite-canvas前端通信。
• Codex插件能成功发现并连接到Agent。
• 在Codex中发出的画布操作指令能实时反映在前端infinite-canvas的界面上。

常见失败原因：

• Canvas Agent未启动或端口被占用。
• MCP配置不正确，Codex无法发现Agent。
• 网络策略阻止了本地进程间的通信。

7. 接口API与批量任务策略

infinite-canvas本身主要提供Web界面，但其设计思想与节点化工作流天然支持“批量”和“自动化”概念。

7.1 作为API消费者

infinite-canvas是一个强大的API消费者前端。你配置的每一个AI生成节点，本质上都是在向你的后端API发送一个结构化的请求。你可以通过编排多个节点，实现复杂的批量或条件生成逻辑。

示例：批量风格测试

1. 创建一个“风格提示词”文本节点，内容为“cinematic lighting, masterpiece”。
2. 创建多个“主题提示词”文本节点，内容分别为“a cat”, “a dog”, “a castle”。
3. 创建一个“文生图”节点。
4. 使用“组合”节点或直接连线，将“风格提示词”和每一个“主题提示词”分别连接到“文生图”节点的提示词输入（可能需要一个连接器节点来合并文本）。
5. 复制多个“文生图”节点，每个对应一个主题。然后依次执行或通过脚本触发。 这样就能批量生成同一风格下不同主题的图片。

7.2 通过Canvas Agent提供API能力

虽然infinite-canvas前端不直接提供REST API供外部调用，但其Canvas Agent组件通过MCP协议暴露了画布的操作接口。这意味着任何支持MCP的AI助手或自动化工具，都可以编程式地操作你的画布。

这为实现自动化批量任务打开了大门。你可以编写一个脚本或使用AI助手，来：

• 读取一个包含大量提示词的CSV文件。
• 对于每一行，通过MCP命令在画布上创建文本节点和图像生成节点，并触发生成。
• 等待生成完成后，通过MCP命令将生成的图片节点内容保存到指定目录。

这是一个高阶用法，需要你熟悉MCP协议和一定的脚本编写能力。项目文档AGENTS.md和canvas-agent目录下的代码是主要的参考资料。

8. 资源占用与性能观察

由于infinite-canvas是纯前端应用，其本身的资源占用非常低，性能主要取决于以下几个方面：

1. 浏览器资源：

   • 内存：复杂的画布（数百个节点、大量高清图片）会占用较多的浏览器内存。建议定期清理不必要的节点或使用画布的分组/图层功能管理大型项目。
   • 本地存储：所有画布数据、图片缓存都保存在浏览器的IndexedDB或LocalStorage中。如果存储空间不足，可能导致保存失败。可以在浏览器开发者工具的“Application”标签页中管理存储。

2. 网络性能：

   • API调用延迟：生成图片的速度完全取决于你配置的后端AI API的响应速度。如果API服务器在国外或网络不佳，会导致生成等待时间很长。
   • 图片加载：画布上显示的图片（尤其是原图）如果来自远程URL或较大，会影响画布滚动的流畅度。

3. 优化建议：

   • 对于本地部署的AI服务，确保infinite-canvas和API服务在同一台机器或局域网内，以减少网络延迟。
   • 如果使用远程API，考虑其稳定性和速率限制。
   • 对于包含大量图片的项目，可以考虑启用画布的“缩略图”模式，或定期将最终成果导出为项目文件备份后，清理画布中的历史中间节点。

9. 常见问题与排查方法

在部署和使用过程中，你可能会遇到以下问题。这里提供通用的排查思路。

10. 最佳实践与使用建议

为了更稳定、高效地使用infinite-canvas，遵循以下实践会大有裨益：

1. 从简单开始：第一次使用时，先配置好一个最简单的文生图流程并跑通。确保基础API连接正常，再尝试复杂的节点连线、图生图、Agent等功能。
2. 建立配置模板：对于常用的生成参数（如固定尺寸、采样器、模型），可以将其保存为节点模板或项目模板，方便在新项目中快速复用。
3. 项目文件管理：将每个独立的创作构思保存为单独的画布项目文件（JSON）。使用清晰的文件命名，并建立专门的目录进行归档管理。
4. 素材与输出管理：虽然画布内可以管理素材，但对于最终成品和重要中间素材，建议定期使用“导出图片”功能保存到本地文件系统，并按项目分类存储。
5. API服务选择：
   • 追求质量与稳定：考虑使用可靠的商业API或自己部署成熟的开源模型（如SDXL）。
   • 追求免费与实验：可以寻找社区提供的免费OpenAI兼容中转API，但需接受其不稳定性、排队和可能的内容限制。
   • 本地化与隐私：在本地机器部署Stable Diffusion WebUI +--api模式，是最能保证隐私和可控性的方案。
6. 版本控制与备份：由于项目处于活跃开发阶段，如果你进行了本地化部署或修改，建议fork原仓库进行维护。在升级版本前，务必备份你的画布项目文件和任何自定义配置。
7. 合规使用：始终对你使用AI生成的内容负责。确保你的提示词和使用的素材不侵犯他人知识产权，生成的内容符合法律法规和公序良俗。

开源AI创作无限画布infinite-canvas解决的核心痛点是AI创作流程的碎片化。它通过一个无限延伸的画布，将灵感记录、素材整理、提示词工程、AI生成、结果编辑和方案迭代无缝衔接起来。对于经常使用AI进行视觉创作的开发者、设计师或爱好者来说，它能显著减少上下文切换，提升创作效率和灵感连续性。

最值得尝试的点在于其极低的部署门槛和高度的可扩展性。你不需要强大的显卡就能运行它，只需要一个能访问的AI API。同时，通过节点化的工作流和MCP Agent支持，它为自动化创作和集成到更复杂的工具链中提供了可能性。

最容易踩的坑是忽略API配置和依赖浏览器本地存储。第一个问题会导致所有AI功能失效；第二个问题则有数据丢失的风险。因此，部署后的第一要务是正确配置API，并在使用中养成定期导出项目备份的习惯。

下一步，你可以探索如何将它与更多的本地AI服务（如本地部署的LLM对话模型、语音模型）结合，或者利用Canvas Agent开发属于自己的自动化创作脚本，真正打造一个围绕在你个人工作流中心的智能创作中枢。

🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Claude 随心用，限时 5 折。 👉 点击领海量免费额度