Skip to main content

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.

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:
TransportAuthUse case
stdioNoneLocal IDE integrations (Cursor, Claude Code)
streamable-httpOAuth 2.1Hosted 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

ToolDescriptionAuth required
start_design_taskCreate or edit a design from a promptYes
get_task_statusCheck progress of a design taskYes
list_tasksList recent design tasksYes
remix_designDuplicate canvas + optional AI editsYes

​
Brand kits

ToolDescriptionAuth required
list_brand_kitsList brand kits for a teamYes
create_brand_kitCreate brand kit from website URLYes
update_brand_kitUpdate brand kit colors, fonts, etc.Yes

​
Canvas management

ToolDescriptionAuth required
list_my_canvasesBrowse your canvasesYes
search_canvasesSearch canvases by nameYes
list_organizationsList your orgs and teamsYes

​
Design to code

ToolDescriptionAuth required
get_moda_canvasFetch semantic pseudo-HTML and design tokensPublic links: No, Private: Yes
get_moda_canvas_tokensExtract design tokens only (colors, fonts, radii)Public links: No, Private: Yes
list_moda_canvas_pagesList pages with dimensions and node countsPublic links: No, Private: Yes
export_canvasExport as PNG, JPEG, PDF, or PPTXPublic links: No, Private: Yes
The tables above highlight the most-used tools. The MCP server also provides whoami for 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 whoami 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