What is Croqui.dev?
Croqui.dev is a collaborative design canvas where AI agents write real React screens while the team and its clients watch, annotate and approve. Agents connect through one MCP server, every frame on the canvas is a .tsx file that reuses the project's own design system, and the screen you approve is delivered to engineering and ships exactly as drawn.
It is a canvas, not another model. Croqui.dev ships no LLM of its own: you bring the agent you already run — Claude Code, Codex, Cursor, Grok, or something you built — and Croqui.dev gives it a stage, a file system, a design system and a review loop.
About the name. "Croqui" is the Portuguese and French word for a quick freehand sketch, the kind used in fashion and architecture. This page is about Croqui.dev, the software product at croqui.dev — not about sketching as a drawing technique.
What Croqui.dev is
- A shared infinite canvas. Pan and zoom over frames on a dotted stage. Presence cursors show who else is looking — human or agent.
- Screens as code. Each frame is a React file. Desktop and mobile viewports live in the same project.
- A real design system. Components exclusive to your product are reused by the agents, not regenerated from a prompt every time.
- An annotation surface. Pins, notes and reference images sit on the frame. Humans mark what is wrong; agents read those annotations as tools and resolve them.
- Multiplayer by default. Team, agents and clients share one canvas. Clients can annotate as free viewers.
- History and rollback. Every screen keeps its file history, so a bad edit is undone without leaving the canvas.
- Automatic delivery. An approved screen is handed to the agents that implement it in the real product; they compare their work against the approved design before it goes live.
What Croqui.dev is not
- Not a large language model. No model of its own, no tokens to buy here.
- Not a prompt-to-app generator. Work is incremental and file-based, with review, history and rollback.
- Not a Figma clone. There is no vector editor, no pen tool. The design artifact is React code.
- Not a sketching tool for fashion or architecture, despite what the word means.
- Not your product runtime. The canvas renders screens; it does not host your routing, auth or data fetching.
- Not metered per agent call. MCP calls are unlimited on every plan, including the free one.
Who it is for
- Product teams already running coding agents that want design and implementation to be the same artifact.
- Design engineers who would rather review a running React screen than a static mockup.
- Agencies and freelancers who need a client-facing surface where the client annotates instead of emailing screenshots.
- Engineering teams that want an explicit human approval gate between agent output and production.
How it works, end to end
- Create a project on the canvas: screens, components and references live in it.
- Connect your agents by registering the Croqui MCP server once. Connect as many as you want — there is no call quota. See the docs.
- Agents draw. They write
screens/*.tsxreusing your design system. A badge shows which frame an agent is touching right now. - Humans annotate. A pin on the frame becomes an annotation the agent reads and closes.
- You approve the screen.
- Delivery. The approved screen goes to the implementing agents, which build it in the real product, diff against the approved design and publish.
How it compares
| Instead of | Croqui.dev |
|---|---|
| Figma and vector design tools — a picture someone re-implements later | The React screen itself, reviewed on the same canvas. Nothing is re-implemented from a picture. |
| Prompt-to-app builders (v0, Lovable, Bolt) — their model, their component defaults, one shot | Your agent, your design system, incremental edits, and a human approval gate before anything ships. |
| A coding agent alone in a terminal — template layouts and placeholder numbers | The agent loads your brief, components and design system before the first pixel, and the team reviews on a canvas instead of in a diff. |
| Design-to-code plugins — approximate translation of a finished mockup | There is no mockup to translate. The code is the first artifact. |
Pricing
Prices in USD, billed via Stripe, cancel anytime. Yearly billing costs ten months for twelve.
| Plan | Price | What you get |
|---|---|---|
| Free | $0 | 1 seat, 1 project, 3 screens, unlimited MCP calls, community support |
| Pro | $29/mo · $290/yr | 1 seat, unlimited projects and screens, history and rollback, publish bundle, email support |
| Team | $79/mo · $790/yr | 5 seats included, +$12 per extra seat, shared canvas and presence, annotations for clients (free viewers), automatic delivery to engineering, priority support |
| Studio | $199/mo · $1,990/yr | 15 seats, +$10 per extra seat, SSO, audit log, custom domain for published bundles, onboarding call |
Frequently asked questions
Does Croqui.dev include its own AI model?
No. You connect the agents you already use, over MCP. Croqui.dev is the canvas they draw on.
Which AI agents work with Croqui.dev?
Any MCP-capable client: Claude Code, Codex, Cursor, Grok via xAI tools, and custom agents. One server URL, https://croqui.dev/mcp, works for all of them.
How many agents can I connect?
As many as you want. MCP calls are unlimited on every plan, including Free.
Do I need to know React to use it?
Not to review a screen — the canvas renders it. The files the agents write are React, so an engineer can take them as they are.
Can clients comment without paying for a seat?
Yes. On the Team plan, clients annotate as free viewers.
Is there a free plan?
Yes: 1 seat, 1 project, 3 screens and unlimited MCP calls.
Can I use my own domain?
Yes, on the Studio plan, for published bundles.
Is Croqui.dev the same as a fashion croqui?
No. The word means a quick sketch in Portuguese and French; Croqui.dev is design software for product interfaces built with AI agents.