Design Canvas MCP

An MCP-native visual workspace for AI-generated application design.

Design Canvas lets coding agents generate and modify real frontend source code while you inspect, compare, and interact with the result on an infinite canvas.

There is no traditional drag-and-drop editor. The agent edits the source; the canvas is the visual reasoning and evaluation surface.

What it does

• Generates a real Vite + React + TypeScript project.

• Exposes project and design operations through MCP.

• Renders the real application in interactive browser frames.

• Lets you organize screens as Pages.

• Lets you explore project-wide alternative UI approaches as Design Directions.

• Lets you inspect the same page at different viewports and mock scenarios.

• Keeps the generated application source as the canonical source of truth.

Related MCP server: pulp

The basic loop

Coding agent
    ↓ MCP
Design Canvas
    ↓
real application source
    ↓
Vite runtime previews
    ↓
you compare, interact, and give feedback
    ↓
agent updates the source

Current capabilities

• Infinite canvas with pan, zoom, frame movement, and fit controls.

• Real interactive iframe previews backed by a per-project Vite runtime.

• Pages with real application routes.

• Project-wide Design Directions for alternative UI/UX implementations.

• Responsive inspection through multiple viewports.

• Mock scenarios for alternate data/UI states.

• Interact mode for testing the generated application's real controls and navigation.

• Undo/redo for canvas design mutations.

• Persistent local project registry and .design/project.json state.

• Project file read/write/delete operations through MCP.

Quick start

Requirements: Node.js 24+ and pnpm.

pnpm install
pnpm dev

Open:

http://127.0.0.1:3000

The built-in MCP endpoint is:

http://127.0.0.1:3000/api/mcp

How projects are modeled

• Page — a real application destination/route.

• Design Direction — a coherent alternative UI/UX approach across the project.

• Scenario — a mock/data state.

• View — one Page + Design Direction + Scenario + Viewport shown on the canvas.

Design Directions are not themes. A direction may change layout, hierarchy, navigation presentation, component structure, responsive strategy, and interaction presentation while preserving the same product meaning and routes.

Repository structure

apps/web                  Next.js UI, HTTP, SSE, and MCP
packages/design-contract  portable framework-neutral contracts
packages/project-system   project/design orchestration and Vite React generation
packages/project-workspace project-scoped filesystem implementation

Licensing

Design Canvas MCP uses a mixed licensing model:

• Core application/runtime/orchestration code: AGPL-3.0-or-later.

• packages/design-contract: Apache-2.0.

• Independent MCP/HTTP clients remain independently licensable.

• Design Canvas-authored generated output may be used under MIT or Apache-2.0, at the recipient's option.

Generated applications can therefore remain proprietary, commercial, internal, or open source. Third-party dependencies and assets keep their own licenses.

See LICENSING.md for the exact boundaries.

Contributing

Issues, UX feedback, architecture proposals, performance findings, and integration ideas are welcome. Core source-code contributions are not currently being accepted; see CONTRIBUTING.md.