小学生でもわかる AI図鑑
  1. ホーム
  2. 小学生でもわかるv0
  3. 第8話

v0 第8話

【小学生でもわかる】v0のアプリにAIを入れる方法!作れたのに動かなかった理由と、別のお財布の話

v0で作ったアプリに「AIで文章を整える」のような機能を足してもらい、v0も確認したと報告しているのに、ボタンを押すと動かなくて、何が悪いのかわからない人へ。今回は、アプリの中にAIの機能を足すところから、動かなかった原因を突き止めるところまでを、実際の記録と一緒に進めます。

  • AIのボタンを作ってもらった1回で、v0のクレジットは0.02ドル(約3円)。アプリの中のAIを動かすには、無料の分を使うだけでも、Vercelに支払い方法の登録が要る(制作では登録していない)
Xで記事を読む シェア
AIを入れるのカバー

どんな話?

感想をAIが整えるボタンを足した回です。v0の作業は1分39秒、減ったクレジットは0.02ドル(約3円)。ところが、押すと「整えられませんでした」。Logsには「POST /api/refine-note 500」があり、原因は、AI Gatewayがカードの登録を求めていたこと(403)でした。アプリの中のAIは、v0のクレジットとは別のお財布で動き、無料の分を使うにも、Vercelに支払い方法の登録が要ります。

この記事でわかること

  • AIは2つある。お願いを読んでコードを書くv0と、できあがったアプリの中で働くAI。アプリの中のAIは、v0のクレジットではなく、Vercelの側のAI Gatewayのクレジットで動く
  • 頼むときに書いたのは4つ。AIに何をさせるか、どこで呼ぶか、どのモデルを使うか、失敗したらどうするか。作業は1分39秒で、選ばれたモデルは「google/gemini-2.5-flash-lite」、減ったクレジットは0.02ドル(約3円)
  • v0の報告で確認したと書かれていたのは「ボタン表示と処理中状態」。Logsには、こちらがボタンを押すより前の時刻にも「POST /api/refine-note 500」の行があった
  • 同じモデルを1回だけ直接呼ぶと、「AI Gateway requires a valid credit card on file to service requests.」と返ってきた。番号は403。無料の分を使うだけでも、Vercelのアカウントに支払い方法の登録が要る
  • 公開されている定価からの見積もりでは、1回あたり約0.00007ドル、1,000回押されて約0.07ドル(約10円)。払うのは、押した人ではなく、アプリの持ち主
  • カードを登録する前に3つ決める。上限(budget。自分で設定しないと付かず、付けなければ上限なし)、誰が押せるか、何を送るか

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

  • v0も確認したと報告しているのに、AIのボタンを押すと動かなくて、何が悪いのかわからない人
  • アプリの中のAIが、v0のクレジットとは別のお財布で動く仕組みを知りたい人
  • カードを登録する前に、上限と使い方を決めておきたい人

この話のTIPS

  • 注意v0の説明書には、AI Gatewayは追加の設定なしで使える、と書かれています。コードを書くうえでは、そのとおりでした。鍵も要らなかった。けれども、動かすには、Vercelのアカウントに支払い方法を登録しておく必要がある。無料の分を使うだけでも、です。
  • コツ公式の説明では、AI Gatewayには、使える金額の上限(budget)を決める設定があります。自分で設定しないと付かず、付けなければ上限なしです。「ゆるい上限」だとも書かれていて、上限をまたいだ1回は最後まで処理されるので、少し超えることがあります。
すべてのTIPS