MCPサーバ

MCPとは？

MCP Model Context Protocolは、AIアシスタントが外部のデータソースやツールにアクセスできるようにする標準化されたプロトコルです。Nuxt UIは、Claude Code、Cursor、WindsurfなどのAIアシスタントがコンポーネント情報、ソースコード、使用例に直接アクセスできるMCPサーバを提供します。

MCPサーバーは、当社のコンポーネントライブラリへの構造化されたアクセスを提供し、AIツールがNuxt UI開発を容易に理解し支援できるようにします。

利用可能なリソース

Nuxt UI MCPサーバーは、ディスカバリのために以下のリソースを提供します。

• **resource://nuxt-ui/components**カテゴリ付きで利用可能なコンポーネントをすべてブラウズ
• **resource://nuxt-ui/composables**利用可能なすべてのコンポジットをカテゴリ付きでブラウズ
• **resource://nuxt-ui/examples**利用可能なコード例をすべて見る
• **resource://nuxt-ui/templates**利用可能なすべてのプロジェクトテンプレートを閲覧する
• **resource://nuxt-ui/documentation-pages**利用可能なすべてのドキュメントページを閲覧する

@を使用してClaude Codeなどのツールでこれらのリソースにアクセスできます。

利用可能なツール

Nuxt UI MCPサーバーは、カテゴリごとに以下のツールを提供します。

検索ツール

• **search-components**コンポーネントを名前、カテゴリ、インテントで検索します。"segmented control"や"combobox"などの代替名がマッチし、結果は関連性によってランク付けされます。パラメータなしで、すべてのコンポーネントが表示されます。
• **search-composables**名前または説明でコンポジブルを検索します。パラメータなしで、すべてのコンポジブルをリストします。
• search-icons Iconifyコレクション全体のアイコンを検索しますデフォルトはlucideです。Nuxt UIで使用されるi-{prefix}-{name}形式のアイコン名を返します

コンポーネントツール

• **get-component**コンポーネントのドキュメントと詳細を取得します。sectionsパラメータusage examples api theme changelogをサポートしています。
• get-component-metadata props、slots、eventsを含むコンポーネントのメタデータを取得します軽量で、ドキュメントコンテンツはありません。Propsはデフォルトでコンパクトです。生の再帰的プロップスキーマにはfull: trueを渡します

ドキュメンテーションツール

• **search-documentation**ドキュメントのページをタイトル、説明、セクションで検索します。パラメータなしで、すべてのページをリストします。sectionを使用してフィルタを行います（例："getting-started"、"components"）
• **get-documentation-page**ドキュメントページの内容をURLパスで取得します。headingsパラメータをサポートして、特定のh2セクション（例：["Usage", "API"]）のみを取得し、応答サイズを小さくします。

Template Tools

• list-templates：利用可能なすべてのNuxt UIテンプレートをリストします。
• **get-template**テンプレートの説明、機能、リンクを取得します。

サンプルツール

• list-examples：利用可能なすべてのUI例の名前を一覧表示します。
• get-example UIサンプルのソースコードを取得

Migration Tools

• **get-migration-guide**このバージョンのNuxt UIの移行ガイドとアップグレード手順を取得します。

利用可能なツールを制限

オプションのX-MCP-Tools HTTPヘッダーをカンマ区切りのツール名リストに設定して、アシスタントが必要とするツールのみを公開します。これにより、アシスタントで定義されたコンテキストを減らすことができます。

正確なケバブケースのMCPツール名を使用します。

{
  "X-MCP-Tools": "search-components,get-component"
}

ヘッダーがないとすべてのツールが公開されず、空のヘッダーがあるとツールが公開されません。

Availableプロンプト

Nuxt UI MCPサーバーは、一般的なワークフローのガイドプロンプトを提供します。

• find-component-for-usecase：特定のユースケースに最適なコンポーネントを見つける
• implement-component-with-props：適切なプロパティを持つ完全なコンポーネント実装を生成する
• **setup-project-with-template**プロジェクトテンプレートのセットアップ手順をガイドする

/を使用してClaude Codeなどのツールでこれらのリソースにアクセスできます。

設定

Nuxt UI MCPサーバーはHTTPトランスポートを使用し、さまざまなAIアシスタントで構成できます。

ChatGPT

以下の手順に従って、ChatGPT内のコネクタとしてNuxt UIを設定します。

1. 開発者モードを有効にする：
   • 「設定」>「コネクタ」>「詳細設定」>「開発者モード」に移動
2. オープンチャットGPT設定
3. ** コネクタタブで、新しいコネクタを作成します。**
   • 名前を付けます：Nuxt UI
   • MCPサーバURL https://ui.nuxt.com/mcp
   • 認証None
4. クリックCreate

Nuxt UIコネクタは、後で会話中にコンポーザーの「開発者モード」ツールに表示されます。

Claudeコード

CLIコマンドを使用してサーバーを追加します。

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Claudeデスクトップ

セットアップ手順：

1. Claude Desktopを開き、「設定」>「開発者」に移動します。
2. "Edit Config"をクリックします。ローカルのClaudeディレクトリが開きます。
3. カスタムMCPサーバー構成でclaude_desktop_config.jsonファイルを変更します。

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. Claude Desktopアプリを再起動します。Nuxt UI MCPサーバーが登録されているはずです。

