CR8

CR8 is a design canvas that you and your AI agents work on together, on your own computer. You open a design in your browser and draw, type, place images and generate them; an agent works on the same design at the same time through its own tools. The design is a folder of files in your repository, so it travels with your code and its history lives in Git.

Two workspaces share one project:

• Design is the canvas: artboards, layers, text, images and vectors, with generation built in.
• Flows is where repeatable AI-media recipes live: a graph of steps over image, vector and video models that a person can rerun and edit, and an agent can build and run.

One local process serves both to the browser, speaks MCP to an agent, and answers a JSON command line. Nothing runs in the cloud except the AI media itself: generation runs on hosted models with your CR8 account. Flow outputs stay in the cloud until you add them to Design; every asset used by a design is copied into its project. Your designs never leave your computer.

[!NOTE] CR8 is an invited preview, and it is proprietary software: install it and use it, including for your own commercial work, but do not copy, modify or redistribute it. What you make with it is yours. The terms are in LICENSE.

Install

Already working with an agent in your project? Paste this into that conversation and add what you want to design:

Use CR8 in this project for our design work. Start each session with npx --yes @zvada/cr8@latest --version. Use the returned version in npx --yes @zvada/cr8@VERSION for this session's commands: read skills get cr8-design, then its references/start.md and references/cli.md with --path, and check projects --workspace .. Keep the latest lookup in saved project instructions. Continue our design brief, or ask what I want to make if it is unclear. Show me the editable canvas so we can refine it together.

The agent gets the latest release when a work session starts, reads that release's bundled instructions, checks for existing designs, and creates or opens the right local file under your project. It starts CR8 in the background when needed and gives you the canvas link. You stay in the same agent conversation; no MCP registration, agent restart or separate skill installation is required. Your agent needs terminal access on your computer and Node.js 20.19 or newer. Local editing needs no CR8 account.

The anonymous account-hub /install page provides Copy prompt for your agent before sign-in or the questionnaire. MCP connection is optional: use it when you want the host to discover CR8's tools in future sessions. See optional MCP setup.

Optional global command. The npx route above downloads the package on demand. If you want a shorter cr8 command in your terminal:

npm install -g @zvada/cr8

The full install guide covers MCP, updates and source builds. The optional desktop app bundles its runtime, but GitHub downloads currently require access to the private repository.

The optional desktop app. It is a window around the same local process and includes its own CLI and agent launcher. Current installers are private, and macOS release signing has been skipped; there is no public signed desktop download to recommend yet. If you have an internal build, use its onboarding or Settings → Agents · MCP without installing another npm copy. See the desktop guide.

From source. With Git and Node.js:

git clone https://github.com/zvadaadam/baby-canva.git "$HOME/.cr8"
cd "$HOME/.cr8" && npm ci && npm run build:package
ln -s "$HOME/.cr8/dist/cr8.mjs" /usr/local/bin/cr8      # or: alias cr8='node "$HOME/.cr8/dist/cr8.mjs"'
cr8

The build makes one file, dist/cr8.mjs: the CLI, the MCP server, the browser workspace and the MCP App together.

The full page, with the agent-host details, is docs/user/install.md.

Update

Designs live outside the installation directory. For MCP connections, restart the agent host after updating the server. With the new setup helper, rerun the updated CLI's cr8 setup claude or cr8 setup codex to update its own unchanged registration and check compatibility. Manually pinned MCP entries and plugins must be updated through their installation route; setup preserves externally managed entries. Keep a project backup before a major upgrade: opening a project can migrate its format.

| Installed from | Update with | | --- | --- | | npm | npm install -g @zvada/cr8@latest (or keep using npx @zvada/cr8@latest) | | The desktop app | Replace the internal build and reopen it; its stable agent launcher survives replacement, but the app does not update itself | | Source | cd "$HOME/.cr8" && git pull --ff-only && npm ci && npm run build:package |

Use it

There are four ways in, and they all work on the same running process and the same project, at the same time. Pick the one that fits the moment.

In the browser, as a person

