概要
"v0 API を開発作業に直接的に利用したい" 人向けの設定・作業の備忘録。
v0 API をエディタから直接呼び出して、AI コーディングのモデルとしてそのまま開発作業に利用して効率化を図るための手順やポイントをまとめてみた。
現状の v0 を普通に利用する場合、
🧑💻 v0.dev（Webサイト）でUI生成 👉 Web でソースコードを表示してコピー（or 専用の CLI コマンドをコピー）👉 ローカルのソースに貼付（or CLI コマンドをターミナル等で実行してソース反映）
という流れになるが、
🧑💻 エディタの AI チャット欄で v0 を直接呼び出し 👉 ローカルのソースコードに即利用
という開発体験にしたかった。
これができると、Next.js の UI 部分の実装は劇的に効率化される（もちろん、採用するライブラリやツールによってはそのまま使えないが）。
前提
- 執筆現在、v0 API は "ベータ版（β版）" であるため、今後のアップデート等で本記事内容とは異なる仕様になる可能性があるが、以降、その前提で記載する
- v0 API を利用するには 有料プラン への加入が必要（無料プランの状態では API 利用できない）
- 本記事では、Cursor を例に挙げており、VSCode は現状、標準の状態では AI チャットから呼び出すことができないため断念した（理由は後述）
- 筆者は現在、メインエディタを VSCode に戻しているので、ちょっと悲しみ（笑）
- Zed エディタは公式にサポートされたことが発表されている 1
「v0 の API」は 2 種類ある
意外と理解されていないケースもある様なので、念のために記載。
-
v0 Model API
- v0 の AI モデルを直接呼び出し、プロンプトを渡して結果を生成させるための、軽量な API
- OpanAI API に準拠しており、互換性がある（＝ エディタの OpenAI API 設定機能をそのまま流用できる）
- 👆 今回使用するのはこっち
-
v0 Platform API
- v0.dev プラットフォーム上のプロジェクト・チャット・ファイル・デプロイ・Web 実行フレームなどを API から操作するためのもの
- v0.dev（Web）を、ブラウザを介さずに、API 経由で裏側から操作するイメージ
なぜ Cursor ではできるのに、VSCode ではできないのか？
結論、Cursor は実現に必要な設定機能があるが、VSCode は必要な設定機能が一部不足しているから。
まず、v0 Model API が OpenAI の仕様に準拠していることは、公式ページにも記載がある。2
The v0 Model API is ... (中略) , provides fast streaming responses, and is compatible with the OpenAI Chat Completions API format.
→ 訳 「OpenAI Chat Completions API 形式と互換性があります。」
API の形式（フォーマット）自体は準拠しているが、実際に API コールする際、エンドポイントの Base URL 部分は v0 API のアドレス（例： https://api.v0.dev/v1 ）でなければいけない。
Cursor エディタには、"API Keys" で 「OpenAI API コール時の Base URL を上書き（オーバーライド）する」 設定が標準で搭載されているので、Cursor 経由なら v0 Model API を簡単に設定・利用することが可能。
しかし、VSCode には標準で API コールの Base URL を上書きする設定機能がない ため、フォーマットが合っていてもベースの URL が固定化されている（今回なら https://api.openai.com/v1 から変えられない）ので、v0 API を呼び出すことができない。
VSCode 拡張機能で対応できるものを探すか、プロキシを挟む（自前でリクエストを書き換える）などしないと利用ができないのが辛いところ （Microsoft さん、アプデ対応お願いします🙏）
VSCode で v0 API を利用しようとした時に発生するエラー
v0 Model API を VSCode で利用しようと、OpenAI API Key の設定から API Key をセットして保存すると、以下のエラーダイアログが表示される。
Unexpected Error - Manage Models - Preview
Incorrect API key provided: v1:*****.
You can find your API key at https://platform.openai.com/account/api-keys.
OpenAI に宛先を向けて、別会社の外部キーを指定しているわけだから、そりゃ怒られますよね。
API キー発行手順
v0 管理画面で API キーを発行する手順を紹介する。
まず、v0.dev にアクセスしログインをする。
その後、右上のアイコン 👉 メニュー 「Setting」 をクリック。
Setting ページの 「API Key」 タブを選択し、「New Key」 ボタンをクリックして API キーを新規追加する。
API キーに任意の名前をつける。
名前を決めると、以下の様に API キー が発行・表示されるので、この時に必ずどこかに値をコピーして控えておくこと（ここで閉じてしまうと、二度と確認できないため）
※ 万が一、内容を控える前に閉じてしまった場合は、一覧から削除してまた発行すればよいです
追加完了すると、以下の様に一覧に表示される（名前だけは後から編集可能）
エディタで API コール設定
Cursor で、v0 API をコールする（呼び出す）設定をする。
現状の各種エディタには「v0 API を呼び出すためのインターフェース」はまだ無いと思うが、v0 API は、OpenAI API の仕様と互換性があるので、OpenAI API を設定する機能を利用して API キーを設定すれば、v0 API をチャット欄等から使用することができる。
Cursor の右上の 設定アイコン から、Setting ページを開く。
"Models" タブを選択し、"API Keys" のアコーディオンを開く。
OpenAI API Key の設定欄にて、事前に発行した API キーをセットし、
"Override OpenAI Base URL" のトグルスイッチを ON にし、https://api.v0.dev/v1 に書き換え、Verify ボタンをクリック 👉 "Enable OpenAI API Key" ボタンをクリック
"OpenAI API Key" の右側にトグルが出現したら、設定成功。
モデルによって消費コストがかなり違う
執筆現在では、「v0-1.5-sm」「v0-1.5-md」「v0-1.5-lg」 の３モデルを利用できるが、基本的に 「v0-1.5-md」 で十分だという個人的な体感だった。
「v0-1.5-lg」は「v0-1.5-md」の約５倍のクレジットを消費する ので、使いすぎるとあっという間にレートリミットで利用制限を迎えてしまう。
非対応の機能もある
執筆現在、v0 API の機能では、Web 版では可能な 「画像添付」「ファイル添付」 等は Cursor のチャットからでは 非対応 の模様。
他のモデルコールと競合する場合
万が一、v0 がうまく呼べない場合や、これまで正常動作していた他 AI モデルのコールが正常動作しない場合、今回の設定で何かしらの競合が発生してエラーの要因になる可能性もゼロではない。
その場合、対策としては 「v0 を設定した API Keyをオフにする」「使用する別モデルを使用するときは v0 を設定した API Key をオフにする」 などを試す。
実際に AI チャット機能でコールする
モデルが v0 であることを確認してみる
Ask モードで OpenAI モデルの何かを選択し（今回の例だと 「gpt-4o」）、何かモデルを訪ねるプロンプトなどを使用してみる。
今回は、「Who are you?」 と入れてみる。（「あなたのモデルは v0 ですか？」 などでも良い）
"v0 のモデルである" とレスポンスが返ってきた。
既存のデザインを加味して UI 実装させる
サンプルで適当なデザインの Web アプリを事前に用意し、そこに新たなページを追加するプロンプトを送信する。
すると、コードベース（プロジェクト全体）のソースを確認し、既存のデザイン・スタイルを加味した新たな UI を提案してくれた。
以下は、実際に追加されたプロフィールページのサンプル。
ヘッダー部分も事前に共通コンポーネント化していなかったが、他ページのヘッダーを参照して完全に踏襲したものを組み込みつつ、専用ページとしての UI をきちんと提案してくれた。
※ 👆 v0 が提案してきたモック画面
利用状況の確認
「本当に v0 の API が利用できているの？」と思ったら、v0 管理画面から利用されていることを確認してほしい。
利用状況は、v0 管理画面の Setting ページの 「Billing and Usage」 タブで確認することができる。
Credit Balance で利用状況の概況が知れる
-
Monthly Credits: 月次クレジット情報
残クレジット/付与クレジット- 「付与クレジット」はプランによって変わる
- 「残クレジット」は月次でリセットされる
-
Additional Purchased Credits: 追加購入クレジット
- 月次クレジットとは別で課金した分のクレジット情報
Usage Events で、利用タイプ・利用コスト（消費クレジット）・利用したタイミング・利用モデル等が知れる。
利用状況は、v0 管理画面のユーザーメニュー表示からも、パッと把握することができる。
まとめ
v0 Model API をエディタで直接利用してソースコードに反映させる様にすることで、Next.js の UI 実装はかなり楽になった。
基本的に、Shadcn/ui、Tailwind、Recharts（React 向けのグラフ・チャート作成ライブラリ）、dnd（React 向けドラッグ&ドロップ実装ライブラリ）などを採用して問題なければ、今回の手法で効率化が望める。
選定ライブラリなどが違う場合は、その部分だけ置き換えるフローを決めておけば、さほど問題はないと感じた（例：チャートには "Recharts" ではなく "Tremor" を採用しているケース等）。
執筆現在では v0 API はベータ版であるため、機能対応状況は今後対応できるものが増えていくと予想されるが、現状の API ではまだ非対応の機能もある。
向き不向きはありそう
- 個人開発にはとても有用だと思う
- 組織の開発プロジェクトでも「モック開発」「新機能開発や企画・提案フェーズ」「簡単なデモやUIイメージ共有」には向いていると感じる
- しっかりと開発の規約や運用方針が決まったチーム開発には向かないかも