> ## Documentation Index
> Fetch the complete documentation index at: https://opencanvas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# DesignJS: AI-Powered HTML/CSS Design Canvas

> DesignJS gives AI coding agents eyes. A local-first MCP canvas where agents and humans co-design in real HTML/CSS — no translation gap.

DesignJS is an open-source, local-first visual design canvas that AI coding agents can see and edit through the [Model Context Protocol](https://modelcontextprotocol.io). Instead of generating UI blind from text prompts, your agent reads the canvas, inserts components, updates styles, and captures screenshots — all in real HTML and CSS that ships directly to production.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Install DesignJS and open your first canvas in under five minutes.
  </Card>

  <Card title="Connect an Agent" icon="robot" href="/connect-agent">
    Wire Claude Code, Cursor, or VS Code to your canvas over MCP.
  </Card>

  <Card title="MCP Tools Reference" icon="wrench" href="/mcp/overview">
    Explore all 20+ tools agents use to read and write the canvas.
  </Card>

  <Card title="Editor Guide" icon="pen-to-square" href="/editor/interface">
    Learn the three-pane editor, block palette, layers tree, and style manager.
  </Card>
</CardGroup>

## How it works

DesignJS connects your AI agent to a live HTML/CSS canvas through a WebSocket bridge. Every agent edit and every human edit converge on the same component model — one source of truth, saved to a git-diffable `.designjs.json` file.

<Steps>
  <Step title="Start the canvas">
    Run `pnpm dev` to open the canvas at `http://localhost:3000`. The MCP WebSocket bridge starts automatically on port 29170.
  </Step>

  <Step title="Register the MCP server">
    Run `designjs init` in your project directory. It detects your IDE and writes the correct MCP config file automatically.
  </Step>

  <Step title="Open your agent">
    Start a new Claude Code, Cursor, or VS Code Copilot session. The agent connects to the canvas and can immediately call tools like `get_screenshot`, `add_components`, and `update_styles`.
  </Step>

  <Step title="Design together">
    Ask your agent to build UI. It sees the canvas, inserts HTML with Tailwind classes, refines styles, and sends screenshots back — all without leaving your editor.
  </Step>
</Steps>

<CardGroup cols={3}>
  <Card title="Claude Code" icon="code" href="/integrations/claude-code">
    Auto-configure for Claude Code
  </Card>

  <Card title="Cursor" icon="cursor" href="/integrations/cursor">
    Set up the Cursor MCP integration
  </Card>

  <Card title="VS Code" icon="laptop-code" href="/integrations/vscode">
    Configure VS Code Copilot
  </Card>
</CardGroup>