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

# Getting Started with Moda MCP

> Connect Moda to Claude and start creating designs from a conversation in minutes.

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)](https://modelcontextprotocol.io/). 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

<Columns cols={2}>
  <Card title="Create designs from a conversation" icon="comments" href="/mcp/create-designs">
    Ask Claude to generate slide decks, social posts, ads, reports, and more. Claude creates a fully editable Moda canvas and returns a link.
  </Card>

  <Card title="Iterate with follow-ups" icon="arrows-rotate">
    Refine any design by continuing the conversation. "Make the headline bigger," "add a testimonial slide," "switch to dark mode."
  </Card>

  <Card title="Use your brand automatically" icon="palette">
    Set up a brand kit once (Claude can do this from your website URL) and every design uses your colors, fonts, and logos.
  </Card>

  <Card title="Design to code" icon="code" href="/mcp/design-to-code">
    Paste a Moda share link and Claude generates framework-specific code (React, Vue, HTML/CSS, and more).
  </Card>

  <Card title="Extract design tokens" icon="eye-dropper">
    Pull colors, fonts, spacing, and corner radii from any canvas to build consistent theme files.
  </Card>

  <Card title="Browse and search" icon="magnifying-glass">
    List your canvases or search by name directly from your conversation without switching to the browser.
  </Card>

  <Card title="Install the agent skill" icon="sparkles" href="/mcp/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.
  </Card>
</Columns>

## How it works

Moda uses the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) — 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:

```mermaid theme={null}
flowchart LR
  A[You describe<br/>what you want] --> B[Claude calls<br/>Moda MCP tools]
  B --> C[Moda's AI agent<br/>builds the canvas]
  C --> D[You get a link<br/>to your design]
```

**Design to code** — Claude can work in reverse:

```mermaid theme={null}
flowchart LR
  A[You share a<br/>Moda design link] --> B[Claude reads<br/>the design]
  B --> C[Claude generates<br/>framework-specific 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](/mcp/create-designs) 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](/mcp/design-to-code) for best practices.

## Quickstart

### Prerequisites

* A [Moda](https://moda.app) account (free to start)
* A supported MCP-capable host app: [Claude Desktop](https://claude.ai/download), [claude.ai](https://claude.ai), [Claude Code](https://claude.ai/code), [Claude mobile](https://claude.ai/download), [Cursor](https://cursor.com), or [VS Code](https://code.visualstudio.com/) 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.

<Tabs>
  <Tab title="Claude Desktop">
    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.
  </Tab>

  <Tab title="Claude.ai (browser)">
    Go to **Customize** in your sidebar ([claude.ai/customize](https://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.
  </Tab>

  <Tab title="Claude Code">
    Run in your terminal:

    ```bash theme={null}
    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.
  </Tab>

  <Tab title="Claude Mobile">
    Connectors set up on claude.ai sync to the Claude mobile app automatically. Add the Moda connector on [claude.ai/settings](https://claude.ai/settings) and it will be available on your phone.

    This lets you create and iterate on designs from your phone.
  </Tab>

  <Tab title="Cursor">
    Open **Cursor Settings > MCP** and add a new server, or add to `~/.cursor/mcp.json`:

    ```json theme={null}
    {
      "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.
  </Tab>

  <Tab title="VS Code">
    Add to your `settings.json`:

    ```json theme={null}
    {
      "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.
  </Tab>
</Tabs>

### 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

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.

<Tabs>
  <Tab title="Claude Code">
    Run in your terminal:

    ```bash theme={null}
    claude mcp add --transport http moda-docs https://docs.moda.app/mcp
    ```
  </Tab>

  <Tab title="Claude.ai">
    Go to [Customize](https://claude.ai/customize) in your sidebar, click the **+** button, choose **Add custom connector**. Set the name to `Moda Docs` and the URL to:

    ```text theme={null}
    https://docs.moda.app/mcp
    ```
  </Tab>

  <Tab title="Claude Desktop">
    Open Claude Desktop, click **Customize** in the sidebar, then the **+** button > **Add custom connector**. Set the name to `Moda Docs` and the URL to:

    ```text theme={null}
    https://docs.moda.app/mcp
    ```
  </Tab>

  <Tab title="Cursor">
    Open **Cursor Settings > MCP** and add a new server, or add to `~/.cursor/mcp.json`:

    ```json theme={null}
    {
      "mcpServers": {
        "moda-docs": {
          "url": "https://docs.moda.app/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="VS Code">
    Add to your VS Code settings (`settings.json`):

    ```json theme={null}
    {
      "mcp": {
        "servers": {
          "moda-docs": {
            "type": "http",
            "url": "https://docs.moda.app/mcp"
          }
        }
      }
    }
    ```
  </Tab>
</Tabs>

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

Agents that support [agent-skill](https://agentskills.io/specification) 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](https://docs.moda.app/llms.txt)
* **Full docs:** [https://docs.moda.app/llms-full.txt](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](/mcp/create-designs).

## What's next

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