Gemini APIを使ってLLMチャットを再現する

概要

Gemini APIを使って、LLMチャット機能を実装しました。
手を動かして得られた学びについての記録です。

↓作ったもの

目的

• LLM APIの基本的な部分を手を動かして学ぶ
• チャットUIを再現する
• モダンな技術構成を試す

環境

• 管理
  • pnpm
  • Turborepo
• Backend
  • Hono
• Frontend
  • Next.js
  • shadcn/ui

Turborepoによるモノレポを採用しました。

https://turborepo.com/

慣れないために初期設定コストはありましたが、ライブラリや型、ツールの共通化により効率的でした。開発が長期に渡るほどメリットを感じられそうです。
ターミナル操作に癖があることだけ気になりました。

shadcn/uiの、コンポーネントをコピーしてコードベースに取り込む、という思想は面白いですね。私は今までライブラリ型のコンポーネントライブラリしか利用経験がなかったので、その考え方が新鮮で勉強になりました。

https://ui.shadcn.com/

開発手法

AIコーディングエージェントを活用しました。
VSCodeでCodexとClaude Codeを開き、主にCodexを利用、簡単なことや並列でできることをClaude Codeに依頼しました。
執筆時点(2025/10)では、Codexの方が指示をよりうまく汲み取って、破綻なく実装してくれます。
もっと並列に動かしたり、指示をうまくすることによってAIのパワーを引き出したいですが、自分自身の思考が明らかにボトルネックでした。

Gemini APIの使い方については、公式ドキュメントの他、gemini-cliのコードを参考にしました。
DeepWiki等もあるので、既存実装が確認しやすいのは本当に助かりますね。

https://deepwiki.com/google-gemini/gemini-cli

実装した機能

テキスト生成

生成結果を一度に受け取る標準生成と、逐次受け取るストリーム生成を実装。
それぞれ以下のAPIと対応

• 標準生成
  • generateContent
• ストリーム生成
  • streamGenerateContent

ストリーム生成は、SSE(Server-Sent Events)が使用されています。
BackendでもSSEを中継してFrontendに生成されたコンテンツを返します。
HonoはSSEに対応しています(公式ドキュメント)

画面では、受け取ったデータを10文字ずつ20msで出力します。

画像の添付

Gemini APIには、メッセージとしてBase64エンコードされた画像データを送ることができます。他にもURIベースのファイルを指定することでも画像の添付ができますが、小さい画像ファイルであればこちらも利用できます。

公式ドキュメントのinlineDataがその項目です。

その他

モデル切り替え

会話一覧

会話（1つのチャット履歴）の一覧と切り替え、新規会話

アウトライン

普段使っていて、あったらいいなと思った機能
ユーザーのメッセージが一覧化され、クリックで該当箇所までスクロール

今後の改善、拡張案

• データの永続化
  • チャットデータの永続化は使用DBや形式など、色々と考えるところがありそうです
• 画像生成機能
  • nano bananaを使った画像生成
• DeepResearch機能
  • 執筆時点では、Gemini APIではDeepResearch APIは提供されていません
    • OpenAIはある
    • せっかくなので自作したい
• ツール呼び出し、MCP対応
• トークン管理、計測

まとめ

• Gemini APIでチャット基盤を構築し、今後の応用のための素振りができた
• 機能を再現することで、LLMチャットのUXについて考えを深められた

---

TRUSTART株式会社は、一緒に働くメンバーを募集しています！
インターンメンバーも大募集中です！
興味を持っていただいた方は、ぜひ弊社のページをご確認ください！！！

https://www.trustart.co.jp/recruit/