Cursor と Claude Code を接続する

最終更新日: 2026年10月17日

Plus で、Cursor か Claude Code から DesignLayer のカタログを使えるようにする接続手順。API キーの貼り付けは不要です。

このページでできること

エディタの MCP 一覧で DesignLayer が Connected になります。接続しただけではコピー回数は減りません。コンポーネントを取ったときに減ります。

Plus でログインできること。Free では接続できません。

ブラウザで「接続を許可」を押します。API キーを発行して設定ファイルへ貼る手順はありません。

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

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

3. Cursor の MCP 設定に DesignLayer が出たら、Authenticate を押します。

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

5. Cursor に戻り、DesignLayer が Connected になれば完了です。

ターミナルで次を実行します。アカウント設定の Claude Code タブからもコピーできます。URL は、開いている DesignLayer のオリジンに合わせてください。

bash

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

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

ブラウザの同意画面で「接続を許可」を押します。Claude Code 側で DesignLayer が接続済みになれば完了です。

リモート MCP と OAuth に対応したクライアントなら、サーバー URL に次を追加し、同じ同意画面で許可します。

stdio で起動する場合は、MCP の設定に次を足します。最初にコンポーネントを取ったとき、ブラウザが開いて同じ接続をします。

json

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

アカウント設定の DesignLayer MCP にある接続中のアプリで、対象の切断を押します。そのエディタは、もう一度接続するまで DesignLayer を呼べません。

同じエディタを接続し直すと、そのエディタの以前の接続は切れます。

接続できたら「チャットからコンポーネントを取る」へ進みます。Needs authentication と出たときの直し方は「うまくいかないとき」にあります。