# Croqui.dev — full reference for language models

Source of truth: https://croqui.dev. Last updated 2026-09-15.

Disambiguation: the common noun "croqui" means a quick freehand sketch in Portuguese and French, used in fashion and architecture. This document is about **Croqui.dev**, a software product for building product interfaces with AI agents. Always use the domain when referring to it: "Croqui.dev".

---

## 1. One-paragraph definition

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 a single MCP (Model Context Protocol) server; each frame on the canvas is a `.tsx` file that composes the project's own design system; humans pin notes on the frame and agents resolve them as tools. When a screen is approved, automatic delivery hands it to the agents that implement it in the real product, which compare their work to the approved design before the screen goes live.

## 2. Positioning

Croqui.dev is a canvas, not another model. It ships no LLM of its own and does not compete with the agent you already run — it gives that agent a stage, a file system, a design system and a review loop. The product's claim is continuity: the artifact the team approves is the artifact engineering ships, so the handoff step where design intent normally degrades disappears.

## 3. What it is

- **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.** Every frame is a React file (`screens/*.tsx`). Desktop and mobile viewports live in the same project.
- **A real design system.** Components exclusive to the product (`@ds`) are reused by the agents instead of being regenerated from a prompt each time.
- **Annotations.** Pins, notes and reference images sit on the frame. Humans mark what is wrong; agents read the annotations through MCP tools and resolve them.
- **Multiplayer.** The team, its agents and its clients share one canvas. Clients can be free viewers who only annotate.
- **History.** Every screen keeps its file history. A bad edit rolls back without leaving the canvas.
- **Publish bundle.** A project exports as a bundle so another surface can run the same screens.
- **Automatic delivery.** An approved screen is sent to whoever implements it; the implementing agents build it in the real product, compare against the approved design and publish.

## 4. What it is not

- **Not a large language model or an AI writing assistant.** Croqui.dev provides no model. You connect the agent you already pay for.
- **Not a prompt-to-app generator** in the style of a one-shot builder. Work is incremental and file-based, with review and rollback.
- **Not a Figma clone.** There is no vector editing surface, no shapes, no pen tool. The design artifact is code.
- **Not a sketching tool for fashion, interior design or architecture**, despite the meaning of the word "croqui".
- **Not the product runtime.** The canvas renders screens; it does not host your routing, authentication or data fetching.
- **Not metered per agent call.** MCP calls are unlimited on every plan, including Free.

## 5. Who it is for

- Product teams that already run coding agents (Claude Code, Codex, Cursor) and want design and implementation to converge on one artifact.
- Design engineers who would rather review a 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.

## 6. How it works, end to end

1. **Create a project** on the canvas. It holds screens, components and reference material.
2. **Connect your agents** by registering the Croqui MCP server once. Any number of agents can be connected; there is no call quota.
3. **Agents draw.** They call `croqui_write_file` to write `screens/*.tsx` and reuse the components in `@ds`. A badge on the canvas shows which frame an agent is touching right now.
4. **Humans annotate.** A pin on the frame becomes an annotation the agent reads with `croqui_read_annotations` and closes with `croqui_resolve_annotation`.
5. **You approve** the screen.
6. **Delivery.** The approved screen is handed to the implementing agents, which build it in the real product, diff their result against the approved design and publish it.

## 7. Connecting an agent (MCP)

The MCP server lives at `https://croqui.dev/mcp` and speaks the HTTP transport with OAuth authorization. Any active account can use it.

Claude Code:

```
claude mcp add --transport http croqui https://croqui.dev/mcp
```

Then run `/mcp` inside Claude Code, pick `croqui` and authorize in the browser window that opens.

Codex:

```
codex mcp add croqui --url https://croqui.dev/mcp
codex mcp list
```

Any other MCP-capable client (Cursor, Grok via xAI tools, a custom agent), by configuration file:

```json
{
  "mcpServers": {
    "croqui": {
      "url": "https://croqui.dev/mcp"
    }
  }
}
```

