Getting Started with Moda MCP

Moda is a 2D vector canvas tool for creating slide decks, social media posts, ads, and other visual content.

The Moda MCP server connects Moda to Claude and other AI agents through the Model Context Protocol (MCP). Once connected, you can create designs just by chatting — describe what you want and Claude builds it for you in Moda.

This works from anywhere you use Claude: the desktop app, claude.ai in your browser, Claude Code in the terminal, Claude on mobile, Cursor, VS Code, and other MCP-compatible environments.

This guide uses Claude examples because it's the most common setup for Moda. Cursor and other MCP-capable clients can call the same Moda tools too, and OpenAI also supports MCP through its app and API surfaces.

For example:

• Ask Claude to create a pitch deck from your meeting notes.
• Generate dozens of social media ads for a campaign in one conversation.
• Turn a product brief into a branded one-pager without opening a design tool.
• Have Claude implement a Moda design as code in React, Vue, or HTML/CSS.

Once connected, Claude can treat Moda as both a creative output surface and a design system.

What you can do

• Create designs from a conversation — Ask Claude to generate slide decks, social posts, ads, reports, and more. Claude creates a fully editable Moda canvas and gives you a link. See the Creating Designs guide for prompts and examples.

• Iterate with follow-ups — Refine any design by continuing the conversation. "Make the headline bigger," "add a testimonial slide," "switch to dark mode" — Claude modifies the same canvas.

• Use your brand automatically — Set up a brand kit once (Claude can do this from your website URL) and every design uses your colors, fonts, and logos.

• Design to code — Paste a Moda share link and Claude generates framework-specific code (React, Vue, HTML/CSS, and more). See the Design-to-Code guide.

• Extract design tokens — Pull colors, fonts, spacing, and corner radii from any canvas to build consistent theme files.

• Browse and search — List your canvases or search by name directly from your conversation without switching to the browser.

How it works

Moda uses the Model Context Protocol (MCP) — a standard for connecting AI agents to external tools and data sources. When you connect Claude to Moda's MCP server, Claude gains the ability to create, read, and manage designs on your behalf.

The most common flow looks like this:

You describe what you want → Claude creates a Moda canvas → You get a link to your design

Claude can also work in the other direction:

You share a Moda design link → Claude reads the design → Claude generates code

Because MCP is a standard protocol, Claude can combine Moda with other tools in the same conversation — pull content from a knowledge base, look up data from an API, and create a design that uses all of it.

Two common workflows

1. Create designs from a conversation

The most popular workflow. Ask Claude to create visual content and it builds a Moda canvas for you.

• Generate a pitch deck from a product brief
• Create dozens of social ads for a campaign
• Turn meeting notes into presentation slides
• Produce branded marketing visuals from structured data
• Design reports, one-pagers, resumes, and flyers

Because Claude can access other tools in the same conversation (knowledge bases, APIs, docs, etc.), it can combine those inputs with Moda to generate brand-aligned visuals automatically.

Every canvas Claude creates is fully editable in Moda. See the Creating Designs guide for detailed prompts and tips.

2. Turn designs into production code

Start with a design in Moda and ask Claude to implement it in your preferred framework.

• Convert a login page design into a React component
• Generate HTML/CSS from a marketing page layout
• Extract design details (colors, fonts, spacing) into a theme file
• Build a full component library from existing designs

Because Moda provides structured design data instead of screenshots, Claude can generate much more accurate UI code. See the Design-to-Code guide for best practices.

Quickstart

Prerequisites

• A Moda account (free to start)
• A supported MCP-capable host app: Claude Desktop, claude.ai, Claude Code, Claude mobile, Cursor, or VS Code with Copilot

Connect to the remote server

The hosted MCP server at mcp.moda.app requires no local installation. Authentication is handled via OAuth — you sign in through your browser on first use.

claude mcp add --transport http moda https://mcp.moda.app

{
  "mcpServers": {
    "moda": {
      "type": "streamable-http",
      "url": "https://mcp.moda.app"
    }
  }
}

