cult/ui徹底解説｜shadcn互換のコピペUIと92超のAI SDKエージェント・パターン

AIチャットやエージェントのUIを作ろうとすると、毎回似たような壁にぶつかります。ストリーミング表示のチャット欄、ツール呼び出しのステップ表示、生成された表やグラフを編集できる「アーティファクト」——どれも「あると便利」だが「ゼロから作ると地味に重い」部品ばかり。デザインの細部やアクセシビリティまで詰めると、本題のAIロジックに取りかかる前に消耗してしまいます。しかも、こうしたUIは一度作って終わりではなく、ストリーミングの中断処理やエラー表示、ローディング状態など、細かな状態管理まで考え始めると、想像以上に奥が深いのです。

この消耗を肩代わりしてくれるのが、本記事で解説する cult/ui（カルト・ユーアイ） です。nolly-studioが公開するこのオープンソース（MITライセンス、GitHub約5,500スター）は、ひとことで言えば「コピー&ペーストで使える、shadcn互換のReact/Tailwindコンポーネント集」。しかし近年は単なるUI部品にとどまらず、92以上のAI SDKエージェント・パターンや、認証・決済・DBまで含んだフルスタックのエージェント・テンプレートへと大きく裾野を広げています。

「デザインエンジニアのために作られた」と銘打つこのライブラリは、AIアプリ開発の現場で「見た目」と「実装」の橋渡しをしてくれる存在です。AIのロジックは作れても、それをユーザーが心地よく使えるUIに仕立てる部分でつまずく——という開発者は少なくありません。cult/uiは、まさにその「最後の数十メートル」を埋めるための道具箱だと言えます。その中身を、公式情報をもとに読み解いていきます。

1. cult/uiとは — 「コピペで自分のUIライブラリを作る」発想

cult/uiの公式説明はシンプルです。「アクセシブルでカスタマイズ可能な、アプリにコピペできるコンポーネント。無料。オープンソース。これを使って自分自身のコンポーネントライブラリを作ろう」。短いながら、このツールの哲学が凝縮された一文です。

この思想は、近年のフロントエンド界で支配的になった shadcn/ui の流儀を受け継いでいます。shadcn/uiは、UIライブラリの「配り方」そのものを変えたムーブメントとして知られています。従来のUIライブラリ（Material UIなど）は、npmでパッケージをインストールし、ブラックボックスとして使うものでした。しかしshadcn流では、コンポーネントのソースコードそのものを自分のプロジェクトにコピーして取り込む。つまり「依存パッケージ」ではなく「自分のコード」になるため、自由に改変でき、デザインの一貫性も保ちやすい——という考え方です。

なぜこの「コピペ型」がこれほど支持されるのか。理由は、現代のフロントエンド開発における「カスタマイズ性」と「保守性」のジレンマを解くからです。従来のnpm型ライブラリは導入こそ簡単ですが、デザインを細かく変えたい時にライブラリの制約と戦うことになり、メジャーアップデートで破壊的変更に振り回されることもあります。一方、すべて自前で作れば自由ですが、時間がかかりすぎる。shadcn流は、その中間——「実績ある実装を出発点として受け取り、あとは自分のコードとして自由に育てる」——という第三の道を示しました。cult/uiはこの流儀に完全準拠しています。

・コピペで導入：必要なコンポーネントのコードを、自分のプロジェクトに貼り付けるだけ
・shadcn互換：shadcn/uiのCLIでインストールでき、既存のshadcnプロジェクトにそのまま馴染む
・Tailwind CSSベース：スタイリングはTailwindで、デザイントークンを共有できる
・アクセシブル：アクセシビリティに配慮した実装
・v0 / Next.js対応：Vercelのv0で開いたり、Next.jsアプリとしてダウンロードしたりできる
・アニメーション込み：Framer Motion（Motion）を活かした、動きのある凝ったコンポーネントが多い

「Components crafted for Design Engineers（デザインエンジニアのために作られたコンポーネント）」というキャッチコピーが示すとおり、デザインとコードの両方を行き来する開発者——いわゆるデザインエンジニア——にとっての使いやすさを徹底的に意識した設計です。

cult/uiが提供するものは、抽象度の異なる3つの層に整理できます。下の図のように、最小の「部品」から、AI特有の「パターン」、そして「動くアプリ」まで、必要な粒度を選んで取り込めるのが特徴です。

2. 92以上のAI SDKエージェント・パターン — cult/uiの新しい主役

