こんにちは、サイオステクノロジーの遠藤です。
近年、AIを活用したコード生成ツールが急速に発展しています。その中でも、Vercelが提供するv0は、プロンプトを入力するだけでNext.jsアプリのコードを自動生成できるWebアプリとして注目を集めています。本記事ではv0を実際に試し、どのような形でNext.jsアプリが生成されるのかを確認していきます。では始めていきましょう！
v0とは？
Next.jsを開発しているVercelが提供しているAIを活用した生成型ユーザーインターフェースシステムです。プロンプトをもとにshadcnを利用したNext.jsアプリが生成され、すぐにプロジェクトに取り込むことが出来ます。
v0を利用してアプリを作成してみる
では早速ですが実際に利用してみましょう。まずはv0のサイトにアクセスします。
初回利用時はVercelアカウントでのサインアップが必要となります。メールアドレス、githubアカウント、gitlabアカウント、Bitbucketアカウントの４つの方法でサインアップすることが出来ます。
サインアップが済んだら早速プロンプトを入力エリアに設定していきます。。今回は以下のプロンプトを設定してみました。ちなみにこのプロンプトはChatGPTで作成してもらいました。
シンプルでモダンなSaaSダッシュボードのUIをデザインしてください。 左側にナビゲーションサイドバーを配置し、上部には検索機能付きのトップバーを設置。 メインコンテンツには、総売上、アクティブユーザー数、成長率などの主要指標を表示してください。 青と白を基調としたカラーリングで、データ表示には角丸のカードデザインを採用。 詳細分析のためのインタラクティブなグラフやフィルター機能を含めてください。
そうすると画面が移り、早速出力が始まります。これがv0のメインの画面になっており、①のチャットインタフェースと②の生成されたUIやコードの表示場所から成り立っています。生成されたUIはプロンプトの条件を確認してみましたが、しっかりプロンプトの条件を満たしており、検索用のトップバーや丸角のカードデザインなどコンポーネントやデザインを含めてきれいに作成してくれています。
またUIのプレビューだけでなくコードの確認も画面上部のタブを切り替えることで行うことが出来ます。構成としてはappとcomponentsに分けて作成されているようなので、コンポーネント単体だけを導入したりするのも簡単そうですね。
アプリを自分のローカル環境で呼び出す
ではここからはアプリを自分の環境で動かす方法を確認してみましょう。方法としては
- ZIP形式でダウンロードを行い展開する
- npxを利用してローカルで展開する
の２つの方法があり、今回は②の方法でローカルで動かす方法を確認してみます。
npxを利用して動かすにはアプリを作成したv0のチャットの画面右上の「⋯」をクリックし、「npx shadcn add “https://~~~」となっているコピーアイコンをクリックします。
クリックできたら、node.jsが動く環境上でコピーしたコマンドを貼り付け実行します。そうするとNext.jsアプリの作成が始まるので、聞かれている質問に対して答えて行きます。私はほどんどデフォルトを指定して答えていきました。
作成が完了したら、作成されたアプリのディレクトリに移動し、
npm install
を実行後
npm run dev
を実行します。
そうすると http://localhost:3000/ にアプリが展開されます。
アプリを確認してみると、右上の画像が入っていなかったりはしますが、カードがウィンドウ幅に合わせて２行になったりとレスポンス対応もしてくれていることが確認できました。いやぁ～すごいですね。プロンプトだけでここまで生成してくれるならアプリの雛形としては十分実用的なように感じます。
企業で利用する場合に気になること
企業で生成AI周りのツールを利用するときには「入力したデータが学習に利用されるか」と「出力されたデータの扱い方」は気になりますよね。公式のFAQで触れられていたので確認してみましょう。
入力されたデータがAIの学習に利用されるか
Will my generations be used for training?
v0 は、製品を改善するために、ユーザーが生成したプロンプトやコンテンツを、サードパーティ プロバイダーのモデルや学習システムへの入力として使用することがあります。このデータを使用することで、v0 はユーザーに対してより正確で関連性の高い推奨事項を提供できるようになります。
v0 Enterprise 顧客のコンテンツはトレーニングには使用されません。
さらに、Vercel のプラットフォーム サービスを使用する顧客の顧客データやコードは、v0 で使用されるモデルのトレーニング、改善、または微調整には使用されません。
Enterpriseプランを利用することでコンテンツが学習に利用されなくなるようです。この書きっぷりだとFreeプランはもちろん、PremiumやTeamでも学習に利用されてしまいそうなので、これらのプランで業務データをいれるのは避けたほうが良さそうです。
出力されたデータの商用利用
Can I use output from v0 for commercial uses?
Vercel は、クエリやプロンプトに基づいて生成されたコードを所有しません。ただし、受け取る出力は、他のユーザーの出力やサードパーティの IP と同じか類似していたり、不完全であったり、バグを含んでいたり、使用に適していない場合があります。v0 を通じて生成したコンテンツを評価し、商用またはその他の目的に適しているかどうかを独自に判断するのは、ユーザーの責任です。
出力された成果物を商用利用することができるのは良いですね。
ただ、v0 は画像をもとに出力を生成する機能を利用することで、特に実在するサービスやブランドに類似したデザインが出力される可能性があります。例えば、既存のロゴや UI デザインに似たものが生成された場合、それをそのまま商用利用すると意図せず権利侵害にあたる可能性があるのでそこは注意点ですね。
まとめ
今回はv0を利用してプロンプトからNext.jsアプリケーションを作成を試してみました。プロンプトの意図を読み取ってかなりイメージと近いアプリケーションを生成してくれるのでとりあえずの雛形作成としては非常に優秀に感じました。今回は基本のテキストベースのプロンプトを利用したアプリ生成を試してみましたが、他にもできることが多いみたいのなのでそちらも試してみようと思います。
ではまた～
