21st-ai

21st AI — ターミナルからスケッチ、反復、コードの取得

21st AI は、UI をすばやく下書きできるボードです。基本的な考え方は、ここで下書きし、その後仕上げることです。プロンプトからいくつかのバリエーションをスケッチしてプレビューし、気に入ったものを自然な英語で編集して調整し、コードをリポジトリに取り込みます。この一連の作業は 21st CLI（または対応する MCP ツール）から実行できるため、エディターを離れる必要はありません。

スケッチモードでは、自己完結型の HTML + Tailwind の下書きを生成します（ビルド不要ですばやく作成できます）。推奨される引き継ぎ方法は copy-prompt です。これは、HTML をそのまま貼り付けるのではなく、対象プロジェクトの実際の技術スタックでデザインを再構築するよう指示する仕様書です。

認証

CLI のほかの機能と同じ認証情報を使います。21st login（保存済みトークン）か、--api-key / TWENTYFIRST_TOKEN で指定する 21st_sk_ キーを使用します。21st usage（MCP では get_usage）を実行すると、アカウントのプラン、aiGenerationEnabled、および無料の日次コンポーネントコード取得枠の残数を確認できます。AI クレジット残高は表示されません。（認証の詳細については、21st-cli-use スキルを参照してください。）

生成または反復の前に、MCP の get_usage.aiGenerationEnabled または 21st usage の 21st AI generation 行を確認してください。CLI 1.17.1 では 21st usage --json も使用できます。AI が明示的に有効な場合にのみ処理を続行してください。有効状態が欠落または不明な場合、アクセスが許可されたことにはなりません。基本の Builder サブスクリプションでは AI は有効になりません。値が false の場合は、search → get_component を使い、ユーザー自身のエージェントでコードを調整してください。CLI をフォールバックとして使う場合も含め、generate や iterate_generation は実行しないでください。

一連の作業

# 1) Sketch — generate variants ("takes") from a prompt. Opens the preview in
#    the browser and prints the projectId.
21st generate "a pricing section with 3 tiers and a monthly/annual toggle"

# 2) List the takes (1-based numbers + whether each has rendered yet).
21st generation <projectId>

# 3) Edit ONE take in place with a natural-language change (PAID — see Metering).
21st iterate <projectId> "make it enterprise-flavored, add an annual toggle" --take 3

# 4) Grab the code to bring into the project (FREE).
21st take <projectId> --take 3            # paste-ready copy-prompt (recommended)
21st take <projectId> --take 3 --code     # raw self-contained HTML instead

generate が出力するプレビュー URL（iterate の場合は返される URL）をエディター内蔵のブラウザーで開き、バリエーションの描画やその場での更新を確認してください。

使い分け

• generate — プロンプトから新しく作成します。プレビュー URL と projectId が返されます。
• generation — 生成された案の一覧を表示し、どの --take N を操作するか確認します。
• iterate — 既存の案を調整します（その場で編集され、新しいバージョンが追加されるため、ワークスペースで前の状態に戻れます）。やり直すのではなく、すでに生成したものを変更する場合に使います。
• take — 案のコードを取得します。デフォルトでは copy-prompt（スタックに合わせて調整するための仕様書）を出力し、--code を指定すると生の HTML を出力します。どちらも無料で、回数制限はありません。

利用料金

• generate — アカウントで AI が有効になっており、利用可能な AI クレジットが必要です。Builder と Team は AI が無効の状態で開始します。メンバーシップだけでは有効になりません。
• iterate — 編集ごとの実際のトークンコストに応じて課金されます（共有の 21st AI クレジットプールを使用）。呼び出しごとに実際のモデル処理が行われるため、小さな変更を何度も依頼するのではなく、明確な指示にまとめてください。
• generation（一覧表示）と take（コードの取得）は 無料です。

MCP との対応

MCP ホスト（Cursor、Claude Desktop、Claude Code）向けに、同じ一連の作業を MCP ツールとして利用できます。generate（mode: "sketch" を指定）、get_generation、iterate_generation、get_take があります。iterate_generation は編集後の html と copyPrompt も返すため、2 回目の呼び出しをせずにコードを取得できます。21st init --client <name> --write でサーバーを設定してください。

MCP ツールの一覧はアカウントの状態によって異なります。generate と iterate_generation は、AI が有効な場合にのみ一覧に表示されます。既存の下書きの確認には、引き続き get_generation と get_take を利用できます。AI を有効にした後は、クライアントのツール一覧を更新するか、MCP サーバーに再接続してください。キャッシュされたツール呼び出しで ai_subscription_required が返された場合は、生成の試行を中止し、上記のコンポーネント検索・取得ワークフローを使用してください。

ヒント

• スケッチは 本番用コードではなく下書きです。copy-prompt をデザイン仕様書として扱い、プロジェクトの実際のコンポーネントで再構築してください。HTML をそのまま貼り付けないでください。
• generation の 1 から始まる番号、またはプレビューの「Take N」ラベルで案を指定してください。--take には 1 以上の整数が必要です（無効な値を指定すると、案 1 を黙って編集するのではなく、エラーになります）。
• 一覧表示、編集、取得ができるのは、自分で作成したスケッチ生成のみです。