cr8 start designs/first

The browser opens on the canvas. Draw frames, add text and rectangles, drop in images, move and resize with the mouse, nudge with the arrow keys, undo and redo. Artboards are your alternatives: duplicate one to try another direction, and keep the directions side by side. Switch to Flows at the top to build a recipe, run it, and add what it made to the design. Export writes an artboard as a PNG.

When you generate media without valid device access, CR8 asks you to connect your account in the browser. Local editing needs no account.

With an agent

Follow the prompt above to use the CLI in your current project and conversation. The agent reads version-matched skills directly; it does not need to configure itself or install a plugin before designing.

For optional MCP installation, setup saves a user-level connection across projects, preserves other integrations, and checks the installed host using isolated configuration and read-only skill calls. An existing CR8 integration is identified by its installation owner and checked without adopting or changing it. The check establishes host compatibility; it does not prove that a currently open agent session is connected to a canvas. Recheck later with cr8 setup claude --check or cr8 setup codex --check.

The launcher applies the host settings required for MCP 2026-07-28 each time. It leaves shell profiles and global host preferences unchanged. CR8 follows the session's project folder, joins an existing compatible local runtime, or starts one without a design. Desktop users get the same journey through Connect, Check connection, and Copy launch command, using the bundled CLI. See installation guidance for manual settings and recovery.

The agent creates the project, starts the canvas and hands you its URL. You watch and edit in the browser while it works; a host that renders MCP Apps shows the same canvas inline. Four skills ship with CR8: cr8-design for the canvas, cr8-flows for recipes, cr8-media for model selection with dated provider prices and quality limitations, and cr8-feedback for reporting. MCP exposes the same instructions through read_skill, so separate skill installation is optional; cr8 skills install adds host-native discovery. If the source repository becomes public, /plugin marketplace add zvadaadam/baby-canva installs the server and the skills into Claude Code in one step.

The tools and what the agent sees are described in docs/user/mcp.md.

From a terminal or a script

Canvas automation commands answer JSON, so CR8 fits shell scripts and agents without MCP alike. Setup prints human guidance unless --json is requested; agent opens the chosen host's interactive session. Start a server without a browser, then talk to it:

cr8 start designs/first --no-open           # prints the URL, keeps serving
cr8 status --pretty                         # what the project holds
cr8 compose --json '[{"key":"hero","type":"frame","name":"Hero","x":0,"y":0,"width":1280,"height":720,"fill":"#111111"}]'
cr8 doctor                                  # layout, overlap, legibility, clutter
cr8 generate --prompt "A coral disc on cream" --model fast --ratio 16:9 --count 1
cr8 export --root FRAME_ID --out hero.png

Bring references in and check the result against them: cr8 import picture.png --as-frame, cr8 capture https://example.com, cr8 verify --reference picture.png --root FRAME_ID. Build and run a recipe: cr8 workflow-templates, cr8 init designs/directions --kind flow --template TEMPLATE_ID, cr8 open designs/directions, cr8 workflow-run, then cr8 workflow-place --file placement.json to copy a result into a Canvas. cr8 schema prints the whole command contract. The complete guide is docs/user/cli.md.

In the desktop app

First launch offers a skippable questionnaire and optional agent setup, then opens the workspace without creating a file. Create or open a project in Canvas, or launch the app with --workspace DIR --project designs/first. It starts the same local process, or joins one already holding the project. Its dashboard lists local files under Canvas and saved graphs under Flows, with Settings alongside them; returning from the dashboard or Settings preserves the canvas. Settings → Agents · MCP configures and checks a stable bundled launcher for Claude Code or Codex without npm; connections survive desktop restarts. See docs/user/desktop.md.

Your files

Every Canvas and every Flow is an ordinary folder of its own. Commit it like code.

designs/first/          # a Canvas
├── cr8.json          # the design itself, readable and versioned
├── assets/           # images and SVGs, imported or generated, named by their content
├── .gitignore        # ignores .cr8/
└── .cr8/             # disposable: the session, the selection, the lock
designs/directions/     # a Flow
├── cr8.json          # its graph and the input images it owns
├── flow-runs.json    # what it last made, created with its first run
└── assets/

