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

# Setup

> Connect Moda to Claude Desktop, claude.ai, Claude Code, Claude mobile, Cursor, or VS Code.

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

This page focuses on the most common **interactive** setups — you sign in through your browser once, then Claude / Cursor / VS Code manage tokens for you.

<Info>
  **Running Moda MCP in a scheduled job, managed agent, or CI pipeline?** Use API-key auth instead of OAuth — no browser
  required. See the [Authentication page → Setting up API-key auth](/mcp/authentication#setting-up-api-key-auth) for
  per-client setup with `Authorization: Bearer` headers.
</Info>

## Connect your editor

<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 this command in your terminal:

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

    Verify the connection:

    ```bash theme={null}
    claude /mcp
    ```

    You should see `moda` listed as a connected server. When you first use an MCP tool, Claude Code will open your browser for sign-in.

    To remove the server later:

    ```bash theme={null}
    claude mcp remove moda
    ```
  </Tab>

  <Tab title="Claude Mobile">
    Connectors set up on claude.ai sync to the Claude mobile app automatically.

    1. Go to [claude.ai/settings](https://claude.ai/settings) on your computer
    2. Add the Moda connector (see the **Claude.ai (browser)** tab)
    3. Open the Claude app on your phone — Moda will be available

    This lets you create designs from your phone by chatting with Claude.
  </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"
        }
      }
    }
    ```

    You can also use a project-level config at `.cursor/mcp.json` in your project root.

    Cursor handles the OAuth flow automatically when you first connect.
  </Tab>

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

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

## Verifying the connection

After setting up the server, test it by asking the AI agent to describe a Moda design:

```
What's in this Moda design? https://moda.app/s/your-share-token
```

The agent should call the `get_moda_canvas` tool and return a description of the canvas contents.

## Troubleshooting

### Server not connecting

* **Claude Desktop**: Check that Moda appears under **Connectors** (click the **+** button in the chat box). If not, go to **Settings > Connectors** and re-add it. Try restarting the app.
* **Claude.ai**: Check that the connector appears in [claude.ai/settings](https://claude.ai/settings) under **Connectors**. Try removing and re-adding it.
* **Claude Code**: Run `claude /mcp` to verify the server is listed. Try `claude mcp remove moda` and re-add it.
* **Claude Mobile**: Connectors sync from claude.ai. Make sure the connector is set up in [claude.ai/settings](https://claude.ai/settings) under **Connectors** first, then restart the mobile app.
* **Cursor**: Check that the MCP server shows as "connected" in Cursor Settings > MCP. Try restarting the MCP server from the settings panel.
* **VS Code**: Ensure the MCP configuration is in your user or workspace `settings.json`. Restart VS Code after adding the config.