Velloo documentation
Markdown for LLMs ↗Introduction
A local design canvas for you and your coding agent. Explore real components, refine with your team, and build the direction you choose.
Velloo gives you and your coding agent a shared canvas to decide how your product should look and work. Compose screens from real components, point at what to change, and bring your team into the conversation before implementation.
Your agent, in the canvas
The Agent tab runs Claude Code, Codex or an installed Agent Client Protocol agent on your computer, with your login, settings and subscription. Its edits render on the canvas as it makes them.
Select a component to include it in your message, so “this” means the thing you picked. Respond to the agent’s approval requests in place, compare the result, and ask for the next change. You can also adjust props and styles yourself.
Prefer your terminal? Connect the same agent over MCP with velloo connect.
The Agent tab → · Connect from your terminal →
From a direction to your product
Start from a new idea or an existing app. velloo init opens setup in your browser, reads the app’s components and theme, and lets you choose what to work on. With no app, pick a component library and start from a sample or a blank board.
- Explore. Ask for a screen, several distinct directions, or a complete flow. Compare them side by side at desktop and mobile sizes.
- Refine. Point at a component, leave a note, or change its props and styles. Your agent works from the same design you see.
- Review. Publish a board when another perspective would help. Comments stay pinned to the design and return to your local canvas.
- Implement. Ask your agent to build the chosen direction in your app, then compare the running page with the design at the same viewport.
For an existing interface, you can capture or recreate it first to give the redesign a baseline. Designs describe static screens and states; your app supplies routing, data, handlers and business logic.
Get started → · Working with your agent →
A simple mental model
Pageparent nodeNavigationchildMainchild + parentHeadingchildFormchildButtonselected nodeIndentation shows which components live inside other components. Together they form one reusable tree.
Frames show a screen at useful sizes or in context. A board arranges those frames for review.
A node is a component with props, styles and children. Nodes form a reusable screen. A frame shows that screen at a particular size, and a board arranges frames for review. When several frames use the same screen, one edit updates all of them.
Connect frames with labelled arrows to show a journey, including loading, empty and error states. Core concepts → · Flows →
Native to the app
Velloo supports shadcn/ui with Tailwind, Material UI, Ant Design, Chakra UI, plain React, and HTML or htmx apps. Screens render with your components and theme, and the agent receives structured output in your framework’s styling conventions when it implements them.
Your own React components count too: a private design system, another installed library, or your app’s components/ directory. Velloo discovers them from your source and renders them from your installed copy. Each component is checked; adapted or fallback rendering is reported so you know what you’re reviewing.
Framework-native design → · Your app’s components →
Local first, cloud when people need a link
The local canvas is free, open source and account-free. Designs live as ordinary JSON in your repository or another folder you choose. Keep them in Git to branch and compare changes, or leave them as local files. Your agent uses its own provider under your account.
Velloo Cloud adds browser review links, access controls and team workspaces. Reviewers need no install or repo access. Their pinned comments return to your canvas, ready to add to your agent’s next message. Hosted asset generation is available when your design needs images or SVGs. Cloud is optional; the design source stays local.
The design folder → · Sharing and collaboration →