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

# Overview

> Create designs with Claude and connect AI agents to your Moda canvases via MCP.

The Moda MCP server connects Claude and other AI agents to Moda through the [Model Context Protocol](https://modelcontextprotocol.io/). It works with Claude Desktop, claude.ai, Claude Code, Claude mobile, Cursor, VS Code, and other MCP-compatible environments.

Claude is the most common way people use Moda today, so the guides in this section use Claude examples first. But MCP is not Claude-specific: Cursor and other MCP-capable clients can use the same Moda tools, and OpenAI also supports MCP through its app and API surfaces.

## How it works

The MCP server supports two main workflows. **Design creation**: ask Claude to create or edit designs directly — it generates canvases from prompts, applies your brand kit, and can remix existing designs. **Design to code**: paste a Moda share link and Claude fetches the design as semantic pseudo-HTML with CSS properties, then translates it to any frontend framework.

```mermaid theme={null}
flowchart TD
  A[You describe what you want] --> B[Claude calls Moda MCP tools]
  B --> C[Moda's AI agent builds the canvas]
  C --> D[You get a link to your design]
  D --> E[Edit in Moda, export, or ask Claude to revise]
```

The diagram above shows the design-creation flow. The MCP server also supports the reverse — [turning existing Moda designs into code](/mcp/design-to-code).

## What the agent sees

The `get_moda_canvas` tool returns output like this:

```html theme={null}
## Page: Login Screen (1440x900) [page 1]

<section
  background="#f3f4f6"
  height="900px"
  width="1440px"
  display="flex"
  justify-content="center"
  align-items="center"
>
  <Card background="#ffffff" border-radius="16px" width="600px" display="flex" flex-direction="column" gap="20px">
    <Heading font-size="32px" font-weight="700" color="#111827">Welcome back</Heading>
    <Text font-size="14px" color="#6b7280"> Sign in to your account</Text>
    <TextInput border="1px solid #d1d5db" border-radius="8px" height="48px" width="520px" placeholder="Email" />
    <button background="#2563eb" border-radius="8px" height="48px" width="520px">Sign in</button>
  </Card>
</section>

## Design Tokens - Colors: #111827, #2563eb, #6b7280, #d1d5db, #f3f4f6, #ffffff - Font Inter: weights [400, 700] roles
[body, heading] - Corner radii: 8px, 16px
```

The semantic tag names (`Card`, `Button`, `TextInput`, `Heading`) tell the agent **what** each element is, not just what it looks like. This produces better code than raw coordinates or screenshots alone.

## Transport modes

The MCP server supports two transport modes:

| Transport         | Auth      | Use case                                     |
| ----------------- | --------- | -------------------------------------------- |
| `stdio`           | None      | Local IDE integrations (Cursor, Claude Code) |
| `streamable-http` | OAuth 2.1 | Hosted endpoint at `mcp.moda.app`            |

The hosted server at `mcp.moda.app` is the easiest way to get started. See [Setup](/mcp/setup) for configuration details.

## Available tools

### Design creation

| Tool                                                | Description                           | Auth required |
| --------------------------------------------------- | ------------------------------------- | ------------- |
| [`start_design_task`](/mcp/tools#start_design_task) | Create or edit a design from a prompt | Yes           |
| [`get_task_status`](/mcp/tools#get_task_status)     | Check progress of a design task       | Yes           |
| [`list_tasks`](/mcp/tools#list_tasks)               | List recent design tasks              | Yes           |
| [`remix_design`](/mcp/tools#remix_design)           | Duplicate canvas + optional AI edits  | Yes           |

### Brand kits

| Tool                                              | Description                          | Auth required |
| ------------------------------------------------- | ------------------------------------ | ------------- |
| [`list_brand_kits`](/mcp/tools#list_brand_kits)   | List brand kits for a team           | Yes           |
| [`create_brand_kit`](/mcp/tools#create_brand_kit) | Create brand kit from website URL    | Yes           |
| [`update_brand_kit`](/mcp/tools#update_brand_kit) | Update brand kit colors, fonts, etc. | Yes           |

### Canvas management

| Tool                                                  | Description              | Auth required |
| ----------------------------------------------------- | ------------------------ | ------------- |
| [`list_my_canvases`](/mcp/tools#list_my_canvases)     | Browse your canvases     | Yes           |
| [`search_canvases`](/mcp/tools#search_canvases)       | Search canvases by name  | Yes           |
| [`list_organizations`](/mcp/tools#list_organizations) | List your orgs and teams | Yes           |

### Design to code

| Tool                                                          | Description                                       | Auth required                  |
| ------------------------------------------------------------- | ------------------------------------------------- | ------------------------------ |
| [`get_moda_canvas`](/mcp/tools#get_moda_canvas)               | Fetch semantic pseudo-HTML and design tokens      | Public links: No, Private: Yes |
| [`get_moda_canvas_tokens`](/mcp/tools#get_moda_canvas_tokens) | Extract design tokens only (colors, fonts, radii) | Public links: No, Private: Yes |
| [`list_moda_canvas_pages`](/mcp/tools#list_moda_canvas_pages) | List pages with dimensions and node counts        | Public links: No, Private: Yes |
| [`export_canvas`](/mcp/tools#export_canvas)                   | Export as PNG, JPEG, PDF, or PPTX                 | Public links: No, Private: Yes |

The tables above highlight the most-used tools. The MCP server also provides `get_moda_bootstrap` for mandatory session orientation, `set_context` / `get_context` / `set_session_brand_kit` for session management, `find_brand_kits` for agent-side kit lookups (the JSON sibling of `list_brand_kits`), and `upload_file` for attaching files to design tasks. See the [full tools reference](/mcp/tools) for all 20+ tools.

## Get the most out of the MCP

For AI agents — Claude, Cursor, claude.ai, and others — the Moda **agent skill** teaches the agent how to drive these tools effectively without you re-explaining every conversation. It covers the `get_moda_bootstrap` first-call handshake, the canonical design-task patterns (create / edit / fill template / rebrand / bulk), and the non-obvious behaviors tool signatures alone can't communicate.

<Card title="Install the agent skill" icon="sparkles" href="/mcp/agent-skill">
  Install paths for Claude Code, Cursor, claude.ai, and the Agent SDK — including a zip download for non-technical users.
</Card>

## Next steps

* [Setup](/mcp/setup) — Install and configure the MCP server
* [Agent Skill](/mcp/agent-skill) — Drop our skill into your AI agent for best results
* [Creating Designs](/mcp/create-designs) — Prompts and tips for creating designs with Claude
* [Authentication](/mcp/authentication) — Understand the OAuth flow for the remote server
* [Tools Reference](/mcp/tools) — Detailed reference for each tool
* [Design-to-Code](/mcp/design-to-code) — Best practices for turning designs into code