👌

Cursorとshadcn/uiのMCP接続 クイックスタートガイド

に公開
Model Context Protocol
shadcn/ui
tech

はじめに

この記事では、Cursorとshadcn/uiをMCP (Model-Component-Provider) 接続するための設定手順を説明します。

1. shadcn MCPサーバーの設定

まず、shadcn/uiを使用するプロジェクトで、MCPサーバーを設定します。
ターミナルで以下のコマンドを実行してください。

npx shadcn@latest mcp init --client cursor

2. Cursorの設定

次に、Cursorエディタ側でMCPサーバーを有効にします。

  1. Cmd + Shift + P (Windows/Linux: Ctrl + Shift + P) でコマンドパレットを開きます。
  2. 「Cursor Settings」を検索し、設定画面を開きます。
  3. 左側のメニューから「Tools & MCP」を選択します。
  4. 一覧にある「shadcn」のスイッチを ON にします。

3. 動作確認（プロンプト例）

設定が完了すると、AIチャットでshadcn/uiを操作できるようになります。
以下のプロンプトを試してみてください。

利用可能なコンポーネントの表示:

Show me all available components in the shadcn registry

コンポーネントの追加:

Add the button, dialog and card components to my project

コンポーネントを使用したコード生成:

Create a contact form using components from the shadcn registry

まとめ

以上で、Cursorとshadcn/uiのMCP接続設定は完了です。

Discussion