MCPサーバー

HextaUI の MCP サーバーは、ここで読めるのと同じドキュメントをアシスタントに提供します。各コンポーネントの用途、props と data 属性、キーボード操作、動作するサンプル、インストール用のコマンドです。アシスタントは shadcn/ui の props を推測する代わりに、HextaUI が実際に提供しているものを使うようになります。

https://hextaui.com/mcp でホストされている読み取り専用のサーバーです。インストールも API キーも不要です。このサイトのバージョンのドキュメントを読むため、常に最新です。

セットアップ

アシスタントにサーバーを追加してから、HextaUI で何かを作るよう頼んでみましょう。

Claude Code

claude mcp add --transport http hextaui https://hextaui.com/mcp

Cursor

{
  "mcpServers": {
    "hextaui": {
      "url": "https://hextaui.com/mcp"
    }
  }
}

VS Code

{
  "servers": {
    "hextaui": {
      "type": "http",
      "url": "https://hextaui.com/mcp"
    }
  }
}

Codex

[mcp_servers.hextaui]
url = "https://hextaui.com/mcp"

Windsurf

{
  "mcpServers": {
    "hextaui": {
      "serverUrl": "https://hextaui.com/mcp"
    }
  }
}

その他のクライアント

Streamable HTTP 経由のリモートサーバーに対応しているクライアントなら、URL を直接使えます。ローカルサーバーしか実行できないクライアントには、mcp-remote で橋渡しします。

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

ツール

すべてのツールは読み取り専用です。インストールはアシスタントに任せます。アシスタントがあなたと同じようにプロジェクト内で shadcn CLI のコマンドを実行します。

• search_docs は「削除前に確認」や props 名のような自然な言葉から、コンポーネント、サンプル、props、data 属性を探します。
• list_components は、すべてのコンポーネント、フック、ユーティリティをカテゴリ別に一覧します。
• get_component はページの全ドキュメントを返します。インストールコマンド、使い方、サンプル、キーボード操作、アクセシビリティ、API リファレンスを含みます。
• get_component_api は API リファレンスとキーボード操作だけを返します。
• get_examples はページ上の任意のサンプルのコードを返します。
• get_component_source は CLI がインストールするソースファイルを返します。
• get_install_command は複数のコンポーネント用の shadcn コマンドを、npm、pnpm、yarn、bun 向けに1つ組み立てます。
• get_setup はインストールガイドと、生成コードが従うべき規約を返します。

サーバーは各ページを hextaui://docs/{slug} リソースとしても公開し、コンポーネントの選定からインストールまでをアシスタントに案内する build-ui プロンプトも用意しています。

試してみる

• HextaUI で設定ページを作ってください。プロフィールフォーム、通知スイッチ、危険な操作のゾーンを含めます。
• チェックボックス付きのファイル一覧には、HextaUI のどのコンポーネントを使えばいいですか?
• このモーダルを HextaUI の dialog に置き換えて、フォームが動くようにしてください。
• 新しいメッセージまでスクロールする、HextaUI のメッセージバブルを使ったチャットビューを追加します。

shadcn の MCP サーバーを使いたい場合は、@hextaui 名前空間を登録すると、HextaUI のコンポーネントやサンプルの閲覧とインストールもできます。