Claude CodeでAIチャットボットを開発｜Cloud Runへデプロイする流れ
takashiClaude Codeで日本語で雑談できるAIチャットボットを作ってみました。この記事では、私が実際に試した構成、実装の流れ、つまずいた点を共有します。
やりたかったこと
💻 今回試したこと
Claude Codeを使い、AIチャットボットの作成からCloud Runへのデプロイまでを1日で試しました
今回私は、Claude Codeの学習を兼ねて、日本語で会話できるAIチャットボットを作ってみました。
目的は、AIと会話できるWebアプリを、実装から公開まで一通り体験してみることでした。
実際にやってみると、画面作成だけでなく、API、ログ保存、エラー処理、Docker、Cloud Runまで触ることになり、よい練習になりました。
システム構成
🧩 全体の構成
画面はNext.js、APIはHono、AI応答はClaude、ログ保存はMongoDBという構成で作りました
今回のアプリは、ブラウザでメッセージを入力すると、API経由でClaudeに送信し、返答をストリーミング表示する構成です。
会話履歴は画面を開いている間だけ保持し、リロードすると消える仕様にしました。まずはプロトタイプとして、複雑にしすぎない方針です。
一方で、ユーザーの発言とAIの返答は、あとから確認できるようにMongoDBへ保存しました。
使用技術
🛠️ 使った技術
Next.js、Hono、Mastra、Claude、MongoDB、Prisma、Docker、Cloud Runを組み合わせました
- Next.js（画面とアプリ全体）
- Hono（APIルート）
- Mastra（AIエージェントの定義）
- Claude（チャットの応答生成）
- MongoDB + Prisma（ログ保存）
- Docker + Cloud Run（デプロイ）
専門用語が多く見えますが、役割で分けると「画面」「API」「AI応答」「ログ保存」「公開環境」です。
中小企業で使う場合も、最初から全部を本番運用レベルにするより、このように役割を分けて小さく試すと理解しやすいと感じました。
Claude Codeへの指示内容
📝 最初に整理したこと
実装前にTODO.mdとCLAUDE.mdを作り、技術スタックと進め方を先に決めました
いきなりコードを書き始めるのではなく、まず実行計画を作りました。
TODO.mdには全体を6フェーズに分けた作業計画を書き、CLAUDE.mdには技術スタック、設計方針、コーディング規約をまとめました。
私の場合、この準備をしてからClaude Codeに実装を進めてもらったことで、途中でやることが散らかりにくくなりました。
実装の流れ
🧭 進め方
画面、API、AI連携、ログ保存、エラー処理、デプロイの順に進めました
最初にcreate-next-appでNext.jsのひな型を作成しました。App RouterとTypeScriptを使う構成です。
次に、チャット画面を作りました。メッセージ一覧、入力欄、送信処理を分け、状態管理はuseChatというフックにまとめました。
APIはHonoで作り、メッセージを送るとClaudeの返答がストリーミングで返るようにしました。
その後、MongoDBへのログ保存、エラーハンドリング、Dockerfile、Cloud Run用のデプロイスクリプトを追加しました。
実際に完成したアプリ
💬 完成したもの
日本語で入力すると、AIが返答し、会話ログもMongoDBに保存されるチャットアプリになりました
完成したアプリでは、ブラウザ上で日本語のメッセージを入力し、AIの返答を受け取れます。
返答は一気に表示するのではなく、ストリーミングで少しずつ表示される形にしました。実際のチャットサービスに近い感覚になります。
また、Cloud Runへデプロイし、公開環境でもMongoDBへのログ保存まで確認しました。
できたこと
✅ できたこと
チャットUI、Claude連携、ログ保存、エラー処理、Cloud Runデプロイまで通せました
- 日本語チャットUIを作成できた
- Claudeの応答をストリーミング表示できた
- MongoDBへ会話ログを保存できた
- ネットワークエラーやHTTPステータス別のエラー表示を追加できた
- Docker化してCloud Runへデプロイできた
特に、ローカルで動くだけではなくCloud Runまでデプロイできた点は大きかったです。
小さなプロトタイプでも、公開環境まで試すと見えてくる問題がありました。
できなかったこと
🧪 まだできていないこと
本格運用に必要な認証、履歴画面、管理機能までは作っていません
今回は学習用のプロトタイプなので、ユーザー認証や管理画面は作っていません。
会話履歴も画面をリロードすると消える仕様です。ログ自体はMongoDBに保存していますが、ユーザーがあとから履歴を見る画面はありません。
社内向けに使うなら、アクセス制限、ログの確認画面、個人情報の扱いなどを追加で考える必要があります。
Claude Codeを使って感じたこと
🤝 使ってみた感想
小さなフェーズに分けて進めると、Claude Codeとの作業はかなり進めやすくなりました
今回やってみて、Claude Codeにいきなり全部任せるより、フェーズを分けて進めるほうが合っていると感じました。
TODO.mdで作業を区切っておくと、今どこまで終わったか確認しやすく、実装漏れも減らせます。
一方で、ライブラリのバージョン差やクラウド環境の制約は、人間側でも確認が必要です。最新版を使えばよいとは限らない、という点は今回の学びでした。
今後やりたいこと
🚀 次に試したいこと
認証、履歴表示、社内FAQ連携など、業務で使う形に近づけてみたいです
次は、ログイン機能を付けて、利用者ごとに会話履歴を見られるようにしてみたいです。
また、社内FAQやマニュアルを参照して回答する仕組みも試してみたいと思いました。
最初から完璧なチャットボットを目指すより、まずは小さなプロトタイプを作り、どこが業務に使えそうか確認するのが現実的だと感じました。
関連記事
