DesignLayer MCP を Cursor・Claude Code に接続する

最終更新日: 2026年9月30日

Cursor や Claude Code から、DesignLayer のカタログ検索とコンポーネントの取り込みを頼めるようにする手順です。アカウント設定のボタンかコマンドで追加し、ブラウザで接続を許可するだけで使えます。API キーのコピーは要りません。Plus / Pro 向け。

サイトとエディタを行き来しなくてよくなる

ふだんは、DesignLayer のサイトでコンポーネントを探し、Copy for Cursor を押して、エディタのエージェントに貼り付けていると思います。

DesignLayer MCP をエディタにつなぐと、この往復がなくなります。エディタのチャットで「DesignLayer でヒーローセクションを探して」「album-calendar をトップページに入れて」と頼むだけで、エージェントがカタログを検索し、コンポーネントを取り込みます。

取り込む内容は、サイトの Copy for Cursor と同じです。ファイルを書き、ライブプレビューの動きや余白に合わせて組み込むのは、これまでどおりエージェントです。

接続できるのは Plus / Pro プランです。Plus / Pro はコンポーネントのコピーが無制限なので、MCP からも回数を気にせず取り込めます。

完成 1 ページの Templates は現在準備中のため、MCP ではまだ取得できません。

接続は、ブラウザで DesignLayer にログインして「接続を許可」を押すだけです。API キーを発行したり、設定ファイルに貼ったりする必要はありません。

1. DesignLayer にログインし、アカウント設定の「DesignLayer MCP」を開きます。

2. 「Cursor」タブの「Cursor に追加」を押します。Cursor が開くので、DesignLayer の追加を承認します。

3. Cursor の MCP 設定に DesignLayer が表示されたら、「Authenticate」を押します。

4. ブラウザに DesignLayer の同意画面が開きます。ログイン中のアカウントを確認して「接続を許可」を押します。

5. Cursor に戻り、DesignLayer が「Connected」になっていれば完了です。

ターミナルで次のコマンドを実行します。アカウント設定の「Claude Code」タブからもコピーできます。

bash

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

Claude Code で /mcp を開き、DesignLayer を選んで「Authenticate」を選びます。

ブラウザに DesignLayer の同意画面が開くので、「接続を許可」を押せば完了です。

OAuth に対応したリモート MCP を使えるクライアントなら、次の URL を MCP サーバーとして追加すれば、同じようにブラウザで接続できます。

リモートのサーバーではなく、手元で MCP サーバー（stdio）を動かしたい場合は、MCP 設定に次を追加します。初めてコンポーネントを取り込むときにブラウザが開き、アカウントを接続します。

json

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

エディタのチャットで、たとえば次のように頼んでみてください。

「DesignLayer でヒーローセクションを探して」 — エージェントが search_catalog でカタログを検索し、候補とプレビューの URL を返します。

「album-calendar をトップページに組み込んで」 — エージェントが get_component でコンポーネントを取得し、ファイルの作成と必要なパッケージのインストールまで進めます。

コンポーネントの ID は、サイトの各コンポーネントのページの URL（/components/ の後ろ）でも確認できます。

チャットで接続ボタンが出る、または MCP 設定に「Needs authentication」と出る場合は、「Authenticate」から接続し直してください。エディタが DesignLayer に一時的につながらなかったときにも、この表示になります。

同意画面に「MCP 接続は有料プランの機能です」と出る場合は、Plus または Pro に登録してから、もう一度接続してください。

同意画面に「この接続リクエストは使えません」と出る場合は、エディタ側から接続をやり直してください。

接続中のエディタは、アカウント設定の DesignLayer MCP の「接続中のアプリ」に並びます。「解除」を押すと、そのエディタは接続し直すまで DesignLayer を使えなくなります。

同じエディタで接続し直すと、前の接続は自動で解除されます。