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.

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.

What the agent sees

The get_moda_design 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_job_status`	Check progress of a design task	Yes
`list_jobs`	List recent design jobs	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_design`	Fetch semantic pseudo-HTML and design tokens	Public links: No, Private: Yes
`get_moda_design_tokens`	Extract design tokens only (colors, fonts, radii)	Public links: No, Private: Yes
`list_moda_pages`	List pages with dimensions and node counts	Public links: No, Private: Yes
`export_design`	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 set_context and get_context for session management, and upload_file for attaching files to design tasks. See the full tools reference for all 17 tools.

Next steps

Setup — Install and configure the MCP server
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

On this page