Gemini × Copilotで音声付きリアルタイムAIチャットを実装してみた

こんにちは。第一開発事業部の中村です。

皆さんはAIを活用していますか？

月日が経つにつれ精度も向上し、身近な存在になっているのではないでしょうか。

ChatGPT, Gemini, Cursorエディター, Devin, etc …

しかしトレンドの移り変わりも早いので、積極的に情報をキャッチアップしていかないとすぐに取り残されてしまいますよね。

今回は有名どころのAIとしてGeminiとGithub Copilotを採用しました。

「AIがAIを開発する時代、エンジニアの役割はどう変化するのか？」という背景から本検証を行いました。

システム概要は3Dのロボットを画面上に表示し、ユーザーとリアルタイムで会話を行うというものです。

早速、以下検証動画をご覧ください。

リアルタイムAIチャット検証動画（※音声が流れます）

いかがでしたでしょうか？

システムのアイデア検討や設計は対話型AIのGemini 2.5 Proを活用し、実装はGithub Copilotで行いました。

私も微修正は行いましたが、ほぼ全ての機能をAIで完結することが可能であると再認識しました。

システム概要

概要資料もGithub Copilotで出力しています。

ドキュメントの記載は面倒と感じてしまうことも多いので、とても助かります。

システム全体図

設計書(pdf)

• 設計書

システム詳細

• バックエンド
  • Node.js(express)
  • WebSocket
• フロントエンド
  • React
  • Three.js
  • Web Speech API
  • Web Audio API
• VOICEVOX
  • https://hub.docker.com/r/voicevox/voicevox_engine
• Gemini
  • gemini-1.5-flash

プライベートPCはNVIDIA-GPUを搭載しているので、docker上にVOICEVOXサーバーを起動し、音声合成機能として利用しました。

各リソースはクラウドにデプロイせず、全てローカル環境で完結する構成となっています。

その他、ユーザー⇄AIとのリアルタイム性を向上させるためにバックエンドとの接続にはWebSocketを採用し、

Geminiは速度とコストのバランスからflashモデルを選択しました。通信はstreamで行なっています。

発展課題

• 3Dモデル
  • Blender, Mixamoで作成し、カスタマイズを行う
  • アニメーションを強化。思考中やリップシンク等
• AI
  • 会話の記憶を管理する
  • キャラクター設定を可能にする
  • ユーザーの自然な割り込みに対応する
  • 金額周りの調査（キャッシュの利用）
• UT(Unit Test)の実装

所感

今回はシステムの検討から実装まで、ほぼ全ての作業をAIに任せました。

確かに便利な部分もあり、技術の進歩を痛感する一方で

細かい実装の理解が追いついていない状態でも、表面上の機能が実現できてしまうという問題はあるかと思いました。

商用開発では本記事のような単純な機能開発だけではなく、独特の仕様要求や急な変更も入ります。

AIに一任するのではなく、実装された設計やコードは確認し、仮にAIが利用できない状況に陥った場合でも

自身で実装を継続する意識が重要なのではないでしょうか。

興味のある分野は深掘りし、その他の部分をAIにアシストしてもらうことが効果的なAIの活用方法かもしれません。