A local-first, node-based studio for building and running multi-modal AI generation pipelines. Drag nodes onto a canvas, wire them together, and generate text-to-image, image-to-image, image-to-video, and text-to-video outputs through a clean, dark-themed visual editor. Every result lands in a Library you can preview and save to your machine.
Most AI image/video tools force you into a single fixed flow. Ai-Canvas takes a different approach: it gives you a composable canvas where each step is a node, and the data flows from one node to the next automatically.
What problem it solves
- You can mix and match steps (a prompt writer → an image generator → a video generator → an output) without writing code or gluing together separate web apps.
- You stay in control of your configuration and history: provider settings and generated media live in your browser (localStorage), not on a vendor server.
- It runs end-to-end with no API key at all — a built-in mock mode lets you design and test workflows before connecting a real provider.
- When you do connect a provider, you bring your own endpoint and key (BYOK); nothing is hard-coded to any specific service.
- Visual workflow editor — a ComfyUI-style node graph (React Flow) with a left toolbar to add nodes and a persistent status bar.
- Rich node set — Begin (start), Text generation (turns an idea into a complete image prompt), Text-to-image, Image-to-Image (single or multi-image fusion), Image-to-Video, Text-to-Video, and Output.
- Automatic data flow — run the whole graph or a single node; upstream outputs feed downstream inputs in topological order.
- AI-assisted Image-to-Image — leave the prompt empty and the vision model analyzes the reference image(s) into a structured 5-part prompt (subject · environment · art style · lighting & color · camera), then generates from it.
- Multi-image fusion — connect several image sources into Image-to-Image to blend them into one result.
- Library — every generated image / video is saved to a local gallery, previewable and downloadable.
- Save — download any generated file to your computer from the node or the Library.
- Bring-your-own provider (BYOK) — configure your own LLM / image / video endpoints in Settings. No key? A local mock runs the full pipeline end-to-end.
- Token estimator — a live token estimate in the top bar.
- Framework: Next.js 14 (App Router) + React 18 + TypeScript
- Canvas: React Flow (
@xyflow/react) - Providers: a pluggable abstraction in
lib/providerswith amockimplementation and arealHTTP implementation. Therealclient talks to any service that exposes the standard chat-completions and image-generation endpoints; the vision step reuses the configured vision-capable LLM. - Storage: browser
localStoragefor provider config and generation history (no server database required to use the app). - Optional server database: Prisma 7 + a Neon Postgres adapter, used only when you enable multi-user accounts / server-side config persistence. The app runs fully without it.
- Styling: hand-rolled CSS, dark Swiss-minimal theme (no UI framework).
- Graph model. Each node has typed ports (text, image, video). You connect an output port to a matching input port; the editor enforces type compatibility.
- Topological executor.
lib/run.tssorts the graph (Kahn topological order) and runs nodes sequentially. Each node handler receives its upstream inputs and returns its output, which is passed to the next node. - Provider abstraction. Generation nodes call a provider interface. With no configuration,
the
mockprovider returns placeholder media so the whole flow works offline. With a real provider configured, therealclient issues HTTP requests to your endpoint. - Vision (Image-to-Image). When the prompt is empty, the run calls the vision provider to analyze the reference image(s), produces a structured prompt, and feeds it to the image generator.
- Client-side by default. Provider credentials and history never leave the browser unless you explicitly deploy a server-backed database.
- Node.js 18.17+ (Node 20 LTS recommended)
- npm (bundled with Node)
- A package manager is not required beyond npm.
# 1. Clone the repository
git clone https://github.com/veritasian/Ai-Canvas.git
cd Ai-Canvas
# 2. Install dependencies (this also generates the Prisma client)
npm install
# 3. Start the dev server
npm run devThe app is now available at http://localhost:3000.
No environment variables are required for the steps above. The app boots in mock mode and runs entirely in your browser. See Configuration below to connect a real provider.
| Command | Description |
|---|---|
npm run dev |
Start the Next.js dev server on port 3000 |
npm run build |
Generate the Prisma client and build for production |
npm run start |
Run the production build |
npm run typecheck |
Type-check the project with tsc --noEmit |
npm run db:push |
Push the Prisma schema to your database (optional) |
Ai-Canvas is designed to work with zero server configuration. There are two layers:
Open Settings → Providers in the app and add entries for llm, image, and video.
These are stored in your browser's localStorage and sent with each run. A provider entry has
this shape:
{
"baseUrl": "https://your-provider-host/v1",
"apiKey": "your-api-key",
"model": "the-model-identifier-required-by-your-provider"
}- llm — used by Text generation and (as a vision model) Image-to-Image analysis. Point it
at any service that implements the standard
/chat/completionsendpoint. - image — used by Text-to-image and Image-to-Image.
- video — used by Image-to-Video and Text-to-Video.
With no provider configured, the built-in mock mode runs the entire pipeline with placeholder outputs, so you can design and test workflows immediately.
Environment variables are not needed to run or use the app. They are only relevant if you enable the optional server database / accounts layer. Copy the template and fill values as needed:
cp .env.local.example .env.local| Variable | Required? | Purpose |
|---|---|---|
DATABASE_URL |
Optional | Postgres connection string for the optional accounts layer. |
AUTH_SECRET |
Optional | Session-encryption key; only needed when login is enabled. |
Leave both empty to stay in pure local mode. The app currently ships with auth disabled
(middleware.ts passes every request through), so no login is required.
- Open Studio (the canvas). Click a toolbar button to drop a node onto the grid.
- Wire nodes by dragging from an output port to a matching input port (text → text, image → image, video → video).
- Select a node to edit its settings in the inspector (each generation node has its own prompt field).
- Click Run (top-right) to execute the graph in topological order. The bottom bar shows progress; the top bar shows the token estimate.
- After a run, click Save on any result, or open Library to browse and download everything you have generated.
A typical graph looks like this:
Begin → Text generation → Text-to-image → Image-to-Video → Output
- Text generation turns a short idea into one complete English image prompt, structured as core subject · environment & background · art style · lighting & color · camera & composition. Its output flows downstream as the image prompt.
- Image-to-Image with an empty prompt lets the vision model analyze the reference image(s) and write the prompt for you (visible in the inspector). Set your own prompt to override.
- Multi-image fusion: connect several image sources into Image-to-Image to blend them.
To run Ai-Canvas on your own machine (or any server you control):
npm install
npm run build
npm run startWhat gets installed
- Node.js + npm (see Prerequisites).
- All dependencies from
package.json, including the Prisma client, which is generated automatically by thepostinstallscript.
Things to note
- The
postinstallstep runsprisma generate. This does not require a database connection and works with noDATABASE_URLset. - The database layer is optional. If you do not set
DATABASE_URL, the app still works fully in browser-local mode. - Provider credentials are entered in the app UI and stored in the browser — they are not
read from environment variables. Keep them out of
.env.local. - For real generation you need outbound network access from the server to reach the provider endpoints you configure.
- The dev server defaults to port 3000; override with
npm run dev -- -p <port>.
Ai-Canvas is a standard Next.js app and deploys to any Node host or to Vercel:
- Vercel: import the repository; the build command (
npm run build) and output are detected automatically. No environment variables are required for the core app. - Node host: run
npm run buildthennpm run start. SetDATABASE_URL/AUTH_SECRETin the host environment only if you enable the accounts layer.
app/
studio/page.tsx canvas workflow editor
library/page.tsx generated-media gallery
settings/providers/ API provider configuration (browser-local)
api/run/ executes a submitted graph
api/vision/ image analysis (structured prompt + analysis)
api/upload/ local image upload for Image-to-Image
components/flow/ canvas, nodes, inspector, node definitions
lib/providers/ mock + real provider implementations
lib/run.ts topological executor
lib/history.ts client-side Library history
Contributions are welcome.
- Fork the repository and create a feature branch (
git checkout -b feat/my-change). - Make your changes; run
npm run typecheckandnpm run buildbefore submitting. - Open a Pull Request with a clear description of the change and the motivation.
- For bugs or feature requests, open an Issue and include steps to reproduce, expected behavior, and your environment (OS, Node version).
Please keep the local-first, privacy-respecting design: provider config and history should remain browser-local unless a server feature explicitly requires otherwise.
Released under the MIT License. See the LICENSE file for details.