【Cursor MCP】コンポーネントを検索・取り込みする方法と接続手順を紹介
公開日: 2026年9月12日 · 読了目安 9 分
Cursor の MCP で React コンポーネントカタログを検索し、ソースをそのまま取り込む方法。DesignLayer MCP の接続手順（Cursor・Claude Code・npx）、頼み方の例、うまくいかないときの対処、向いている人をまとめました。
Cursor MCP なしだとコピペの往復で手が止まる
Cursor で Next.js の LP を組んでいて、ヒーローや料金表を探すたびにブラウザへ移っていませんか。
カタログを開き、動きを確かめてコピーし、Cursor に戻って貼る。この往復が1日に何度もあると、考えていた流れがそのたびに途切れます。
しかも、戻ったあとにも作業が残ります。
どこに置くか
どの npm パッケージが要るか
見出しをどう差し替えるか
こうしたことを、毎回エージェントに説明し直すことになるからです。
この記事では、Cursor の MCP を使って、コンポーネントカタログをエディタから直接引く方法を解説します。後半では、DesignLayer MCP の接続手順とエージェントへの頼み方の例も紹介します。
Cursor MCP を使わないとコピペの往復が減らない理由
往復が減らないのは、作業する場所が2つに分かれているからです。動きの良し悪しを判断するのはブラウザで、コードを書くのはエディタです。
エージェントの側からはカタログが見えません。そのため、人が間に入って運ぶしかありません。
よくある遠回りは次のようなものです。
「かっこいいヒーローを作って」とだけ頼み、どこかで見た SaaS 風の見た目が出てくる
気に入ったデモのスクリーンショットを貼り、動きを言葉で説明して再現を頼む
部品のコード（TSX）だけを貼り、配置先や依存をエージェントに推測させて差分が大きくなる
どれも、エージェントが手元に「完成した部品と組み込み方」を持っていないことが原因です。
運ぶ回数を減らすには、エージェントが自分でカタログを検索できる状態が必要です。組み込み用の情報ごと取れれば、人が運ぶ工程はなくなります。
Cursor MCP でエージェントにカタログを直接引かせる
MCP（Model Context Protocol）は、外部のツールやデータを AI エージェントから呼び出せるようにする仕組みです。
Cursor や Claude Code に MCP サーバー（ツールを提供する側）を追加すると、そのツールをチャットの中から使えるようになります。
コンポーネントカタログを MCP でつなぐと、役割分担が次のように変わります。
人：ライブプレビューで動きを見て、どれを使うかを決める
エージェント：カタログを検索し、ソースと組み込みの指示を取得する
エージェント：ファイルを書き、依存を入れて文言を差し替える
ポイントは、動きの判断まで MCP に任せないことです。モーションは、ブラウザで実物を見ないと決められません。
決めたものを運ぶ工程だけをエージェントに渡します。そうすると往復が減り、判断の質も落ちません。
DesignLayer MCP でできることと Cursor への接続手順
DesignLayer は、人が組んだ React + Tailwind のモーション付きセクションを、ブラウザでライブプレビューしてコピーできるカタログです。
DesignLayer MCP をつなぐと、このカタログの検索とソースの取り込みを Cursor や Claude Code のチャットから頼めるようになります。
エージェントが使うツールは主に2つです。
search_catalog（探す命令）：公開カタログを検索し、候補とプレビューの URL を返す
get_component（取り込む命令）：コンポーネントを取得し、ファイルの作成とパッケージのインストールまで進める
取り込む内容は、サイトの Copy for Cursor と同じです。次の4つがひとまとまりになっているため、エージェントが配置先や依存を推測せずに済みます。
統合の指示
ライブプレビューの URL
本体の TSX
npm 依存
接続できるのは30日パス、Lifetime、Plus です。コンポーネントのコピーが無制限なので、MCP からも回数を気にせず取り込めます。
接続は、ブラウザで「接続を許可」を押す方式です。API キーを発行して設定ファイルに貼る必要はありません。
Cursor に DesignLayer MCP を接続する手順
DesignLayer にログインし、アカウント設定の「DesignLayer MCP」を開く
「Cursor」タブの「Cursor に追加」を押し、開いた Cursor で追加を承認する
Cursor の MCP 設定に DesignLayer が表示されたら「Authenticate」を押す
ブラウザの同意画面でアカウントを確認し、「接続を許可」を押す
Cursor に戻り、DesignLayer が「Connected」になっていれば完了
Claude Code に DesignLayer MCP を接続する手順
ターミナルで次のコマンドを実行します。同じコマンドは、アカウント設定の「Claude Code」タブからもコピーできます。
実行後、Claude Code で /mcp を開き、DesignLayer を選んで「Authenticate」を選びます。ブラウザの同意画面で「接続を許可」を押せば完了です。
同じプロジェクトで Claude Code と Cursor を使っていますか。作業の分け方は Cursor で Claude Code を使う にまとめています。
claude mcp add --transport http DesignLayer https://design-layer.com/mcp
ほかのエディタや自分のパソコンで MCP を動かす場合
ほかのエディタでも、ブラウザで許可する接続方式（OAuth）に対応していれば使えます。https://design-layer.com/mcp を MCP サーバーとして追加すれば、同じようにブラウザで接続できます。
ネット上のサーバーではなく、自分のパソコンで MCP サーバーを動かしたい場合もあります。そのときは、MCP 設定に次を追加します（stdio 方式）。
初めてコンポーネントを取り込むときにブラウザが開き、アカウントを接続します。
{
"mcpServers": {
"DesignLayer": {
"command": "npx",
"args": ["-y", "designlayer-mcp"]
}
}
}Cursor MCP でのコンポーネントの頼み方
接続できたら、まずは検索から頼みます。いきなり「入れて」と頼むより、候補を見てから取り込むほうが作り直しが少なくなります。
1. DesignLayer でヒーローセクションを探して。候補とプレビューの URL を出して。
2. （プレビューを見て決めたあと）
<コンポーネントID> を components/sections/ に追加して、
app/(marketing)/page.tsx から読み込んで。
Tailwind のクラスはそのまま。見出し・CTA・リンクをうちのプロダクト名に差し替えて。
page 全体はクライアントコンポーネントにしないで。MCP で検索してからコンポーネントを取り込む
検索の結果に出るプレビューの URL をブラウザで開きます。動きを確かめてから、取り込みを頼みます。
動きを見ずに取り込むと、入れてから「思った動きと違う」と戻ることになります。
コンポーネントの ID は、サイトの各コンポーネントのページ URL（/components/ の後ろ）でも確認できます。サイトで気に入ったものがあれば、その ID を伝えるのが最短です。
配置先と文言の差し替えを一文で添える
取り込む内容には統合の指示が含まれています。ただ、置き場所や文言はプロジェクトごとに違います。
次の3点を添えると、差分がレビューしやすくなります。
components/sections/ に置く
見出しをプロダクト名に変える
既存の色や余白の決まり（デザイントークン）に合わせる
Cursor MCP がうまくつながらないときの対処
チャットに接続ボタンが出る、または「Needs authentication」と出る：「Authenticate」から接続し直す
同意画面に「MCP 接続は有料プランの機能です」と出る：Plus に登録してから接続する
同意画面に「この接続リクエストは使えません」と出る：エディタ側から接続をやり直す
接続中のエディタは、アカウント設定の「接続中のアプリ」に並びます。使わなくなったエディタは、そこから「解除」できます。
Cursor MCP が向いている人・まだ要らない人
MCP は、カタログを日常のコーディングに混ぜるための入口です。毎日のようにエディタでセクションを組む人ほど、往復が減る効果は大きくなります。
向いている人：週に何度も LP やマーケティングページを組む人
向いている人：複数のセクションを同じ日に取り込み、エディタから出ずに作業したい人
まだ要らない人：月に1ページ程度しか作らない人や、まずカタログの質を確かめたい人
まだ要らない場合は、サイトの Copy for Cursor で十分です。プレビューの閲覧はアカウントもカードも不要です。
無料アカウントでは、無料サンプル10個を回数制限なくコピーできます。カタログ全体と MCP は30日ビルドパス（$19の1回払い、自動更新なし）、Lifetime Access（先着100名の$79の1回払い）、Plus（月額 $9、いつでも解約可）です。手で貼る流れに慣れてから MCP を足しても遅くありません。
サイトから貼る流れは https://design-layer.com/ja/articles/cursor-react-motion-components-guide で解説しています。
貼るときの指示文の型は https://design-layer.com/ja/articles/claude-cursor-copy-paste-components にまとめました。
Cursor MCP とコンポーネント取り込みのよくある質問
MCP の接続は30日パス、Lifetime、Plus に含まれます。
無料プランでは、サイトでライブプレビューを見て、Copy for Cursor（無料サンプル10個は無料アカウントで回数制限なし）で Cursor や Claude に貼る使い方になります。
まとめ：Cursor MCP でコンポーネントを取り込む流れ
サイトとエディタの往復は、エージェントがカタログを見られないことから生まれる
MCP でつなぐと、検索と取り込みをエージェントに任せられる
動きの判断は、人がライブプレビューで行う
DesignLayer MCP は「探す」と「取り込む」の2つの命令で、Copy for Cursor と同じ内容を取り込む
接続は30日ビルドパス（$19の1回払い）、Lifetime Access（$79の1回払い）、Plus（月額 $9）です。Free では接続できません。ブラウザで許可するだけで、API キーは不要
毎日セクションを組む人ほど効果が大きい。まずはサイトの無料コピーで試してもよい
まずはカタログでライブプレビューを眺めてみてください。閲覧はカード不要です。
カタログ：https://design-layer.com/ja/components
接続の詳しい手順は https://design-layer.com/ja/docs/cursor-mcp にあります。
DesignLayer を初めて使う場合は、https://design-layer.com/ja/articles/designlayer-cursor-beginner-guide から読むと流れがつかめます。