近年のcult/uiで最も注目すべきは、AI SDKエージェント・パターンへの大胆な進出です。VercelのAI SDKを使ったエージェントUIの実装例を、なんと92以上もライブプレビュー付きで提供しています。これはもはや「コンポーネント集」の範疇を超え、AIアプリの作例ギャラリーと呼ぶべき規模です。これらは aisdkagents.com のディレクトリで実際に動かしながら確認でき、気に入ったものをコピペ、あるいはshadcn CLIでインストール、v0で開く、といった形で取り込めます。「スクリーンショットを見て選ぶ」のではなく「実際に触って挙動を確かめてから選べる」ことは、UIライブラリの使い勝手として大きな差になります。ストリーミングの速度感やインタラクションの質は、静止画では伝わらないからです。

これら92以上のパターンは、用途ごとにカテゴリ分けされています。競合調査やリサーチを行う「research agents」、分析を担う「analytics agents」、監査を行う「audit agents」、デザイン関連の「design agents」、そして対話で編集できる成果物としての「artifacts」——といった具合に、AIアプリで頻出するユースケースが体系的に整理されているため、自分が作りたいものに近い実装を探しやすくなっています。公式が「Featured（注目）」として挙げるパターンを見ると、その実用性の高さがわかります。

ここで重要なのは、cult/uiが提供しているのが「ただのボタンやカード」ではなく、AIアプリ特有の複雑なUIだという点です。エージェントがツールを順に呼び出していく様子、生成されたデータを対話で編集できる「アーティファクト」、リアルタイムにストリーミングされる結果——こうした、AIアプリでこそ必要になる部品が、動く実装として手に入ります。これは、当サイトの読者であるAIアプリ開発者にとって、極めて実利の大きい資産です。

特に「アーティファクト（artifact）」という概念は、近年のAIプロダクトのUXを大きく変えました。これは、AIが生成した成果物——表、グラフ、コード、ドキュメント——を、チャットの吹き出しの中に閉じ込めるのではなく、独立した編集可能な領域として扱う考え方です。ユーザーは対話を続けながら、その成果物をリアルタイムで編集・修正できます。ClaudeのArtifactsやChatGPTのCanvasで一般に知られるようになったこのパターンを、cult/uiは「Table Editor Artifact」「Chart Generation Artifact」といった形で、すぐ使える実装として提供しています。ゼロから作れば数週間かかるようなUIが、出発点として手に入るインパクトは小さくありません。

また、これらのパターンの多くが、Firecrawl（Webスクレイピング）やParallel Scrapeといった外部ツールとの連携を前提に組まれている点も実践的です。「競合URLを入れたら分析が返ってくる」という体験を成立させるには、UI・LLM・外部データ取得の三者を噛み合わせる必要があり、その配線まで含めて学べるのが、ライブ実装として配布される強みです。

3. エージェント設計パターン — UIの先にある「考え方」

cult/uiの有料版「Cult Pro」では、UIだけでなくエージェントの設計パターン（アーキテクチャ）そのものを学べるブロックが提供されています。これは、AI SDKでエージェントを組む際の「定石」を、動くコードとして示すものです。

・Multi-Step Tool Pattern：複数のツールを順番に使うエージェント。Web検索→ニュース検索→分析→意思決定を型安全に連鎖
・Evaluator-Optimizer Pattern：生成物の品質を評価し、自動で改善するエージェント。専用ツールで品質を評価し問題を修正
・Orchestrator Pattern：複雑なプロジェクトを、専門ワーカーを調整しながら進めるエージェント。タスク割当と成果物の追跡を担う
・Routing Pattern：ユーザーの要求を分類し、適切な専門エージェントに振り分ける。カスタマーサポート向けにAI SDK v5のストリーミングで実装

これらの名前に見覚えがある読者もいるでしょう。AnthropicやVercelが提唱してきた、信頼できるエージェントを構築するための設計パターンそのものです。cult/uiは、こうした抽象的なパターンを「コピペできる実装」に落とし込むことで、理論と実践の橋渡しをしています。

これらのパターンがなぜ重要かを、少し補足します。単純なAIアプリは「プロンプトを投げて応答を受け取る」だけで済みますが、実用的なエージェントになると、複数のステップ・複数のツール・品質管理が絡み合い、設計の善し悪しが成否を分けます。たとえばオーケストレーター・パターンは、一つの巨大なプロンプトにすべてを詰め込むのではなく、「司令塔」が専門の「ワーカー」に仕事を割り振る構造をとります。これにより、各ワーカーは自分のタスクに集中でき、全体の見通しもよくなります。ルーティング・パターンは、入ってきた要求をまず分類し、最適な専門エージェントに振り分けることで、一つのエージェントにあらゆる役割を背負わせる無理を避けます。評価-最適化（Evaluator-Optimizer）パターンは、生成物を別のエージェントが採点し、基準を満たすまで改善を繰り返す——人間のレビュー工程をエージェント間に持ち込んだ発想です。これらを「名前だけ知っている」状態から「動くコードで触れる」状態に引き上げてくれるのが、cult/uiの教育的価値です。