{
  "mcp": {
    "servers": {
      "moda": {
        "type": "streamable-http",
        "url": "https://mcp.moda.app"
      }
    }
  }
}

Enable Moda in Claude chats

This step only applies to Claude's chat apps (Claude Desktop, claude.ai, and Claude Mobile). If you're using Claude Code, Cursor, or VS Code, you can skip this section and go straight to trying prompts.

After you add and authenticate the connector, turn it on for the chat where you want to use it.

1. Click the + button in the chat box.
2. Open Connectors.
3. Enable Moda for that conversation.

If the connector is added in settings but not enabled in the current chat, Claude won't be able to call Moda's tools.

Choose the right workspace

If you belong to multiple Moda organizations or teams, Moda uses your default workspace unless you switch it first.

Ask your AI assistant:

What Moda organization and team am I currently using?

Switch Moda to the "Acme Corp" organization and the "Marketing" team.

This helps make sure new designs, exports, and brand kits are created in the correct workspace.

Try it out

Ask Claude to create your first design:

Create a 5-slide pitch deck for a mobile app called "FocusTime" that helps
people reduce screen time. Include a title slide, the problem, the solution,
key features, and a call to action.

Claude will create a new Moda canvas and give you a link to view and edit it.

You can also work with existing designs. Open a Moda canvas, click Share to get a link, and paste it into your conversation:

Build this login page as a React component: https://moda.app/s/your-share-token

Claude will fetch the design as structured data and generate production-ready code.

Give your AI agent access to Moda docs

If you're building with the Moda REST API, you can give your AI agent direct access to these docs using the mcpdoc MCP server by LangChain. This lets the agent search and read Moda documentation without you having to copy-paste.

The mcpdoc server runs locally, so it's available in editors that support local MCP servers (not claude.ai or Claude mobile).

Prerequisite: mcpdoc runs via uvx, which ships with uv. Install it first if you don't have it:

curl -LsSf https://astral.sh/uv/install.sh | sh

On macOS you can also run brew install uv. See the uv installation docs for other platforms.

{
  "mcpServers": {
    "moda-docs": {
      "command": "uvx",
      "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"]
    }
  }
}

claude mcp add mcpdoc -- uvx mcpdoc --urls "https://docs.moda.app/llms.txt"

{
  "mcpServers": {
    "moda-docs": {
      "command": "uvx",
      "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"]
    }
  }
}

{
  "mcp": {
    "servers": {
      "moda-docs": {
        "command": "uvx",
        "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"]
      }
    }
  }
}

Your agent can then look up API endpoints, authentication details, webhook formats, and more — directly from Moda's docs.

You can also access the docs as plain text for any LLM:

• Index: https://docs.moda.app/llms.txt
• Full docs: https://docs.moda.app/llms-full.txt

Example prompts

Once connected, you can start chatting right away. Here are a few prompts to try.

Be explicit about the output type in your prompt, especially for non-slide work. Phrases like PDF report, Instagram carousel, diagram, or presentation slides help Moda choose the right format.

Create a slide deck

Create a 10-slide pitch deck for a developer tools startup.
Include problem, solution, market, product, traction, team, and ask slides.

Create social media posts

Create 5 Instagram carousel slides announcing our new AI feature.
Use bold typography and a modern, clean layout.

Create a report

Create a one-page project status report as a PDF. The project is 70% complete
and on track. Include sections for progress, risks, and next steps.

Set up your brand

Create a brand kit from our website: https://yourcompany.com

Implement a design as code

Build this landing page layout as a React component:
https://moda.app/s/your-share-token

Extract design details

Read this Moda design and create a theme file with colors, fonts, and spacing tokens.

Browse your canvases

Search my Moda canvases for anything related to "product launch" and summarize what's there.

For many more examples, see the Creating Designs guide.

What's next

• Creating Designs Guide — Detailed prompts and tips for creating designs with Claude
• MCP Server Overview — Architecture, transport modes, and what the agent sees
• Setup Details — Full setup instructions including local server and troubleshooting
• Tools Reference — Detailed reference for all MCP tools
• Design-to-Code Guide — Best practices for turning designs into code