こんにちわ。
GMO NIKKOのT.Mです。
概要
2024年12月に発表されたGemini2.0には、新しいモデルや新機能などが含まれています。
※詳細はGoogleのBlogを参照してください。
今回はその新機能であるMultimodal Live APIのWeb Console Demoを動かしてみます。
Multimodal Live APIのドキュメント
Web Console Demo project
大まかな流れは、下記の通りです。
- APIキーの発行
- デモのソースをGitHubからcloneしてくる
- APIキーを設定ファイルに書き込む
- アプリケーションを起動する
動かしてみる
APIキーの発行
APIキーの発行はGoogle AI Studioから行います。
「Get API key」のボタンをクリックします。

次に「キー APIキーを作成」ボタンをクリックします。

Google Cloudで新規プロジェクトが作成され、GeminiのAPIキーが発行されます。
APIキーはダイアログで表示されるのでコピーしておきます。
ダイアログを閉じるとリストに追加されます。

デモのソースをGitHubからcloneしてくる
GitHubからデモのソースをcloneしてきます。
今回はMacで行っています。
適当なディレクトリを作成して、ソースを取得してきます。
1 2 3 |
mkdir demo cd demo git clone https://github.com/google-gemini/multimodal-live-api-web-console.git |
APIキーを設定ファイルに書き込む
取得してきたソースファイルに.envという名前のファイルがあるのでAPIキーを設定します。
1 2 3 4 |
cd multimodal-live-api-web-console vi .env #REACT_APP_GEMINI_API_KEY='' 上記のコメントを外してAPIキーを記入します。 |
アプリケーションを起動する
アプリケーションを起動します。
ターミナルから行います。
1 2 |
npm install npm start |
このまま起動すれば良いのですが、下記のエラーが出て動かない状態でした。
1 2 3 |
Attempting to bind to HOST environment variable: xxxxx.local If this was unintentional, check that you haven't mistakenly set it in your shell. Learn more here: https://cra.link/advanced-config |
HOST環境変数「xxxxx.local」という値が設定されてエラーとなっていました。
※ xxxxx.localとしましたが、実際にはPC名が入っていました。
HOST環境変数を空文字にするか、「127.0.0.1」にすれば良さそうです。
1 2 |
unset HOST npm start |
これで起動しました。

動かしてみよう
起動したアプリケーションで再生マークのボタンをクリックすると開始します。

ストリーミングが開始されると画面共有やカメラボタンも押せるようになります。
カメラに写っている内容を認識したり、共有した画面の説明をさせたりできました。

アプリケーションを止める場合は、ターミナルでCtrl+Cで止めます。
まとめ
APIキーの取得からデモアプリケーションの起動まで行いました。
HOST環境変数のエラーに少しハマりましたが、すんなりと動かすことができました。
使うだけだったらGoogle AI Studioで十分ですが、APIの使い方だったり、これをベースにカスタマイズしてみたりと試していきたいと思います。
以上です。