DesignLayer MCP を Cursor に接続する
最終更新日: 2026年9月4日
DesignLayer が用意する MCP サーバーを Cursor に追加する。公開コンポーネントを検索し、API キーで TSX を取得。無料／Pro のコピー枠はサイトと同じ。
ここで MCP がすること
サーバーは DesignLayer 側です。Cursor はそれに接続するクライアントで、カタログ検索やコンポーネント取得を頼みます。検索は公開です。ソースはアカウントに紐づきます。無料は日本時間でコンポーネント 1 日 1 回、Pro は無制限、Templates は Pro のままです。
サイトで見て Copy for Cursor して貼る、という手順を置き換えます。ファイルをリポジトリに書くのは、これまでどおりエージェントです。
API キーを発行する
ログインして、アカウント設定の DesignLayer MCP からキーを発行します。秘密は一度だけ表示されます。漏れたら削除してください。
キーはサイトと同じコピー API に Authorization: Bearer として送られます。リポジトリにコミットしないでください。
Cursor にサーバーを追加する
このリポジトリでは、一度だけ mcp ディレクトリで npm install && npm run build します。MCP 設定では node で mcp/dist/index.js を起動します。
DESIGNLAYER_API_KEY に秘密を入れます。本番カタログは DESIGNLAYER_ORIGIN=https://design-layer.com。ローカルの Next アプリなら http://127.0.0.1:3000 を指してください。
エージェントが呼べるツール
search_catalog — 文言・kind・カテゴリでコンポーネントとテンプレートを探す。キーは不要です。
get_component — sakura-editorial-poster のような公開 ID の Copy for Cursor バンドルを返す。
get_template — 完成 1 ページを返す。Pro のみ。