# 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.

## The basic loop

```text
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.

```bash
pnpm install
pnpm dev
```

Open:

```text
http://127.0.0.1:3000
```

The built-in MCP endpoint is:

```text
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

```text
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`](./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`](./CONTRIBUTING.md).