A local design canvas for you and your agent.
Explore your app’s real components, refine with your team, and build the direction you choose.
npm install -g velloo cd your-appvelloo init Free and open source under Apache-2.0. Your agent runs on your own subscription.
What the film shows
Three directions, built from the app’s real components. The team refines them on the canvas; the founder comments from a share link. Their feedback comes back to the agent, which updates the design and builds the direction they choose.
Works with your agent
Run Claude Code, Codex or an installed Agent Client Protocol agent in the Agent tab. Connect any MCP client from your terminal.
Local by default
Bring the agent and subscription you already use. Keep every design in files you own.
Your existing subscriptionSigned in as you, with your settings.
Plain files, on your computerBranch, diff, undo. Git is optional.
Free and open sourceNo Velloo account needed to get started.
❯ claudecodex
Claude CodeCodex · your account
Let’s work on the booking flow.
The Agent tab · new in 0.10
Run Claude Code, Codex or an installed Agent Client Protocol agent in the canvas. Its edits render live as you approve them, with your login, settings and subscription.
How the Agent tab works →How it works
Your agent works on the canvas while you watch, point and decide. What it makes is built from your app’s components and theme, and what you choose goes back into your code.
The loop
Select a component and it travels with your message, so “this” means the thing you picked. The agent asks before it changes the design, with the choices your agent offers, and the frame re-renders the moment you allow it.
Your components, your theme
velloo init reads your framework, theme and components. The agent composes screens from them, frames render them for real at any width, and Velloo reports any component it had to adapt or stand in for, so you know what you are looking at.
Compare
Your agent compares a frame with your running app at the same viewport, names what differs, and works through it. It sees named components and theme tokens, not only pixels.
Handoff
Each screen is a readable tree of your components, props and styles. When you choose a direction, the agent reads it as Tailwind classes, sx, inline styles or HTML, and writes it into your app the way your codebase already does.
Directions
Give each direction its own screen and refine it on its own. Desktop and mobile frames of the same screen stay in sync, so the comparison stays fair as the work evolves.
Flows
Connect screens with arrows that say what happens next. Include the waiting, the errors and the ways back, then review the whole flow before your agent builds it.
Read Design the journey →Props + styles
Not every change needs a prompt. Select a component, adjust its props and styles in place, and see the result at once. Your agent picks up from what you left.
Framework-native
Explore designs that belong in your app. React screens use your installed components; HTML screens use your app’s CSS. Velloo keeps their styling conventions as your agent moves from design to implementation.
Tailwind className
Your own component files render directly; adapted and fallback cases are reported, never guessed at. Tailwind utilities, globals, tokens, and class conventions stay intact.
className="flex items-center gap-2" sx prop
Real @mui/material rendered in-process. Your theme projects onto createTheme(); emitted screens speak sx.
sx={{ display: "flex", gap: 1 }} Inline style
Real antd components with their native props, token-aware CSS-in-JS rendering, and inline style objects.
style={{ display: "flex", gap: 8 }} sx prop
Real Chakra UI v2 components, projected theme tokens, Emotion rendering, and Chakra-native sx props.
sx={{ display: "flex", gap: 2 }} Inline style
Bare primitives over plain HTML with inline style objects. No component framework to adopt; Tailwind remains optional.
style={{ display: "flex", gap: 8 }} Native HTML
Semantic elements styled with your app’s CSS. Review with no app running, then emit native markup with hx-* attributes for your server templates.
hx-post="/contacts" And the ones you wrote
Velloo reads what your app actually renders — a package it depends on like Mantine, a private design
system, or your own components/ directory — and
draws those components on the canvas from your own installed copy. Nothing to register, no prop schema to
hand-write. They emit with their exact imports, because the component in the design is the component that
ships.
Why Velloo
Your agent can build any of these.
The useful question is which one.
A direct path from date to booking.
A guided first visit, one choice at a time.
Space to find the right experience first.
Illustrative booking directions. The choice is yours.
Questions
Getting started, sharing with your team, and keeping control of your work.
A visual place to decide what to build with the same agent. Compose screens from real components, compare directions side by side, and point at what to change. Share a board so your team can review it before implementation. Use it for one screen or a whole flow; exploring alternatives is optional.
Yes. Publish a board through Velloo Cloud and send a browser link. Reviewers need no install or repo access. Invite guests to comment through a personal link with no account, or enable public commenting. Feedback stays pinned to the design, returns to your local canvas, and can be added to your agent's next message with one click. Reviewers and guests never take a paid seat. How sharing and feedback work.
The local canvas, Agent tab and MCP tools are free and open source under Apache-2.0, with no account required. Your agent uses your own subscription. Cloud is optional: its free plan includes three published boards with unlimited reviewers and guests. Paid plans add members who publish together, private and password-protected sharing, and more capacity. Hosted asset generation uses separate credits. Compare plans.
Free accounts publish public links. Team and Business plans also offer private and password-protected boards; Business adds access limited to a team. Public commenting is off by default and can be enabled on any plan. You choose what to publish; your local design files stay on your computer. Sharing access and permissions.
The Agent tab runs your own Claude Code, Codex or installed Agent Client Protocol agent inside the canvas, with your login, settings and permission rules. Select a component to include it in your message, see edits as they happen, and respond to the agent's approval requests in place. Prefer your terminal? Connect the same agent over MCP with velloo connect, or configure any other MCP client by hand. How the Agent tab works.
No. Run velloo init in a new folder, pick a component library, and start with a blank board, the welcome sample, or a live site as a reference. Settle on a direction, then ask your agent to build the app from those screens. In an existing app, setup reads its framework, components and theme instead. Get started.
Velloo supports shadcn/ui with Tailwind, Material UI, Ant Design, Chakra UI, plain React, and HTML or htmx apps. It also discovers your app's own React components, including private design systems and other installed libraries, and renders them from your installed copy. Each component is checked; adapted or fallback rendering is reported so you know what you are reviewing. Frameworks and rendering support.
Designs are ordinary JSON files in your app's repository or another folder you choose. Keep them in Git to branch experiments, compare revisions, and review changes, or leave them as local files. Git is optional. If you stop using Velloo, the design files remain yours and any code you shipped stays in your app.
Velloo runs locally and sends no agent sessions to Velloo Cloud. Your agent still talks to its own provider under your account and that provider's terms. Publishing uploads the design material needed for review, including screens, themes and referenced assets. Cloud features are opt-in. The CLI also checks the public npm version for updates; this sends no project or account data and can be disabled. Read the privacy details.
Velloo gives your agent a structured screen made of components, props and styles in your framework's conventions. The agent turns it into application code, adding routing, state, data and handlers to fit your project. You review the resulting diff through your usual process. You can also compare a design frame with the running app at the same viewport to check the result.
Keep the tools and people that shape your product. Velloo focuses on screens made from real components; freeform brand, illustration and other design work still belong in a drawing tool. Designers guide the components, standards and direction, then review the same screens as developers and other teammates. The agent drafts and implements; the team makes the design decisions.
Preview links work well for reviewing a built change. A canvas helps when the direction is still open: options sit side by side at the same viewport, feedback points to specific components, and you can refine or discard a screen before wiring it to data and routing. Once you choose, your agent implements it in the app.
Install Velloo and run velloo init in your app. Setup opens in your browser and ends in the canvas, with your agent already in the Agent tab. Explore a few directions, refine your favourite, and bring others in when you’re ready.
npm install -g velloo cd your-appvelloo init
Love this direction. Can we make the first step a little clearer?
↳ Pinned to “Find your ritual”