An open-source, node-based AI creation canvas — chain text, image, and video models from 11 providers on an infinite canvas
Features • Quick Start • Walkthrough • Desktop App • Deployment
Text, image, and video AI capabilities — one key unlocks everything
Paste the key in "Settings → Huobao Quick Setup" to configure all 11 providers in one click
Huobao Canvas is an open-source, node-based AI creation canvas. Place text / image / video nodes on an infinite canvas and wire them together — upstream outputs flow into downstream inputs. Text-to-image, image-to-video, reference-to-video: mix and match models freely.
- 🎨 Canvas as workflow: four node types + typed connection rules — your creation pipeline, visualized
- 🧩 Official formats built-in: native request/response adapters for 11 providers — just add your key
- 🔑 BYOK: keys stay in your browser; on self-hosted deployments they mirror to the server automatically
- 📦 Three deployment shapes: single Docker image / Electron desktop / plain web dev — same codebase
apps/web/ — Vue 3.5 + Vite 5 + Vue Flow + Naive UI + Pinia + vue-i18n + Tailwind
apps/server/ — Zero-dependency Node server (node:sqlite + built-in fetch): canvas storage + run queue
apps/desktop/ — Electron shell (utilityProcess embeds the server; esbuild + electron-builder → dmg/exe)
docker/ — All-in-one single image (frontend build + server bundle, amd64/arm64)
- ✅ Text / image / video / group nodes — wire up your creation pipeline visually
- ✅ Upstream outputs auto-inject downstream: text-to-image → image-to-video → reference-to-video
- ✅ Typed connection rules + drop-point menu on drag-out prevents invalid wiring
- ✅ Undo / redo, auto-layout, box selection, zoom — a complete editing experience
OpenAI, Anthropic, Gemini, Qwen, Volcengine, DeepSeek, MiniMax, Moonshot, Zhipu, Vidu, Xiaomi MiMo
| Type | Notable Models |
|---|---|
| Chat | GPT, Claude, Gemini, Qwen3, DeepSeek, Kimi, GLM, MiMo |
| Image | GPT Image 1.5/2, Gemini Image, Doubao Seedream, Wan |
| Video | Wan 2.7/3.0 (t2v/i2v/reference), Seedance, Vidu, MiniMax |
- ✅ Per-provider official auth (Bearer / x-api-key / x-goog-api-key / Token) and payload formats
- ✅ Dual-endpoint models (e.g. GPT Image text-to-image / image-edit): switch generation mode in-canvas, connected references detected automatically
- ✅ Settings page: per-provider keys, connectivity tests, model toggles, custom models
- ✅ Model calls execute on the server — refresh or switch browsers, tasks survive
- ✅ Async video tasks polled server-side (2-hour budget) — let long renders run
- ✅ Canvas data in SQLite — every browser on the same deployment sees the same canvas
简体中文 / English / 日本語 / 한국어 — switch right in the UI.
- Official direct (default): talk to providers in their native formats, works standalone
- Gateway mode: plug into any OpenAI-compatible gateway (e.g. Huobao) — one key for everything
Download from Releases (overseas) · China mirror direct links (Tencent Cloud, no proxy needed, same files):
macOS arm64 .dmg · macOS Intel .dmg · Windows .exe
| Platform | File |
|---|---|
| macOS Apple Silicon | HuobaoCanvas-<version>-arm64.dmg |
| macOS Intel | HuobaoCanvas-<version>.dmg |
| Windows x64 | HuobaoCanvas.Setup.<version>.exe |
Users in China should prefer the mirror; the in-app updater likewise tries the China source (Tencent COS) first, falling back to GitHub.
- Double-click install, works out of the box: embedded server + SQLite, data lives in the user directory — uninstalling keeps your data
- Unsigned macOS builds: right-click → Open on first launch, or run
xattr -cr /Applications/HuobaoCanvas.app - Unsigned Windows builds: SmartScreen → "More info → Run anyway"
docker run -d -p 8080:16812 -v canvas-data:/app/data huobao/huobao-canvas:latest
# Open http://localhost:8080Multi-arch image (linux/amd64 + linux/arm64, works on Linux servers / Windows / macOS) on Docker Hub — pin a version with its tag (e.g. huobao/huobao-canvas:1.0.0). Or use compose (Watchtower auto-updates daily):
cp .env.example .env # edit WATCHTOWER_TOKEN as needed
docker compose up -dgit clone https://github.com/chatfire-AI/huobao-canvas.git
cd huobao-canvas/apps/web
pnpm install && pnpm dev # http://localhost:8022For canvas persistence and the server-side run queue during local dev, run
pnpm -C apps/server devin another terminal (Node ≥ 22.13).
Open the page → "Settings" (top right):
- Huobao Quick Setup (recommended): paste a Huobao API Key (get one at api.firemux.com) — one click writes keys and gateway URLs for all 11 providers
- Manual setup: enter each provider's official API key, with connectivity tests
Keys stay in browser localStorage by default; on self-hosted deployments they mirror to the server automatically (switch browsers seamlessly).
From an empty canvas to text-to-image, image-to-video, and reference-based editing — five steps.
Drag text / image / video nodes in from the left, then wire them from the + handle on a node's edge — upstream output becomes downstream input automatically. Text → image → image edit → video: one canvas, one production line. Undo / redo / auto-layout live top-left; the minimap bottom-right navigates large graphs.
Select a node and the Prompt Dock opens at the bottom: connected assets appear automatically in the reference strip (图1, 图2…), and typing @ mentions a specific asset in your prompt. Wiring is all it takes — no manual uploads.
Paste your API Key into "Huobao Quick Setup" to configure all 11 providers in one click; or fill in official keys provider-by-provider under "Official Direct" — every entry supports a connectivity test.
Wire an image node into a video node, write the prompt in the Dock (e.g. "laughing happily"), press Enter. Async video tasks run in the server-side queue with automatic polling — refresh the page or close the browser, the task still finishes.
Click the model name at the bottom of the Dock to switch: grouped by provider, with search. Dual-endpoint models (e.g. GPT Image text-to-image / image-edit) also get a generation-mode chip — when a reference image is connected, the correct mode is selected automatically at run time.
cd apps/desktop
pnpm dist # macOS dmg (arm64 + Intel)
pnpm dist:win # Windows NSIS installer (cross-builds from macOS)Artifacts land in apps/desktop/release/. User data: ~/Library/Application Support/HuobaoCanvas/ (SQLite + generated result files).
The desktop app ships with an updater (macOS directory swap / Windows silent install, local sha256 verification). Release flow:
# 1. Bump version in apps/desktop/package.json, then build
pnpm dist && pnpm dist:win
# 2. Generate release/latest.json (sha256 of every artifact)
pnpm feed
# 3. Upload latest.json + installers + zips to a GitHub Release (tag like v1.0.1)Clients check for updates on launch (override the feed URL with the CANVAS_UPDATE_FEED env var).
One-liner (prebuilt image):
docker run -d --name huobao-canvas \
-p 8080:16812 \
-v canvas-data:/app/data \
huobao/huobao-canvas:latest- Version tags:
latesttracks the newest build; pin a release withhuobao/huobao-canvas:1.0.0(kept in sync with GitHub Releases) - Multi-arch:
linux/amd64+linux/arm64— x86 servers, ARM servers, Windows, macOS - Persistence: named volume
canvas-data(SQLite canvas / key mirror / run queue / generated files) — image updates keep your data
Build from source (no prebuilt image):
git clone https://github.com/chatfire-AI/huobao-canvas.git && cd huobao-canvas
docker build -t huobao-canvas:local .
docker run -d -p 8080:16812 -v canvas-data:/app/data huobao-canvas:localdocker compose (app + Watchtower daily auto-updates):
# No need to clone the repo — two files are enough
curl -O https://raw.githubusercontent.com/chatfire-AI/huobao-canvas/master/docker-compose.yml
curl -O https://raw.githubusercontent.com/chatfire-AI/huobao-canvas/master/.env.example
mv .env.example .env # change WATCHTOWER_TOKEN (required in production)
docker compose up -d # http://localhost:8080Watchtower checks daily and rebuilds the container when a new latest image lands on Docker Hub (--label-enable updates only this app, --cleanup prunes old images). Don't want auto-updates? Remove the watchtower service and update manually with docker compose pull && docker compose up -d.
| Variable | Default | Description |
|---|---|---|
UPSTREAM |
https://api.firemux.com |
Default inference gateway (users can still override in Settings) |
API_BASE_URL |
empty | Browser-side request base URL; empty = same origin (recommended, avoids CORS) |
WATCHTOWER_TOKEN |
please-change-me |
Watchtower HTTP API token — change it in production |
HUOBAO_VERSION |
dev |
Version injected at build time (set it when publishing images; used by "About Updates") |
PORT |
16812 |
In-container listen port (leave as is; if changed, adjust the -p mapping too) |
| Variable | Default | Description |
|---|---|---|
VITE_API_BASE_URL |
https://api.firemux.com |
Inference endpoint (any OpenAI-compatible gateway) |
VITE_UPSTREAM |
https://api.firemux.com |
Dev-server proxy target |
See docs/configuration.md and docs/architecture.md for details.
- Frontend: Vue 3.5 + Vite 5 + Vue Flow (infinite canvas) + Naive UI + Pinia + vue-i18n + Tailwind
- Server: Node ≥ 22.13, zero npm dependencies (node:sqlite + built-in fetch) — reuses the frontend's provider adapters directly
- Desktop: Electron (utilityProcess hosts the server, BrowserWindow loads same-origin) + esbuild + electron-builder
- Deployment: single multi-stage Dockerfile — frontend build + server bundle in one image
First stable release after the v2 rewrite (monorepo + 11 official provider adapters):
- 🎨 New canvas: Vue Flow infinite canvas + four node types + typed connections
- 🖥️ Server-side run queue: tasks survive refresh; async video polled automatically (2h budget)
- 🔑 BYOK: keys in browser storage, auto-mirrored to server on self-hosted deployments
- 🌍 Four-language UI + Electron desktop (in-app updates) + single Docker image (Watchtower auto-updates)
- 🔧 Fixed wan3.0-video "first_frame cannot be combined..." error on canvas (first-frame/reference mutex split)
- 🔧 Fixed silently dropped reference images on dual-endpoint models like GPT Image (new generation-mode switch)
The v1 codebase and docs live on the
legacy/v1branch.
Licensed under CC BY-NC-SA 4.0 (Attribution-NonCommercial-ShareAlike 4.0 International).
- ✅ Free for personal use, learning, and non-commercial projects
- ✅ Modifications and redistribution allowed with attribution under the same license
- ❌ No commercial use — do not use this project, in whole or in part, for any commercial purpose (paid services, commercial deployment, resale) without written permission
Full text in LICENSE.
Issues and Pull Requests are welcome!
- Fork this repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Useful checks:
cd apps/web && pnpm test # provider preset validation + four-language message compilationIf this project helps you, buy the author a coffee ☕ — your support keeps the updates coming!
Scan to join the WeChat group:
"Let AI do the creative work with us"