21st-ui

21st.dev UI スキル

21st.dev は、本番環境ですぐに使える React/Tailwind（shadcn 対応）コンポーネントを 10,000 点以上取り揃え、AI による UI 生成も提供するマーケットプレイスです。このスキルは 21st MCP サーバーを操作します。

利用する場面

• ユーザーが UI 要素の追加や作成を依頼した場合：「料金セクションを追加して」「素敵なナビバーが欲しい」「お客様の声のブロックを作って」など。
• ユーザーがデザインを決める前に、選択肢やアイデアを求めている場合。
• ユーザーが JSX/TSX で企業ロゴを必要としている場合（search_logo）。
• ユーザーが説明から新しい UI を生成したい場合（generate）。

ワークフロー：既存コンポーネントのインストール（デフォルトの手順）

依存関係、デモ、レスポンシブ対応やダークモード対応が含まれているため、UI を一から作るより、カタログにある実際のコンポーネントを優先してください。

1. 短い自然なクエリ（例：「料金表」「アニメーション付きヒーロー」）で search します。検索結果には、名前、説明、プレビュー、インストール ID が含まれます。
2. ユーザーの技術スタックとスタイルに最適なものを選びます。選択が明らかでない場合は、有力な候補を 1～3 件ユーザーに提示します。
3. get_component で、選んだコンポーネントのコード全体とメタデータを取得します。
4. 検索結果の指示に従って、プロジェクトにインストールします（shadcn スタイルのレジストリ追加、または返されたファイルの書き込み）。その後、ページに組み込み、トークンや props をプロジェクトのデザインシステムに合わせて調整します。

注意：

• 無料プランでは、カタログの検索と、1 日あたり 2 件のコンポーネントのインストールが可能です。有料コンポーネントのコードは、ロック解除後にのみ取得できます。
• 組み込みの際は、プロジェクトの既存の規約（Tailwind の設定、cn ヘルパー、コンポーネントのフォルダー構成）に合わせてください。

ワークフロー：新しい UI の生成

カタログに適したものがない場合、またはユーザーが明示的にカスタム UI を求めている場合は、次の手順に従います。

1. get_usage.aiGenerationEnabled と現在の tools/list を確認します。有料コンポーネントへのアクセス権だけでは、ホスト型 AI は有効になりません。ステータスが不明または取得できない場合も、生成の許可があるとはみなせません。
2. AI がオフの場合は、search と get_component を使い、その後、自分のコーディングエージェントで UI を実装または調整します。回避策として、生成ツール、従来のビルダー／リファイナーのエイリアス、CLI を呼び出してはいけません。
3. AI が有効で generate が一覧にある場合は、目的、レイアウト、コンテンツ、スタイル、技術スタックの制約を指定して呼び出します。AI クレジットが消費され、プレビュー URL が返されるため、その URL を開いて生成結果を確認します。
4. 既存のスケッチの下書きについては、get_generation と get_take を使ってコードを読み取ります。これらの読み取りは AI がオフでも利用できます。

キャッシュされた呼び出しで ai_subscription_required が返された場合は、生成の試行を中止してください。AI を有効にした後、再試行する前にツール一覧を更新するか、再接続してください。権限フラグから、残りのクレジット数を知ることはできません。

ロゴ

search_logo は、ブランド 1 件につき 1 回の呼び出しで、すぐに貼り付けられる JSX/TSX 形式のブランドロゴを返します。

セットアップと認証

サーバーは https://21st.dev/api/mcp にある HTTP MCP で、x-api-key ヘッダーによる認証が必要です。キーは https://21st.dev/mcp で無料ですぐに取得できます。呼び出しで認証エラーが発生した場合は、同サイトでキーを取得し、プラグインの設定で（変数 API_KEY_21ST に）設定するようユーザーに伝えてください。

従来の Magic ツール名（21st_magic_component_builder、logo_search など）もサーバー側では引き続き利用できますが、現在の名前である search、get_component、generate、get_inspiration、search_logo を優先してください。