Prototyper

Prototyper is a collaborative AI prototyping canvas where built-in or connected agents (Claude Code, Codex, Cursor over MCP) produce running React apps, wireframes and slide decks. Design and code stay as one artifact: moving a shape updates the source and editing the source updates the canvas, so teams review and ship the real running product.

Prototyper is a browser workspace built around a single shared canvas where designers, engineers and AI agents work on the same files. Instead of drawing pictures that later get rebuilt in code, everything placed on the canvas maps to real running code: move a shape and the source updates, edit the source and the shape moves with it. The result is a live React application the whole team can click, review and ship, rather than a static mockup handed off through tickets. The tool is aimed at product teams that mix design and engineering work and at indie developers who want speed without giving up real code. A designer can sketch a flow on the canvas and have an agent turn the chosen option into working components. Developers keep their own workflow: Claude Code, Codex, Cursor or another MCP client connects to the workspace, reads the project files, writes new components and opens pull requests from the terminal while changes appear on the canvas. Prototyper also ships its own built-in agent for people without an existing subscription. In practice the canvas holds three kinds of output. Apps are prototypes running as React that anyone can interact with. Wireframes start as hand-drawn options, with only the selected direction developed further. Slide decks run in present mode with speaker notes attached. Work is organised into apps and files, several agents can be directed at once on separate tasks, and teammates see each other's cursors and what each agent has changed. A set of typed, accessible primitives is included so early screens do not start from nothing. Prototyper positions itself as a replacement for the usual stack of design tool, AI generator, editor and preview host glued together. Teams with an existing agent subscription can keep it and pay Prototyper mainly for the canvas, collaboration and export. Those who want a single vendor for the agent as well will find the built-in option less mature than dedicated coding agents, and anyone needing native mobile app builds rather than React web apps should look elsewhere. ### 1. Create an account and open the workspace Start a free account, then open the canvas to see the workspace, file tree and agent panel together. ### 2. Sketch or describe the first screen Place shapes on the canvas or prompt an agent to take a first pass, then pick the direction worth developing. ### 3. Connect your own agent over MCP Paste the install line into Claude Code, Codex or Cursor so the agent you already pay for can read and write project files. ### 4. Direct several agents at once Assign one agent to the UI, another to tests and a third to copy, and watch their changes land side by side. ### 5. Edit both sides and review together Adjust the canvas or the code and the other follows; invite teammates to click the running app and comment in place. ### 6. Export or ship the result Move the finished prototype into your own repository to keep building on production foundations.