Google AI Studio のバイブコーディング機能を試す
「Google AI Studio」のバイブコーディング機能でアプリ作成を試したのでまとめました。
前回
1. 作成したいアプリのプロンプトを考える
(1) 作成したいアプリのプロンプトをざっくり考える。
あたえられた議題に対して、3人のペルソナがそれぞれ5回ずつ発言して、その会話ログから議事録を作成するアプリを作成します。
# 入力
- 議題
- ペルソナ1の画像
- ペルソナ1のシステムプロンプト
- ペルソナ2の画像
- ペルソナ2のシステムプロンプト
- ペルソナ3の画像
- ペルソナ3のシステムプロンプト
# 出力
- 会話ログ
- 議事録
会話中は、3人が議論しているようすを、1発話ずつ表示することで表現してください。
(2) Geminiにリファインしてと依頼。
自分の好みにあわせて微調整も行います。
議題に対して、3人のペルソナがそれぞれ5回ずつ発言して、その会話ログから議事録を作成するアプリを作成します。
# アプリケーションの概要
このアプリケーションは、ユーザーが設定した議題と3人のペルソナ(システムプロンプト)に基づき、仮想的な議論をシミュレーションし、その結果として会話ログと議事録を生成するツールです。
# 入力要件(ユーザーインターフェース)
以下の項目をユーザーが入力し、アプリケーションに取り込むものとします。
## 1. 議論の議題(必須):
例:「日本のアニメの未来について」
## 2. ペルソナ設定(必須):
- ペルソナ1: 画像ファイル、システムプロンプト(議論の視点、口調など)
- ペルソナ2: 画像ファイル、システムプロンプト(議論の視点、口調など)
- ペルソナ3: 画像ファイル、システムプロンプト(議論の視点、口調など)
# 処理要件(議論のシミュレーション)
## 発言回数の厳守:
各ペルソナは、合計5回ずつ(計15回)発言するものとします。
## 発言の順序:
議論の開始はランダムなペルソナから始め、その後は会話の流れを重視してAIが自然な順序を判断して発言させてください。(固定の順序は避ける)
## 議論の進行:
議題に対し、各ペルソナのシステムプロンプトを厳密に守り、互いの発言に言及しつつ議論を深めたり、反論したりしながら自然に展開させてください。
# 出力要件(表示と結果)
## A. 会話の進行表示(リアルタイム表示のシミュレーション)
議論のシミュレーション中は、1発言ごとに以下の形式で表示を更新してください。
[ペルソナ名] (アイコン画像表示): 発言内容
すべての発言(計15回)が終了するまで、この形式で議論の様子をシミュレーションします。
## B. 会話ログ(最終結果)
最終的な全15発言をまとめて、以下の形式で整形し出力してください。
形式: [発言順] [ペルソナ名]: 発言内容
例:
[01] ケンタ: AIを使った制作の効率化は…
[02] ミキ: でも、手書きの暖かみが…
## C. 議事録(最終結果)
生成された会話ログに基づき、以下の3つのセクションを含む議事録を箇条書きと要約で作成してください。
【主要な論点】: 議論全体を通じて主要となったテーマや争点を2〜3点にまとめる。
【各ペルソナの主な主張】: 各ペルソナ(ケンタ、ミキ、アオイ)の核となる主張と提言を、それぞれ簡潔に要約する。
【結論/今後の展望】: 議論の結果として示唆される共通認識や、次に議論すべき課題をまとめる。
2. バイブコーディング機能でアプリ作成
(1) 「Google AI Studio」の「Build」を開き、先程のプロンプトを入力してBuildボタンを押す。

(2) 完成したアプリを動作確認。

(3) 自分の好みにあわせて微調整を指示。
- ペルソナの顔画像のサイズを1.5倍。
- UIの色はライトベースで。
- UIの文字は日本語で
- ペルソナのデフォルト情報も日本語で
- ディベートシミュレーション時のペルソナの顔画像を1.5倍に。
- ディベートシミュレーション時のペルソナのテキストを1.5倍に。
(4) 完成。
Google AI Studio のバイブコーディング機能でアプリ作成をおためし pic.twitter.com/HWN7YH0gac
— 布留川英一 / Hidekazu Furukawa (@npaka123) October 28, 2025
3. ローカルで実行
(1) 左上の「Download app」でzipをダウンロードして解凍。
Node.jsのプロジェクトが含まれています。

(2) ローカルPCにNode.jsをインストール。
(3) プロジェクトのルートで依存関係のインストール。
npm install(4) .env.localに「Gemini APIキー」を指定。
GEMINI_API_KEY=<Gemini APIキー>(5) 実行。
npm run dev(4) ブラウザで http://localhost:3000/ にアクセス。