4. フルスタック・テンプレート — 「動くアプリ」から始める

cult/uiは、コンポーネントやパターンの一段上、フルスタックの完成アプリもテンプレートとして提供しています。認証・決済・データベース・AI連携まで含んだ、本番に近いコードベースです。

公式が提供する「4つのフルスタック・エージェント・テンプレート」と「6つのスターター・テンプレート」を見ると、その守備範囲の広さがわかります。

これらは、AIアプリの「よくある型」——RAGチャット、マルチエージェントEC、ディレクトリサイト——を、最初から動く状態で提供します。スタックを見ると、Next.js + Tailwindを土台に、認証（better-auth）、DB（drizzle/Supabase/pgvector）、決済（Stripe）、そしてClaude・OpenAI・Geminiといった各社LLMが組み合わされており、現代的なAI SaaS開発の縮図になっています。

テンプレートの価値は、単に時間を節約するだけではありません。AI SaaSを成立させるには、LLMの呼び出しだけでなく、ユーザー認証、課金、レート制限、データの永続化、ベクトル検索といった「地味だが不可欠な配管」を一通り揃える必要があります。これらをどう組み合わせるかは、経験のない開発者にとって大きな悩みどころです。cult/uiのフルスタック・テンプレートは、実績ある組み合わせの「正解例」を示してくれるため、アーキテクチャ選定で迷う時間を大幅に減らせます。特にpgvectorを使ったRAG構成や、マルチテナント対応のSaaS構造は、自力でゼロから設計すると数週間を要する領域です。動くテンプレートから逆算して理解できることは、学習教材としても優れています。

5. 使い方 — shadcn CLI・v0・コピペの3経路

cult/uiの導入は、shadcnエコシステムの作法に沿っており、主に3つの経路があります。

第一に、shadcn CLIでのインストールです。既存のshadcn/uiプロジェクトを使っているなら、cult/uiのコンポーネントも同じCLIコマンドで追加できます。依存関係やTailwindの設定も、shadcnの流儀に沿って扱えます。

第二に、v0で開くです。Vercelのv0（AIでUIを生成・編集できるツール）でcult/uiのパターンを開けば、プロンプトで自分好みにカスタマイズしながら取り込めます。「このチャットUIの配色をブランドカラーに変えて」「この表に列を追加して」といった指示を自然言語で出せるため、コードを直接書かずにカスタマイズを進められます。AIとUIライブラリが融合した、新しいワークフローの好例です。

第三に、素朴なコピー&ペーストです。ドキュメントサイト（cult-ui.com/docs）でコンポーネントのコードを見て、必要な部分を自分のプロジェクトに貼り付けるだけ。最も原始的ですが、依存を持たないこの方式こそ、shadcn流の本質だと言えます。依存関係を増やさず、必要なものだけを手元に置く——この潔さが、プロジェクトを軽く保ちたい開発者に好まれています。

いずれの経路でも、取り込んだコードは「自分のコード」になります。npmパッケージのようにバージョンに縛られず、自由に改変できる——この所有権こそが、cult/uiを含むshadcn系ライブラリの最大の魅力です。デザインを自社のブランドに合わせて調整するのも、エージェントのロジックを差し替えるのも、すべて自分のコードベースの中で完結します。

6. 他の選択肢との違いと、どんな人に向くか

cult/uiの立ち位置を、近接する選択肢と比較して整理します。

cult/uiが特に向くのは、次のような人々です。

第一に、AIアプリのフロントエンドを素早く立ち上げたい開発者です。チャットUI、ツール呼び出し表示、アーティファクトといったAI特有の部品が揃っているため、本題のロジックに集中できます。プロトタイプを短時間で形にしたいスタートアップや個人開発者には、特に効果が大きいでしょう。

第二に、shadcn/Tailwindを既に使っているチームです。導入の摩擦がほぼなく、既存のデザインシステムにそのまま溶け込みます。新しい依存を増やさずに、必要な部品だけを既存のコードベースに足せるため、技術的負債を抱え込みにくいのも利点です。

第三に、エージェントの設計を学びたい開発者です。オーケストレーターやルーティングといった設計パターンを、動くコードとして読めるのは貴重な学習機会です。書籍やブログで概念を読むだけでは掴みにくい「実装の勘所」を、実際に動かしながら体得できます。

第四に、デザインエンジニアです。デザインの質とコードの実装、その両方に責任を持つ職種にとって、cult/uiは「見た目」と「動き」を一気に手に入れられる強力な道具箱になります。近年「デザインエンジニア」という職種が注目を集めているのは、AIによってコード生成のハードルが下がり、「何を作るか・どう見せるか」という設計判断の価値が相対的に高まったからです。cult/uiが「Design Engineersのために」と明言しているのは、まさにこの時代の変化を捉えた狙いと言えます。デザインの意図を保ったまま素早く実装に落とせるツールは、この職種の生産性を直接押し上げます。

