Setup - Moda

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.

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 for per-client setup with Authorization: Bearer headers.

Connect your editor

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

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

Verify the connection:

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:

claude mcp remove moda

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"
    }
  }
}

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.

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

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

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

Documentation Index

​Connect your editor

​Verifying the connection

​Troubleshooting

​Server not connecting

Connect your editor

Verifying the connection

Troubleshooting

Server not connecting