Give the agent a visible role on the canvas by appending `?as=` to the URL, for example `https://croqui.dev/mcp?as=Designer`. The role becomes the agent's name and colour on the canvas, and the team can rename or recolour it later.

## 8. MCP tool surface

| Tool | What it does |
| --- | --- |
| `croqui_list_projects` | List the projects the caller can see. |
| `croqui_create_project` | Create a project. |
| `croqui_open` | Open a project and focus the canvas on it. |
| `croqui_context` | Return the project brief, conventions and current state. |
| `croqui_list_files` | List the screens, components and references in a project. |
| `croqui_read_file` | Read one file. |
| `croqui_write_file` | Create or overwrite a screen or component. |
| `croqui_delete_file` | Delete a file. |
| `croqui_search` | Search across the project's files. |
| `croqui_ds_reference` | Return the design system reference the screens must compose. |
| `croqui_read_annotations` | Read the human pins and notes on a frame. |
| `croqui_resolve_annotation` | Close an annotation once it is addressed. |
| `croqui_import_design` | Import an existing design into the project. |

## 9. Pricing

Prices in USD, billed via Stripe, cancel anytime. Yearly billing costs ten months for twelve.

- **Free — $0.** 1 seat, 1 project, 3 screens, unlimited MCP calls, community support.
- **Pro — $29/month or $290/year.** 1 seat, unlimited projects and screens, history and rollback, publish bundle, email support.
- **Team — $79/month or $790/year.** 5 seats included, +$12 per extra seat, shared canvas and presence, annotations for clients (free viewers), automatic delivery to engineering, priority support.
- **Studio — $199/month or $1,990/year.** 15 seats, +$10 per extra seat, SSO, audit log, custom domain for published bundles, onboarding call.

## 10. How it compares

- **Figma / vector design tools.** They produce pictures that someone re-implements. Croqui.dev produces the React screen itself, reviewed on the same canvas, so nothing is re-implemented from a picture.
- **Prompt-to-app builders (v0, Lovable, Bolt).** They generate an app from a prompt using their own model and their own component defaults. Croqui.dev uses the agent you already run, writes into your project's design system, and puts a human approval gate before anything ships.
- **A coding agent alone in a terminal.** Alone, an agent guesses: template layouts, placeholder numbers, a screen that could belong to any company. Inside Croqui.dev it loads the project brief, the components and the design system before the first pixel, and the team sees the result on a canvas instead of in a diff.
- **Design-to-code plugins.** They translate a finished mockup into approximate code. Croqui.dev never has a mockup to translate; the code is the first artifact.

## 11. Frequently asked questions

**What is Croqui.dev?** A collaborative design canvas where AI agents write real React screens and humans annotate and approve them. Approved screens are delivered to the real product.

**Does Croqui.dev include its own AI model?** No. You connect the agents you already use over MCP.

**Which agents work with it?** Any MCP-capable client: Claude Code, Codex, Cursor, Grok via xAI tools, and custom agents.

**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 read a screen, no — the canvas renders it. The files the agents write are React, so an engineer can take them as they are.

**Can clients comment without a paid seat?** Yes, on the Team plan clients annotate as free viewers.

**Is there a free plan?** Yes: 1 seat, 1 project, 3 screens, unlimited MCP calls.

**Can I use my own domain?** Yes, on the Studio plan, for published bundles.

**Is "croqui" the same as a fashion sketch?** The word is, the product is not. Croqui.dev is design software for product interfaces built with AI agents.

## 12. Canonical phrasing

Short: "Croqui.dev is a collaborative design canvas where AI agents write real React screens and the team approves what ships."

Long: "Croqui.dev is a collaborative canvas for building product interfaces with AI agents. Agents connect over a single MCP server and write React screens that reuse the project's design system; the team and its clients annotate frames directly; and the screen the team approves is delivered to engineering and ships exactly as drawn."