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 returns a link.

Iterate with follow-ups

Refine any design by continuing the conversation. “Make the headline bigger,” “add a testimonial slide,” “switch to dark mode.”

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).

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.

Install the agent skill

Drop our skill into Claude, Cursor, or the Agent SDK and your agent learns the right way to drive Moda — without you re-explaining the rules.

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. Design creation — the most common flow: Design to code — Claude can work in reverse: 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.

Open Claude Desktop, click Customize in the sidebar, then the + button > Add custom connector. For the Name, input Moda, and use the MCP server URL below and click Add:

https://mcp.moda.app/mcp

Click Connect after adding and you’ll be prompted to sign into Moda and authorize your account.

Go to Customize in your sidebar (claude.ai/customize) and click the + button > Add custom connector. For the Name, input Moda, and use the MCP server URL below and click Add:

https://mcp.moda.app/mcp

Click Connect after adding and you’ll be prompted to sign into Moda and authorize your account.Team and Enterprise plans: An admin must first add the Moda connector in Admin Settings > Connectors. After that, individual members can connect from their personal Customize sidebar.

Run in your terminal:

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

Then type /mcp to see your connected servers. Click Authenticate next to the Moda server to sign in via your browser.

Open Cursor Settings > MCP and add a new server, or add to ~/.cursor/mcp.json:

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

After adding the server, go to Cursor Settings > MCP and click the Authenticate button next to the Moda server. This opens a browser window where you sign in to your Moda account.

Add to your settings.json:

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

VS Code will prompt you to authenticate when you first use an MCP tool. Click the sign-in link to authorize in your browser.

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.

Click the + button in the chat box.
Open Connectors.
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

You can give your AI agent direct access to these docs through a hosted MCP server at https://docs.moda.app/mcp. Your agent gets a search tool and a read-only filesystem over every page — no local install required, and it works in any editor that speaks HTTP MCP, including claude.ai on the web.

Claude Code
Claude.ai
Claude Desktop
Cursor
VS Code

Run in your terminal:

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

Go to Customize in your sidebar, click the + button, choose Add custom connector. Set the name to Moda Docs and the URL to:

https://docs.moda.app/mcp

Open Claude Desktop, click Customize in the sidebar, then the + button > Add custom connector. Set the name to Moda Docs and the URL to:

https://docs.moda.app/mcp

Open Cursor Settings > MCP and add a new server, or add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "moda-docs": {
      "url": "https://docs.moda.app/mcp"
    }
  }
}

Add to your VS Code settings (settings.json):

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

Your agent can then look up API endpoints, authentication details, webhook formats, and more — directly from Moda’s docs. Agents that support agent-skill auto-discovery will also pick up the moda-mcp skill from https://docs.moda.app/.well-known/agent-skills/ — a canonical pre-flight for start_design_task covering the prompt-gathering checklist, brand-kit defaults, the 2–10 minute task lifecycle, and format_category disambiguation. 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 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

Documentation Index

​What you can do

Create designs from a conversation

Iterate with follow-ups

Use your brand automatically

Design to code

Extract design tokens

Browse and search

Install the agent skill

​How it works

​Two common workflows

​1. Create designs from a conversation

​2. Turn designs into production code

​Quickstart

​Prerequisites

​Connect to the remote server

​Enable Moda in Claude chats

​Choose the right workspace

​Try it out

​Give your AI agent access to Moda docs

​Example prompts

​Create a slide deck

​Create social media posts

​Create a report

​Set up your brand

​Implement a design as code

​Extract design details

​Browse your canvases

​What’s next