The multiplayer design canvas
Design with your team and your agents.
Floo is a live canvas of real HTML frames. Claude Code, Codex and Cursor join over MCP, or the built-in Floo Agent runs on your own key — and everyone sees every cursor and edit as it happens.
Free for personal use · Teams $20 a seat a month
Works with
- Claude Code
- Codex
- Cursor
- Claude
- ChatGPT
- VS Code Copilot
- Any MCP client
01Multiplayer canvas
Every frame is real HTML.
Frames render live HTML in sandboxed iframes, so what you review is what ships. Draw, type and set flex layout by hand, or let an agent write it — every cursor, selection and edit reaches everyone on the canvas as it happens.
Live cursors and selections
See where every person and agent is pointing, and what each one has selected, in their own colour.
Follow anyone
Click a face to follow their camera and page. Click an agent to fly to the frame it is working on.
Pages and layers
Organise frames into pages, work in a real layer tree, and hide or lock what is finished.
Version history
Every save is a version you can compare and restore, with undo and redo across the canvas.
Rulers, guides and snapping
Rulers, guides and snapping keep layouts on the grid while you draw and resize.
02Agents over MCP
Bring the agent you already use.
Claude Code, Codex, Cursor or any MCP client signs in once with OAuth. It reads frames, writes HTML, answers comments and reports progress — with its own cursor and task row, acting as you and with your permissions.
The canvas, as tools
Agents get the powers you have: read and write frames, look at screenshots, answer comments, wire prototypes, import pages and keep the style guide. These are real tool names.
- get_canvas
- create_frame
- set_frame_html
- edit_frame_html
- get_frame_screenshot
- inspect_frame
- get_comments
- reply_to_comment
- resolve_comment
- set_status
- set_prototype_start
- import_webpage
- generate_image
- search_icons
- get_guidelines
- save_decision
- list_frame_versions
- restore_frame_version
- export_frame
03Built-in agent
No agent? Run the Floo Agent on your key.
Queue a brief and the built-in Floo Agent designs it on the Claude, OpenAI, Gemini or OpenRouter key you connect, so you pay your provider directly. Send the work through specialist passes, or call one in from any comment.
Mention a role in any comment
A comment that @mentions a role queues it on that element, and the answer lands in the same thread.
04Review
Comment, approve, click through.
Feedback lives on the element it is about. Approve frames for development, and wire screens into a prototype anyone can click through from a link.
Threads on any element
Pin a comment to an element or the canvas, reply, bring in a teammate or an agent role, and resolve it when it is done.
Approvals that hold
Mark a frame ready for development against the exact version you saw. Change the design and it drops back to needs review.
Clickable prototypes
Wire elements to frames — on click, hover, press, a key or a delay, with transitions — then press Play or share the prototype link.
05Imports
Start from what already exists.
Bring in a live website, the screens of an app behind a login, or the routes of a GitHub repo. Everything lands as editable frames that people and agents can comment on and redesign.
Website
One page, or discover a whole site and choose what to capture. Snapshots stay editable; scripts are removed.
Live app
For apps a crawler cannot reach — behind a login, a VPN or on localhost. Paste one script tag and screens sync as you click through.
GitHub repo
Connect a repository and Floo reads its routes; an agent then rebuilds each screen as a frame.
06Integrations
Requests arrive from where your team already works.
Delegate a Linear issue or mention Floo in Slack and the request becomes a canvas with an agent already on it. Webhooks send canvas events to anything with an HTTP endpoint.
Linear
Delegate an issue to Floo. A private canvas opens, the agent designs it, and the link comes back to the issue.
Slack
Mention @Floo with a brief. It answers in the thread, then posts a picture of the finished frame. Mention it again to revise.
Webhooks
Signed POSTs when comments land, frames are created and agent tasks finish — into n8n, your tracker or your own service.
07And the rest
Everything a design team expects.
Design memory
Pin reference frames and keep style guides on the canvas. Agents read them before they design and save the decisions you make.
Private by default
Invite people by email, or share a link that can view, comment or edit. Agents get exactly their person’s access.
Teams
A shared space where every member opens every canvas, with owner, admin and member roles.
Export and hand-off
Export any frame as PNG or PDF, or let your coding agent build from the HTML it already reads.
Generated images
Agents generate imagery in place with GPT Image 2, Nano Banana 2, Seedream 5 Pro, Seedream 5 Lite.
Agent keys
One key per agent, named after where it runs. Revoking a key stops that agent at once.
How it works
From a sentence to a shipped screen.
Three steps, and the agents do most of the typing.
- 1
Start a canvas
Describe a screen, drop in a screenshot or import a site. Floo opens a canvas and queues the first draft.
New canvas · N
- 2
Bring your agents
Connect Claude Code, Codex or Cursor once, or run the Floo Agent. They work beside you with cursors, task rows and comments.
claude mcp add --transport http floo …
- 3
Review and hand off
Comment on elements, approve frames and click through the prototype, then export or hand the HTML to your coding agent.
/c/cnv_8hQ2x/proto
Pricing
Free for you. Per seat for your team.
Personal use is free, agents included — you bring the model key. A shared team space is billed per seat as people join.
Personal
For you and your agents.
No card needed.
Start for free- Unlimited personal canvases
- Invite collaborators to any canvas
- Agents over MCP, and the Floo Agent on your key
- Imports, prototypes and design memory
Team
PopularA shared space for your whole org.
Billed monthly. Seats follow membership.
Start a team- Every member opens every canvas
- Roles: owner, admin and member
- Invite by email; seats are billed as people join
- Move canvases between personal and team
- Everything in Personal
Enterprise
Self-host it, or let us run it for you.
Custom terms and invoicing.
Contact us- SSO, Google and Microsoft sign-in
- Dedicated support
- Custom terms and invoicing
Prices in USD. Model usage on your own key is billed by your provider, never by us.
FAQ
Questions, answered.
Short answers to what people ask before they connect their first agent.
Ask us something elseGet started
Open a canvas. Invite your agents.
Free for personal use. Bring Claude Code, Codex or Cursor, or run the Floo Agent on your own key.