Quickstart

1. Install Velloo

npm install -g velloo

pnpm add -g velloo

bun add -g velloo

curl -fsSL https://get.velloo.design/install.sh | bash

2. Initialize your project

Run this from your app’s folder:

cd your-app
velloo init

Press Enter to open the setup page in your browser.

3. Set up in your browser

Follow the setup page to choose where your design lives, what to work on, and which agent to start. Velloo reads your app’s components and theme for you.

Velloo Cloud is optional; you can skip it and keep working locally.

4. Watch your agent in the canvas

Start with your agent opens the canvas on the Agent tab, with the agent already working on that task. It runs on this computer with your own login, and its edits render on the canvas as it makes them. When the design has an app to match, the task opens with setup.

Open without an agent opens the canvas on its own; the Agent tab is there whenever you want it. If no agent CLI is found, install Claude Code or Codex, or give the task to any agent connected to Velloo.

5. Return to Velloo

Next time, run this from your app’s folder:

velloo run

Press o to open the canvas in your browser. Your saved designs are still there; start or resume your agent from the Agent tab.

See it in action

More details

Enable screenshots and exports

Screenshot capture and PNG/PDF export need a browser. Install it when prompted, or run:

velloo browser install

Update Velloo

Get the latest version:

velloo upgrade

In a terminal, velloo init also offers a pending update before the setup page opens.

What initialization does

Init creates a design folder (velloo/ in your repo by default), uses your app’s component library, and imports its theme and fonts. It never changes your app’s source. If the folder already has a design, the page offers to open it or to create another one beside it.

For scripts and agents, velloo init --non-interactive skips the page and takes its answers from flags. Without a terminal, init does this on its own. It then prints the next steps and, for a design task, a prompt to give your agent.

See the initialization reference for all options, or the HTML and htmx guide for HTML apps.

Set Velloo up for your app

In an app, the first task the setup page gives your agent asks it to match your app’s theme and fonts, check that its components render, and propose a design language for you to review on the canvas. Just set Velloo up makes that the whole task, and the canvas opens on the Design language stage with the agent beside it.

To run setup again later, in Claude Code:

/velloo:setup

In any other agent, say “Set Velloo up for my app”. Skip setup when there is no app to match.

App setup and the design workflow →

Use Velloo from another agent

To reach your designs from an agent’s own terminal or editor, tick it on the setup page’s Agents step, or run:

velloo connect

Restart your agent afterward. Connection guide →

Stop or share the canvas

While velloo run is open, press b to leave the canvas running in the background or q to stop it.

Find running canvases:

velloo status

Stop a canvas:

velloo stop

To share a review link:

velloo publish

Choose the boards and access level when prompted. Comments sync back to your local canvas. If you skipped the Cloud step, sign in first with velloo login. Sharing guide →

For more designs, exports, and other commands, see the CLI reference.

Continue with Working with your agent or Design a screen.