Vercelのコンポーネント生成AI 「shadcn/ui v0」の使い方
はじめに
今回はv0を使用して次のようにコンポーネントを作成し、表示してみます。
上記はAIが生成したコンポーネントを次のようにインポートして記述しているだけです。
import { BlogComponent } from '@/components/blog-component';
export default function Home() {
return (
<main>
<BlogComponent />
</main>
);
}
ちなみに、こちらはchatGPTのようにAIを活用して、テキストプロンプトからReactコードを生成し、Shadcn UIやTailwind CSSと互換性のあるコードを自動生成してくれます。
v0とは
AIにUIデザインを指示すると、そのUIをVercelが提供しているv0というツールがTailwind CSSベースのshadcn/ui（シャドシーエヌ）というコンポーネントライブラリを使用してコンポーネントを作成してくれるサービスです。
このサービスはVercel社によって開発されており、Next.jsとの互換性が良いなと思っています。
画像もアップロードするだけでコードを生成してくれるため、非常に便利です。
Exploreでは、他のユーザーが作成したコンポーネントを選択して利用することもできます。
コンポーネント生成
New Generationを押してください。
入力欄が表示されるので、サインインしてから
コンポーネントの内容などについて記述して、↑を押して送信してください。
少し待つと、このように完成したものが表示されます。
v0のインストールと初期化
生成されたコードを使用するために、v0のインストールと初期化を行ってください。
npm install v0@latest
初期化してください。components.jsonというファイルが作成されます。
npx v0@latest init
コード取得
3つの中から一番良いものを選択し、
Codeを選択して、
表示されているコマンドをコピーします。
コマンドを実行すると、コンポーネント名を聞かれますので入力してください。
今回の場合はpublic以下に使用しているイメージファイルの追加、src/components/blog-component.tsxというコンポーネントファイルが作成されました。
? What should we name the component? › ? What should we name the component? › BlogComponent
下記を記述して、開発環境を立ち上げて確認してみます。
import { BlogComponent } from '@/components/blog-component';
export default function Home() {
return (
<main>
<BlogComponent />
</main>
);
}
http://localhost:3000/ にアクセスすると、下記のように表示されているのがわかります。
修正方法①
Pick and editを選択し、
要素を選択して、変更したい内容を入力しUpdateを押してください。
左上にホバーした要素も表示（今回はdiv）してくれます。
背景色が変更されました。
修正方法②
コードを編集すると左のビューの内容も変化します。Save Changesを押すと変更内容が反映されます。
修正方法③
3つの中から一番良いものを選択し、修正内容を入力し↑を押して送信してください。
修正されたものが表示されます。
変更履歴
変更履歴は左に表示されています。
かざしてゴミ箱アイコンを選択することで削除も可能です。
料金
| プラン | ユーザー | 料金 | クレジット数 |
|---|---|---|---|
| Free | 個人 | 月額 $0 | 200クレジット/月 |
| Premium | 個人 | 月額 $20 | 5000クレジット/月 |
| Enterprise | 企業やチーム | 問い合わせ | カスタムクレジット/月 |
終わりに
何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉
Discussion