カーソル

Quickインストール

下のボタンをクリックして、カーソルに直接Nuxt UI MCPサーバーをインストールします。

Manualセットアップ手順：

1. カーソルを開き、「設定」>「ツールとMCP」に移動します。
2. Nuxt UI MCPサーバー構成の追加

または、プロジェクトルートで手動で.cursor/mcp.jsonを作成/更新します。

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Gemini CLI

セットアップ手順：

1. Gemini CLI設定ファイル通常は～/. gemini/settings.jsonまたは環境で指定されているを探します。
2. mcpServersオブジェクトに次の構成を追加します。

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. ターミナルセッションを再起動するか、CLIをリロードします。Nuxt UI MCPサーバーツールが使用可能になります。

GitHub Copilot Agent

すでにVisual Studio CodeでMCPサーバーを構成している場合は、serversキーをmcpServersに置き換え、Copilotで使用できるツールを指定するtoolsキーを追加します。

セットアップ手順：

1. GitHubリポジトリに移動します
2. x設定に移動> コードと自動化> Copilot> Coding agent
3. MCP構成セクションで、次の構成を追加します。

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

4. Click Save

構成の検証：

MCPサーバが正しく設定されていることを確認する。

1. リポジトリに問題を作成し、Copilotに割り当てます。
2. Copilotがプルリクエストを作成するのを待つ
3. プルリクエストで、「Copilot started work」タイムラインイベントの「View session」をクリックします。
4. 右上の省略記号ボタン...をクリックし、サイドバーのCopilotをクリックします。
5. Start MCP Serversステップを展開して構成されたNuxtツールを確認します

GitHub CopilotコーディングエージェントでMCPを使用する詳細は、Extendコーディングエージェントwith MCPを参照してください。

GitHub Copilot CLI

セットアップ手順：

1. GitHub Copilot CLIをインタラクティブモードで起動します。
2. /mcp addを実行します。
3. 設定フォームに次のように入力します。
   • Server Name nuxt-ui
   • Server Type HTTP
   • URL https://ui.nuxt.com/mcp
   • HTTPヘッダ空のまま
   • ツール *
4. Ctrl + Sを押して保存します。CLIを再起動することなく、MCPサーバをすぐに利用できます。

または~/.copilot/mcp-config.jsonに直接サーバを追加します：

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

/mcp showを使用してサーバーが設定されていることを確認する。

詳細は、 GitHub Copilot用MCPサーバーの追加CLIを参照してください。

Google反重力

セットアップ手順：

1. エディタのエージェントパネルの上部にある"..."ドロップダウンからMCPストアを開きます。
2. 「MCPサーバーの管理」をクリックします。
3. “View raw config”をクリックします。
4. カスタムMCPサーバー構成でmcp_config.jsonを変更します。

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. "Manage MCP Servers"タブに戻り、"Refresh"をクリックします。Nuxt UI MCPサーバーが表示されます。

Leチャットミストラル

セットアップ手順：

1. 「インテリジェンス」>「コネクタ」に移動します。
2. "Add Connector"ボタンをクリックし、"Custom MCP Connector"を選択します。
3. カスタムMCPコネクタを作成します。
   • コネクタ名：NuxtUI
   • Server URL https://ui.nuxt.com/mcp

OpenCode

セットアップ手順：

1. プロジェクトルートでopencode.jsonを作成します。
2. 以下の設定を追加します。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxt.com/mcp",
      "enabled": true
    }
  }
}

Visual Studio Code

セットアップ手順：

1. VS Codeを開き、コマンドパレットにアクセスします（Ctrl/Cmd + Shift + P）
2. 「Preferences：Open Workspace Settings」と入力して選択します。
3. プロジェクトの.vscodeフォルダに移動するか、存在しない場合は作成します。
4. 以下の構成でmcp.jsonファイルを作成または編集します。

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

headersエントリを削除して、すべてのNuxt UI MCPツールを利用できるようにします。

ウィンドサーフィン

セットアップ手順：

1. Windsurfを開き、「設定」>「Windsurf設定」>「Cascade」に移動します。
2. "Manage MCP"ボタンをクリックし、"View raw config"オプションを選択します。
3. MCP設定に以下の構成を追加します。

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

Zed

セットアップ手順：

1. Zedを開き、“Settings”>“Open Settings”に進みます。
2. JSON設定ファイルに移動します。
3. 以下のコンテキストサーバー構成を設定に追加します。

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

使用例

設定が完了すると、AIアシスタントに次のような質問をすることができます。

• "すべての利用可能なNuxt UIコンポーネントの一覧"
• "Get Button component documentation"
• “ボタンの使用例だけを見せてください”
• “入力が受け入れる小道具は何ですか？”
• “フォーム関連コンポーネントの検索”
• “lucideで矢印アイコンを検索する”
• "リストダッシュボードテンプレート"
• “テンプレート設定手順を取得する”
• "インストールガイドを表示"
• “移行ガイドを入手する”
• “すべての例をリスト”
• "ContactFormサンプルコードを取得"

AIアシスタントはMCPサーバーを使用して構造化JSONデータをフェッチし、開発中にNuxt UIのガイド付き支援を提供します。