Every screen, side by side
The whole product on one infinite canvas. Live cursors show who is looking — people and agents.
MCP
A design canvas for Claude Code, Codex & Cursor
Stop shipping generic AI UI. Your coding agent draws real React screens with your components. You pin what’s wrong, it fixes it, you approve what ships.
Free plan, no card. Unlimited MCP calls on every plan.
you
2 agents
approved
live
checkout · desktop
sent to delivery
Aura Audio
Secure checkout
Aura ANC Headphones
$899
Subtotal$899.00
ShippingFree
Total$899.00
Card number
MM/YY
CVV
Pay $899.00
Encrypted payment · 7-day returns
Approved. Send it to delivery.
Designer · agent
Copy · agent
You
Automatic delivery
Build
Agents assemble the screen in your product.
Review
They compare it to the approved design.
Publish
The screen goes live.
Live version
app.yourcompany.com/checkout
Aura Audio
Secure checkout
Aura ANC Headphones
$899
Subtotal$899.00
ShippingFree
Total$899.00
Card number
MM/YY
CVV
Pay $899.00
Encrypted payment · 7-day returns
Matches the design. 0 diffs.
Demo
The real product, in 30 seconds
Build, pin, fix, approve. On one canvas.
Same agent. Same brief. Only one of them knows your product.
Alone, an agent guesses: a template, placeholder numbers, a screen that could belong to any bank. Inside Croqui it runs with your skills — brief, components, design system — and writes this product's screen.
- Skills load your brief and components before the first pixel
- The design system is applied as a skill, not guessed from a prompt
- The result is a frame you approve and ship as drawn
Brief
iOS app · Home screen for a lime-green wallet
Agent alone
9:41
Good morning 👋
Welcome back!
Total Balance
$12,345.67
↑ +2.4% this month
↑Send↓Request+Top up…More
Spending InsightsThis week
🛍ShoppingToday-$54.20
Upgrade to Premium ✨
HomeCardsStatsProfile
Any bank. Fake numbers. Not this product.
Agent
Agent + Croqui skills
brief.md
ui/QuickSend.tsx
design-system
9:41
Hello, Rahatul
Welcome back
Total Balance
$87,890
Send
Receive
Withdraw
More
Quick SendSee More ›
Alex R.
Daniel
Cole
Ethan
Elen
+
Recent TransactionSee More ›
TodayThis weekThis Month
Alex Morgan9:00 AM-$600Pay
Ethan Walker2:00 PM+$200Deposit
Daniel Carter3:50 PM-$800Pay
Adrian Cole5:10 PM-$500Pay
Home
9:41
Hello, Rahatul
Welcome back
Total Balance
$87,890
Send
Receive
Withdraw
More
Quick SendSee More ›
Alex R.
Daniel
Cole
Ethan
Elen
+
Recent TransactionSee More ›
TodayThis weekThis Month
Alex Morgan9:00 AM-$600Pay
Ethan Walker2:00 PM+$200Deposit
Daniel Carter3:50 PM-$800Pay
Adrian Cole5:10 PM-$500Pay
Home
Your numbers. Your design system. Ships as drawn.
Approved. Ship it.
Agent
You
How it works
Two minutes to the first screen
Connect once. Then just talk to your agent.
-
1
Connect your agent
One command in Claude Code. Codex, Cursor and any MCP client work too — see the docs.
-
2
Ask for a screen
“Design the checkout on Croqui.” The agent reads your brief and components, then builds it region by region while you watch.
-
3
Pin, fix, approve
Click the screen to leave a note. The agent resolves it and replies. Approve the version you want, and that is the one that ships.
Bring your agent
Croqui is a canvas, not another model
Keep your agent. Give it eyes.
Croqui has no model of its own and resells no tokens. It is one MCP server: any agent that speaks it draws on the canvas, reads your notes and writes the files.
MCP
Any MCP-capable client works. Add the Croqui server once, and the agent gets the canvas, the screens and your notes as tools.
The system
What your agent gets, and what you get
A canvas, not a prompt box
Your agent writes files. You look, point and approve. Nobody re-implements a mockup.
Real React, not a picture
Each frame is a .tsx file. Desktop and mobile in one project, ready for your repo.
Your design system, reused
The agent reuses your buttons, inputs and prices instead of inventing new ones every prompt.
Point, don’t describe
Drop a pin where it’s wrong. The agent fixes that spot and replies on the note.
Live agent edits
Watch the screen change as the agent writes it. A badge marks the frame it is touching.
Export
Publish the bundle and run the same approved screens in another app.
Undo any agent
Every write is versioned. Roll back a bad edit without leaving the canvas.
Who it’s for
Anyone shipping UI with an agent
Built for people who ship with agents
Solo builders
Your agent writes the backend fine. The UI comes out looking like every other AI app. Croqui gives it your components, and gives you a way to say “this, here”.
Free or Pro →Product teams
Designer, PM and engineer review the same live screens the agent is writing. Whoever has approval access signs off, and the approved screen goes straight to engineering.
Team →Agencies & freelancers
Clients leave notes on real screens as free viewers. No more feedback on screenshots in email threads, and no mockup to rebuild afterwards.
Team →
Pricing
USD, billed on Stripe
Free to start. Pay when you ship.
No token resale, no per-call quota: you bring the agent, Croqui is the canvas. Yearly is two months free.
Free
$0
Forever free
Try it on one screen with your agent.
- 1 seat
- 1 project
- 3 screens
- Unlimited MCP calls
- Community support
ProSolo builders
$29 /mo
or $290/yr
For shipping a whole product with your agent.
- 1 seat
- Unlimited projects and screens
- History and rollback
- Export bundle
- Unlimited MCP calls
- Email support
Team
$79 /mo
or $790/yr
For teams and agencies reviewing with clients.
- 5 seats included
- +$12 / extra seat
- Shared canvas and presence
- Clients annotate as free viewers
- Approval access per member
- Automatic delivery to engineering
- Priority support
Prices in USD, billed via Stripe. Cancel anytime. Need SSO, an audit log or 15+ seats? Ask about Studio.
FAQ
Straight answers
What Croqui.dev is, in plain terms
Croqui.dev is a design canvas for the coding agent you already use.
What is Croqui.dev?
A design canvas where your coding agent writes real React screens that render live. You pin notes on the screen, the agent resolves them, and you approve the version that ships. Every frame is a .tsx file that reuses your components, so nothing gets re-implemented from a mockup.
Does Croqui.dev have its own AI model?
No. Croqui.dev is a canvas, not another model. You connect the agents you already run — Claude Code, Codex, Cursor, Grok or any MCP client — over a single MCP server.
How do I connect my agent?
In Claude Code, install the Croqui.dev plugin, which brings the MCP server plus the agent skills: claude plugin marketplace add croqui-dev/croqui-mcp, then claude plugin install croqui@croqui. For the MCP server only: claude mcp add --transport http croqui https://croqui.dev/mcp. In Codex: codex mcp add croqui --url https://croqui.dev/mcp. Full steps in the docs.
How many agents can I connect?
As many as you want. MCP calls are unlimited on every plan, including Free. There is no per-call quota and no token resale.
Do I need a team?
No. Free and Pro are one seat: you and your agent. Team adds a shared canvas, free viewer seats so clients can leave notes, and automatic delivery of approved screens to engineering.
How is this different from Figma or a prompt-to-app builder?
Figma produces a picture that someone re-implements later. A prompt-to-app builder uses its model and its component defaults. Croqui.dev uses your agent and your design system, and puts a human approval gate between the screen and production.
Can I start from my existing app or design?
Yes. Point your agent at a screenshot, a live page or your components and ask it to import them. It inventories what it sees, you pick what to bring in, and every screen after that reuses it.
Do I need to know React?
Not to review a screen — the canvas renders it live, and you annotate it with pins. The files the agents write are React, so an engineer can take them as they are.
More in about Croqui.dev and the docs. Machine-readable summary: llms.txt.