Velloo

Give your coding agent a place to design.

Velloo is an open-source, local-first canvas for exploring design with your coding agent. Try directions in real components, refine them yourself or with feedback from others, then implement the one you believe in.

Quickstart · Watch the film · Documentation · Contributing · Discussions · velloo.design

Quickstart

npm install -g velloo     # or: pnpm add -g velloo
cd your-app               # or an empty folder, to start something new
velloo init               # wizard: reads your routes, components and theme, connects your agent
velloo run                # starts the canvas on http://localhost:7300

Restart your agent so it picks up the MCP config init wrote. In an app that already exists, the first thing to ask for is setup — once:

"Set up Velloo for this app." (/velloo:setup in Claude Code)

The agent imports your theme and real fonts, gets your own components rendering on the canvas and checks every one of them, then proposes your design language for you to review there. After that, ask for what you came for:

"Use Velloo to explore three genuinely different directions for the billing page. Put them side by side on one board, and show me the canvas before you change any application code."

The agent builds on the canvas and you react to pixels instead of to a diff. For the agent to see its own work, install the optional headless browser once with velloo browser install.

init only creates a design folder and agent configuration; it never changes your app's source. The quickstart guide covers the standalone installer, the wizard's choices, and what to do next; Connect an agent covers every supported agent and manual MCP setup.

Status: early and moving fast. The design-folder format is versioned and migrated by velloo upgrade, but expect rough edges and breaking changes before 1.0. Bug reports and design feedback are very welcome.

Why Velloo

Making things got cheap. Deciding what to make did not.

Exploring alternatives and refining them with feedback is how good design has always worked. What changed is where screens start: in a code editor, with an agent, often before anyone has talked about the design. When the first working interface arrives looking finished, that conversation is easy to skip.

Velloo brings it to the repository and the agent you already use, so it can happen before the code lands.

How it works

The loop the film shows:

1. Explore. One prompt, several directions, composed on the canvas from real components and checked by the agent against its own screenshots.
2. Refine. Pin comments on the one you like. The agent addresses them and replies in the thread, or you tune props and styles yourself.
3. Publish and review (optional). Send a board to Velloo Cloud. Anyone with the link comments in a browser, and their notes return to your canvas.
4. Ship. The agent reads the chosen screen as framework-native output, writes real application code, and compares the running app to the design.

Under the canvas, each screen is a readable JSON tree of components, props, and styles in a folder you own. You see the interface; your agent reads the same structure, which is how it makes precise changes and carries a design into code. Concepts →

Ways to use Velloo

• Start from scratch. No app required. Pick a component library, then design a new product from the sample board or a blank canvas, as the film does. Design a screen →
• Redesign an existing screen. Recreate a route as a faithful baseline, explore alternatives beside it, and compare with the running app. Port an existing page →
• Work from a live page. Capture a public or signed-in page with velloo capture when the starting point is a browser, not a route.
• Act on feedback. Hand the agent the open comments, local or from a published link. Velloo Cloud →
• Implement the chosen design. Turn a screen into code in your app's conventions. From design to code →

For the thinking behind this way of working, read Why I created Velloo.

Works with your stack

It connects over MCP to Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode, Windsurf, and other MCP clients, and runs on macOS, Linux, and Windows. Framework-native, in depth →

Local-first, cloud optional

The local tool is free, complete, account-free, and telemetry-free. The only request it makes on its own is an anonymous, at-most-daily check of the public npm release version (VELLOO_DISABLE_UPDATE_CHECK=1 turns it off).

Velloo Cloud is the opt-in half, behind an explicit velloo login: published boards, review links, comments that return to your canvas, and hosted asset generation. velloo publish uploads what your machine rendered; the cloud never executes your app code. Reviewers need no install, repo access, or paid seat. Plans are on the pricing page.

Documentation

velloo.design/docs has the guides, concepts, and reference: CLI · MCP tools · Design folder · Themes · What's new · FAQ

For how Velloo itself is built, see docs/: the architecture, the MCP surface, writing a framework adapter, and designs kept outside the repo.

Contributing

Contributions are welcome — bug reports, adapters, docs, and design feedback alike. CONTRIBUTING.md covers setup and the checks we expect to be green; AGENTS.md explains the package layout and the architecture invariants before you change anything foundational.

bun install                                 # also builds the snapshot manifest
bun run --cwd packages/canvas build         # build the canvas SPA
bun run velloo init /tmp/velloo-smoke
bun run velloo run /tmp/velloo-smoke        # canvas on :7300
bun run verify                              # typecheck + lint + knip + tests

Good first issues are labelled good first issue.

Community and support

• Questions, ideas, show-and-tell → Discussions
• Bugs and feature requests → open an issue
• Security issues → SECURITY.md — please don't file a public issue
• Ground rules → CODE_OF_CONDUCT.md

License

Velloo is open source under the Apache License 2.0.

The Velloo name and the interlinked-frames mark are trademarks and are not covered by the code license — fork the code freely, but don't ship a derivative under the Velloo name or logo. See TRADEMARK.md.