designlayer-mcp

MCP server for DesignLayer: search the motion React catalog and pull components into your app from Cursor, Claude Code, and other MCP clients.

Connecting requires a DesignLayer Plus or Pro plan. Copy limits are the same as on the website.

Recommended: remote server (no install)

Add https://design-layer.com/mcp as an HTTP MCP server. Your editor opens the browser, you click Allow connection, and you're done. There's no API key to copy.

• Cursor: use the Add to Cursor button in DesignLayer account settings → DesignLayer MCP.

• Claude Code:

  claude mcp add --transport http DesignLayer https://design-layer.com/mcp

  Then run /mcp in Claude Code, pick DesignLayer, and choose Authenticate.

Local server via npx (stdio)

{
  "mcpServers": {
    "DesignLayer": {
      "command": "npx",
      "args": ["-y", "designlayer-mcp"]
    }
  }
}

The first get_component call opens the browser to connect your account. You can also connect ahead of time:

npx -y designlayer-mcp login    # connect in the browser
npx -y designlayer-mcp logout   # remove the saved connection

The connection is saved to ~/.designlayer/mcp-credentials.json.

| Env | Default | | |---|---|---| | DESIGNLAYER_API_KEY | — | Optional. An existing DesignLayer API key. Takes precedence over the browser connection. | | DESIGNLAYER_ORIGIN | https://design-layer.com | Point at http://127.0.0.1:3000 for local development. |

Tools

• search_catalog: search public components by text, kind, or category.
• get_component: fetch a component bundle and integrate it to match the live preview.

You can disconnect anytime from DesignLayer account settings → DesignLayer MCP.

日本語

Cursor や Claude Code から DesignLayer のカタログを検索し、コンポーネントを取り込むための MCP サーバーです。接続できるのは Plus / Pro プランです。

• おすすめ：https://design-layer.com/mcp を HTTP の MCP サーバーとして追加します。ブラウザで「接続を許可」を押すだけで使えて、API キーのコピーは要りません。Cursor はアカウント設定のボタンから追加できます。
• npx 版：npx -y designlayer-mcp を設定に追加します。初めてツールを使ったときにブラウザが開いて接続します。