Quilt MCP
A local infinite-canvas design tool: an app description becomes HTML screens and your agent edits the canvas over MCP.
- 106 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The MCP server listens on a local address without authentication, reachable by any process on the machine
- Descriptions and screens go to the chosen model provider during generation
Install
- Works in
Manual install
claude mcp add --transport http quilt http://127.0.0.1:3100/mcpThe agent connection command from the Connect your coding agent section. Quilt itself is started first: `node apps/cli/bin/quilt.js` after `pnpm build`.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The MCP server listens on a local address without authentication, reachable by any process on the machine
- Descriptions and screens go to the chosen model provider during generation
This is third-party code. Review the repository files before installing.
What it does
Quilt runs on your machine as one process: no account, no cloud, data in `~/.quilt`. You describe an app, Quilt plans a main flow of 4–6 screens, generates each as self-contained HTML in the project design system, lints and screenshots it and lays it out on the canvas. Screens can be edited by text, an element can be picked and changed at zero token cost, shared components like a tab bar can be built, the design system can be re-flowed and the mock can be clicked through as a prototype or exported whole as one offline HTML file. An MCP server over Streamable HTTP is attached to the canvas (`claude mcp add --transport http quilt http://127.0.0.1:3100/mcp`). It exposes 57 tools and 7 resources: reading the project outline with `get_outline` and `get_screen`, writing with `patch_screen`, `create_screen` and `edit_element`, and starting generation. Generation channels: a Claude subscription through the `claude` CLI, an Anthropic, Gemini or OpenAI-compatible key.
Who it is for. Designers, founders and developers who want a clickable app mock quickly and to hand it to an agent for coding.
Good fit when
- An app idea must quickly become several linked screens.
- The coding agent should read screens and the design system straight from the mock.
- The mock is clicked through as a prototype with links, forms and screen transitions.
- A shared component such as a tab bar is edited once for all screens.
Not a fit when
- A Figma mock with collaboration in the browser is needed.
- The environment has no Node.js 22 and pnpm: the build is from source.
- Generation must not be sent to an external model.
Example request
Through Quilt fetch the project structure with get_outline, fix the paddings on the checkout screen and link it to the cart screen.MCP
- Transport
- http
- Authentication
- not required
Limitations
The MCP server listens only on a loopback address without authentication, so any process on your machine can reach it. Running it needs Node.js 22 or newer and pnpm 11, the `quilt-canvas` package is mentioned in the README as upcoming, and for now it is built from source. Screenshots need Chrome or Edge or `npx playwright install chromium`. Generation goes through your chosen model provider, so descriptions and screens go to it. The repository was last updated on 4 November 2026 and uses the Apache-2.0 licence.
How to disable. Run `claude mcp remove quilt` and stop the Quilt process. Project data lives in `~/.quilt`, so delete that folder if the mocks are no longer needed.
FAQ
Where is data stored?
In the `~/.quilt` folder on your machine: an embedded PGlite database, objects and `config.env` with secrets. No account or cloud is needed.
How to connect an agent?
With `claude mcp add --transport http quilt http://127.0.0.1:3100/mcp`. The server listens only on a loopback address, so there is no authentication.
Which generation channels are supported?
A Claude subscription through the `claude` CLI by default, an Anthropic or Gemini key, and an OpenAI-compatible endpoint.
What can an agent do on the canvas?
Read structure and screens (`get_outline`, `get_screen`), write (`patch_screen`, `create_screen`, `edit_element`), link screens and start generation.
Can the prototype be exported?
Yes, the whole prototype exports as one offline HTML file.
Discussion
No questions or reviews yet.
Related
MCP serversOpen source design editor with a built-in MCP server: Claude and Cursor create and edit designs on your own server
The Scumble desktop editor with an MCP server of 119 tools: an agent opens, selects, generates and exports images.
From a Lanhu design link an agent gets HTML with CSS, design tokens, layers and slices, with no manual export from the editor.
A Rust oil painting simulator and an easel with MCP: an agent paints with brushes, mixes paint and views the canvas
An interface design skill that anchors an agent to your product, with an optional MCP server adding real screens from a catalogue.
An open design canvas where Claude Code, Codex, ChatGPT and Cursor draw layouts through MCP together with people
README in short
The README shows the path from description to prototype, a Hono process diagram with a job queue and MCP, and the Connect your coding agent section gives a ready command.