Wirely
DocsBlogGitHubSign inStart now

Free and open source

The design canvas for your coding agent.

Ask Claude Code, Cursor, or Codex for three directions. They land on a canvas side by side, you pick one, and the agent builds it in your codebase. All on the plan you already pay for.

Set up withStar on GitHub

No credits, no card, no server key.

Works withClaude CodeCursorCodexopencodeand any MCP client.

One prompt, three answers

Compare directions side by side.

Your agent writes each screen as a page and puts it on the canvas while you watch.

Habit tracker>Design three different layouts for a habit tracker.Writing 3 pages3 pages ready
Priya
Calendar gridwritingdone390×844
Streak cardswritingdone390×844
Daily timelinewritingdone390×844
56%

How it works

Your agent designs. You choose.

  1. 01

    Ask for directions, not a screen.

    Tell your agent what the screen is for and ask for three layouts. It writes each one as a self-contained HTML page and calls Wirely to put it on your canvas.

  2. 02

    Compare them side by side.

    Frames fill in as each page lands. Pan, zoom, open the compare view, and look at the three next to each other instead of scrolling a chat for screenshots.

  3. 03

    Point at what to change.

    Pick one element on the canvas and copy its link. The agent edits that element and leaves the rest of the page alone. Reviewers can pin comments the same way.

  4. 04

    Hand the winner back.

    The agent reads the page it wrote, so the build matches the design instead of guessing from a screenshot.

Claude Code~/habit-tracker

>

The tool names are the ones the MCP server exposes.

Pricing

Free, with no asterisk.

No tiers, no credits, no cap on agent calls. Your agent runs on the subscription you already have, and pages render in a sandbox.

No agent? Bring a key:Google AI StudioOpenRouterZ.aiUnsplash

$0forever

Connect your agent
  • Unlimited projects and pages
  • Unlimited agent calls
  • Review links with pinned comments
  • Clickable prototypes
  • Desktop and mobile frames
  • The whole source, MIT licensed

Setup is one line in your agent. The docs cover Claude Code, Cursor, Codex, and opencode.

FAQ

Questions, answered.

Something missing? The docs go deeper, and GitHub issues reach the maintainer.

Does Wirely cost anything?

No. There are no plans, credits, or limits on agent calls. Your agent runs on the subscription you already pay for, and Wirely only stores the pages it writes.

Which agents work with Wirely?

Claude Code, Cursor, Codex, and opencode have setup steps in the docs. Any other client that supports remote MCP servers over streamable HTTP works too.

Do I need an API key?

Not if you use an agent. A key is only needed to generate pages inside Wirely without an agent. You save it in settings, and Wirely encrypts it before storing it.

Can a generated page reach my account?

No. Every page renders in a sandboxed iframe without access to the Wirely origin, under a strict Content Security Policy that only allows a short list of script and image hosts.

How does a design get into my codebase?

You tell your agent which page you picked. It reads the HTML it wrote and builds the screen in your project. It can then capture your running app and get back what differs from the design.

Who can see my projects?

Only you, unless you send a review link. People you send it to sign in, see the pages, and pin comments on them.

Can I run Wirely myself?

Yes. The source is MIT licensed. You need Bun, a Postgres database, and a Clerk app. The self-hosting guide in the docs lists every step.

Your next screen is one prompt away.

Add one line to your agent and ask it for three directions.

Set up with
Wirely

The design canvas for your coding agent. Free, open source, MIT licensed.

DocsBlogPrivacyTermsGitHub