Miro Clone — Built From a Single AI Prompt

A real-time, multiplayer, AI-powered collaborative whiteboard. Generated end-to-end from a single prompt to demonstrate what modern AI-assisted coding (Claude Code) can produce in one shot — a full Next.js app, realtime CRDT sync, in-browser encryption, and a Claude-CLI-first AI backend, with no scaffolding beyond create-next-app.

This repository exists as a showcase: the whole thing — canvas engine, sync server, AI integration, encrypted export/import — was produced by giving Claude a description of "build a Miro clone with AI sticker/diagram generation, encrypted boards, and use the Claude CLI by default." That's it.

If you've ever wondered how far one prompt can go, this is the answer.

What's in the box

• Infinite canvas — pan, zoom, dot grid. Mouse wheel zooms toward the cursor.
• Objects — sticky notes, rectangles, ellipses, diamonds, text, and arrow connectors. Drag, resize from any corner, edit text in place.
• Real-time collaboration — open the same board URL in two windows (or two machines on the LAN). Edits, live cursors, presence avatars, and selection highlights all sync instantly via Yjs over WebSocket. Offline-first and re-syncs on reconnect.
• ✨ AI generation — describe what you want; the app drops it on the board:
  • brainstorm / lists → a grid of coloured sticky notes
  • process / flow / architecture → a laid-out node-and-edge diagram
  • The endpoint tries, in order:
    1. The local claude CLI if it's on PATH (default — no API key needed)
    2. The Anthropic API (claude-sonnet-4-6, tool-use + prompt caching) if ANTHROPIC_API_KEY is set
    3. A deterministic offline sample so the feature always demos.
• 🔒 Encrypted boards — every export is encrypted in the browser with a passphrase you choose: AES-GCM-256 + PBKDF2-SHA256 (210k iterations) via Web Crypto. The key never leaves the device and can't be recovered. 📥 Import decrypts and either replaces the current board or opens as a new one from the home page.

The one-prompt experiment

The whole project was assembled by Claude Code through a small number of high-level instructions. Notable: the AI route was rewritten to prefer the local claude CLI over the Anthropic SDK, so the showcase costs you nothing to run if you already have Claude Code installed.

You can read the full feature description that produced this code in the commit history.

Quick start

npm install
cp .env.example .env.local   # optional: ANTHROPIC_API_KEY (only if no Claude CLI)

# run the Next.js app + realtime sync server together
npm run dev:all

Open http://localhost:3000, create a board, and share the URL with another browser window to see live cursors.

Run the pieces separately if you prefer:

npm run dev    # Next.js app on :3000
npm run ws     # Yjs WebSocket sync server on :1234

AI backend priority

If…	…the app uses
claude CLI is on PATH	Local Claude CLI (default, free for you)
Otherwise + ANTHROPIC_API_KEY set	Anthropic API with tool-use
Otherwise	Offline sample — feature still works

Set AI_DISABLE_CLAUDE_CLI=1 to skip the CLI path explicitly.

How it works

Concern	Implementation
Canvas engine	components/Board.tsx — camera transform, pointer events, hit-testing
Shared state	lib/yjs.ts + lib/useBoard.ts — Y.Doc per board, Y.Map for items
Presence	Yjs awareness — cursors (world coords), names, colors, selections
Sync server	server/ws.mjs — y-websocket protocol over ws
AI	app/api/ai/route.ts — Claude CLI (default) or Anthropic tool-use → JSON
Export / import	lib/crypto.ts (Web Crypto AES-GCM) + lib/boardio.ts (snapshot)
UI dialogs	components/BoardIODialog.tsx, components/HomeImportDialog.tsx

Keyboard shortcuts

V select · H pan · S sticky · R rectangle · O ellipse · D diamond · T text · C connector · Delete remove selected · Esc deselect

Project layout

app/
  page.tsx              board list (localStorage)
  board/[id]/page.tsx   board view
  api/ai/route.ts       AI generation endpoint (Claude CLI → SDK → mock)
components/             Board, Toolbar, AIPanel, Cursors, PresenceBar,
                        BoardIODialog, HomeImportDialog
lib/                    types, colors, yjs doc, useBoard hook,
                        crypto (AES-GCM/PBKDF2), boardio (snapshot/file),
                        pendingImport (home → board handoff)
server/ws.mjs           realtime sync server

Why this exists

To show — with a checkout-and-run repo — that one prompt to an AI coding agent can produce a working, non-trivial product: real-time multiplayer, CRDTs, crypto, an AI feature, all of it. No human-written scaffolding beyond what ships with create-next-app.

If that interests you, fork it, read the diff, and try your own one-prompt build.

License

MIT — do whatever you want with it.