一方で注意点もあります。Cult Pro（プレミアムブロック）や一部のテンプレートは有料です。また、コピペ型ゆえに、取り込んだ後のメンテナンス（元のライブラリの更新を自分で追う必要があるか）は、自分のコードとして引き受けることになります。とはいえ、これはshadcn系全般の特性であり、自由と引き換えの当然のコストと言えるでしょう。さらに、AI SDKやLLMプロバイダのバージョンは進化が速いため、取り込んだエージェント・パターンが将来のAPI変更に追従できているかは、自分で確認・更新する姿勢が必要です。AI領域のサンプルコードは「永久に正しい」ものではなく、その時点のベストプラクティスのスナップショットだと捉えるのが健全です。

まとめ

本記事では、shadcn互換のコピペUIと、92以上のAI SDKエージェント・パターンを提供するオープンソース cult/ui を解説しました。

cult/uiの本質は、「デザインエンジニアの生産性を底上げする」という一点に貫かれています。コピー&ペーストでコードを自分のものにするshadcn流の自由さを土台に、AIアプリでこそ必要になる複雑なUI（チャット、ツール呼び出し、アーティファクト）、エージェントの設計パターン（オーケストレーター、ルーティング、評価-最適化）、そして認証・決済・DBまで含んだフルスタック・テンプレートを、一貫した形で提供します。

UIライブラリが「見た目の部品」から「AIアプリの設計図」へと役割を広げつつある——cult/uiの進化は、その大きな潮流を象徴しています。かつてコンポーネントライブラリの競争軸が「いかに美しい部品を揃えるか」だったとすれば、AI時代のそれは「いかにAIアプリの構築を丸ごと加速できるか」へと移りつつあります。cult/uiが、単なる部品集から、パターンとテンプレートを束ねた総合的な道具箱へと脱皮したことは、その変化を先取りした動きと言えるでしょう。AIアプリのフロントエンドに時間を奪われていると感じるなら、まずはドキュメントとaisdkagents.comのライブプレビューを覗いて、気に入ったパターンを一つ、自分のプロジェクトに貼り付けてみてください。その小さな一歩が、開発の体感速度を大きく変えてくれるはずです。

よくある質問（FAQ）

Q1. cult/uiとは何ですか? コピー&ペーストで使える、shadcn互換のReact/Tailwindコンポーネント集です。nolly-studioが開発するMITライセンスのオープンソースで、近年は92以上のAI SDKエージェント・パターンやフルスタックのエージェント・テンプレートも提供しています。

Q2. shadcn/uiとは別物ですか? 別のプロジェクトですが、shadcn/uiの「コードをコピーして自分のものにする」流儀に準拠しており、shadcn CLIでインストールできます。既存のshadcnプロジェクトにそのまま馴染むよう設計されています。AIエージェント特化の部品が豊富な点がcult/uiの特色です。

Q3. 無料で使えますか? コアのコンポーネントやAI SDKエージェント・パターンの多くは無料・オープンソース（MIT）です。一方、「Cult Pro」のプレミアムブロックや一部のテンプレートは有料です。

Q4. AIアプリ開発にどう役立ちますか? チャットUI、ツール呼び出しのステップ表示、対話で編集できるアーティファクト（表・グラフ）など、AIアプリ特有の複雑なUIが動く実装として手に入ります。さらにオーケストレーターやルーティングといったエージェント設計パターンも学べ、フロントエンドの立ち上げを大幅に短縮できます。

Q5. どうやって導入しますか? 主に3つの方法があります。(1) shadcn CLIでインストール、(2) Vercelのv0で開いてカスタマイズ、(3) ドキュメントからコードをコピペ。いずれも取り込んだコードは「自分のコード」になり、自由に改変できます。

Q6. どんな技術スタックと相性がいいですか? Next.js + Tailwind CSS + shadcn/ui が基本の相性です。テンプレートではbetter-auth・drizzle・Supabase・pgvector・Stripe、そしてClaude・OpenAI・GeminiといったLLMとの組み合わせが用いられており、現代的なAI SaaS開発スタックに広く対応します。

参照ソース

・cult/ui（nolly-studio/cult-ui 公式リポジトリ） — 本記事が解説した一次情報。コンポーネント・AIパターン・テンプレートの一覧
・cult/ui ドキュメント — コンポーネントのコードと使い方
・AI SDK Agents（92+パターンのディレクトリ） — ライブプレビューで各エージェント・パターンを試せる