Overview

The Moda MCP server connects Claude and other AI agents to Moda through the Model Context Protocol. 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. The diagram above shows the design-creation flow. The MCP server also supports the reverse — turning existing Moda designs into code.

What the agent sees

The get_moda_canvas tool returns output like this:

## 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 for configuration details.

Available tools

Design creation

Tool	Description	Auth required
`start_design_task`	Create or edit a design from a prompt	Yes
`get_task_status`	Check progress of a design task	Yes
`list_tasks`	List recent design tasks	Yes
`remix_design`	Duplicate canvas + optional AI edits	Yes

Brand kits

Tool	Description	Auth required
`list_brand_kits`	List brand kits for a team	Yes
`create_brand_kit`	Create brand kit from website URL	Yes
`update_brand_kit`	Update brand kit colors, fonts, etc.	Yes

Canvas management

Tool	Description	Auth required
`list_my_canvases`	Browse your canvases	Yes
`search_canvases`	Search canvases by name	Yes
`list_organizations`	List your orgs and teams	Yes

Design to code

Tool	Description	Auth required
`get_moda_canvas`	Fetch semantic pseudo-HTML and design tokens	Public links: No, Private: Yes
`get_moda_canvas_tokens`	Extract design tokens only (colors, fonts, radii)	Public links: No, Private: Yes
`list_moda_canvas_pages`	List pages with dimensions and node counts	Public links: No, Private: Yes
`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 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.

Install the agent skill

Install paths for Claude Code, Cursor, claude.ai, and the Agent SDK — including a zip download for non-technical users.

Next steps

Setup — Install and configure the MCP server
Agent Skill — Drop our skill into your AI agent for best results
Creating Designs — Prompts and tips for creating designs with Claude
Authentication — Understand the OAuth flow for the remote server
Tools Reference — Detailed reference for each tool
Design-to-Code — Best practices for turning designs into code

Start here

Using MCP

Troubleshooting

How it works

What the agent sees

Transport modes

Available tools

Design creation

Brand kits

Canvas management

Design to code

Get the most out of the MCP

Install the agent skill

Next steps

​How it works

​What the agent sees

​Transport modes

​Available tools

​Design creation

​Brand kits

​Canvas management

​Design to code

​Get the most out of the MCP

Install the agent skill

​Next steps

How it works

What the agent sees

Transport modes

Available tools

Design creation

Brand kits

Canvas management

Design to code

Get the most out of the MCP

Next steps