Commit cr8.json, flow-runs.json, assets/ and .gitignore; a clone opens with every design, every flow and what each flow last made. Never commit .cr8/. Keep alternatives as artboards in one project rather than as v2 folders; the rules of thumb are in docs/user/projects.md.

Your account and AI media

Drawing, editing, importing, exporting, the CLI and the agent tools all work without an account. Generating images, vectors, video and image-to-layers runs on hosted models and needs device authorization from your CR8 account. Each browser consent lasts 90 days; shorter tokens renew within that fixed deadline, then you authorize the device again. Credentials live in CR8's home folder, readable by you alone. cr8 connect --open opens authorization from a terminal, and cr8 status shows the connection. An agent never sees your credentials; when generation needs authorization, it hands you the sign-in URL.

cr8 disconnect removes local credentials. Your devices → Revoke access on the account page disables your device remotely; website logout ends only the website session. Revocation stops fresh submissions while already-started provider work can settle. See the authentication contract for token renewal, revocation and reconnect behavior.

Every generation is recorded in the cloud with its model, prompt and parameters, and the result is copied into the project's assets/ before the design may use it. Flow outputs stay in the cloud until Add to Design copies an image or SVG into the project. Clips remain in Flows; cr8 media download writes a job output to a file.

Feedback

When something is broken, confusing or notably good, tell the team. From a terminal:

cr8 feedback --category cli --subject "cr8 export" "export writes a black PNG when the artboard is rotated."

Agents have the same path through the cr8-feedback skill and the canvas_feedback tool, and without the CLI they can report to Hivenet directly with npx --yes [email protected] --to babycanva --category <category> --subject "<exact item>" "<feedback>". Nothing is ever sent automatically, and a report carries no canvas content or ambient context; --dry-run shows the exact event first. A task that failed after real effort goes with --task, --expected and --actual, and becomes a test case for the team. See docs/user/feedback.md.

Documentation

• Install, CLI, MCP and the MCP App, desktop app, projects, feedback, App Store screenshots.
• Architecture, workflows, media API, authentication, releases, and the decisions behind them. The index is docs/README.md.

For developers

Start with the LLP architecture and decision map and the contributor rules. Code uses selective @ref comments to link non-obvious decisions to their source documents; existing architecture decisions stay in place.

A fresh checkout needs Node.js 22 or later (what CI builds with; the published package runs on 20.19 and later) and, for capture, verify, exports and their tests, an installed Chrome or Chromium.

npm run setup                    # the locked dependencies, the package build and the browser the tests drive
npm run dev                      # the runtime behind Vite with hot reload
npm run cli -- status --pretty   # the development CLI entry
npm run typecheck && npm run lint && npm test
npm run build                    # the package, the account hub and the desktop main process
npm run test:install             # pack the npm artifact and install it the way a user would

The product lives in nine private npm workspaces. Each owns its dependencies, configuration and focused tests:

| Package | Owns | | --- | --- | | core | Canonical scene, commands, layout and local protocol | | runtime | Local process, project files, CLI, MCP and media clients | | editor | Browser editor, Flows and embedded MCP App | | desktop | Electron launcher over the local runtime | | account-hub | Cloud account UI, WorkOS and installation grants | | media-api | Cloud generation Worker, providers and output catalog | | contracts | Contracts shared with the Workers | | media-safety | Image and SVG byte validation | | ui | Shared product chrome, buttons, fonts and profile questions |

Run a focused command from the root with npm run test --workspace @cr8/editor, or from inside that package with npm test. Root tests/ holds cross-package integration and installation checks. Root scripts assemble and verify the whole product.

The root remains the published @zvada/cr8 package and plugin: npm run build:package bundles the private workspace source into one dist/cr8.mjs, with no installed runtime dependencies. The account hub has its own build into dist/account; the local editor is loopback-only. See architecture, the package decision, and the release runbook.