Claude Codeの書籍を読みながらAI駆動開発を実際に試してみました。
APIキーを使い、リアルな金額感も知りたいと思ってます。
目次
事前準備
環境
- Windows11
- VS Code
- Claude Codeインストール済み
- APIキー使用
- モデルはSonnet 4.5
開始前のクレジット残高
こんな感じです

想定アーキテクチャ

| コンポーネント | 採用技術 | 役割と選定理由 |
| フロントエンド | Next.js (App Router) | 高速な描画とSEO、最新のReact機能を活用したユーザーインターフェースを提供。 |
| APIフレームワーク | Hono.js | Next.js API Routes内で動作する軽量・高速なAPI。型安全な開発体験(RPCモード)を提供。 |
| AIエージェント | Mastra | AIエージェントのワークフロー管理、ツール実行、長期記憶などを一元管理する司令塔。 |
| ORM | Prisma.js | MongoDB Atlasへの型安全なアクセス。AIエージェントが使用するデータの読み書きを担当。 |
| データベース | MongoDB Atlas | スキーマレスなドキュメント型DB。AIの非構造化データやベクトルデータの保存に最適。 |
要件定義
質問に回答してCLAUDE.mdを作成してもらう
AIチャットボットを作りたいです。仕様書を一緒に作りたいので必要な情報を質問してもらえますか?最後にC
LAUDE.mdファイルを出力します。
続けて
> 1. このAIチャットボットの主な目的や用途は何ですか?
- 汎用会話ボット
> 2. どのAI APIを使用する予定ですか?
- Claude API
> 3. 技術スタック(フロントエンド・バックエンド)の希望はありますか?
- フロントエンドとバックエンドはNext.jsのApp RouterとHono+Prisma.js
- AIエージェントフレームワークはMastra
- データベースはAtlasというMongoDBのサービスで
> 4. 必要な機能を教えてください(複数選択可):
- シンプルなチャット機能
- 会話履歴の保存
- 複数の会話スレッド管理
- リアルタイムにストリーミング応答
- ユーザー認証は不要
> 5. UIデザインやスタイリングについて:
- TailwindCSSを使用しますか?
使用する
- UIコンポーネントライブラリ(shadcn/ui、Radix UI、MUIなど)は使用しますか?
使用しません
> 6. 会話スレッドの管理について:
- サイドバーで会話一覧を表示する形式ですか?(ChatGPT風)
はい
- 会話のタイトルは自動生成しますか、それとも手動入力ですか?
自動生成
> 7. ストリーミング応答について:
- Server-Sent Events (SSE) を使用する予定ですか?
はい
- それともWebSocketsを使用しますか?
使用しません
> 8. データの永続化について:
- ユーザー認証が不要とのことですが、ブラウザごとに会話を識別する仕組み(例:ローカルストレージのUUIDなど)は必要ですか?
はい
- それとも完全に匿名で、複数デバイス間での同期は不要ですか?
完全匿名、複数デバイス間の同期は不要
> 9. その他の要件:
- 会話のエクスポート機能(JSONやMarkdown形式でダウンロード)は必要ですか?
不要
- 会話の削除機能は必要ですか?
はい
- レスポンシブデザイン(モバイル対応)は必要ですか?
はい
あと、デプロイ先はGoogle CloudのCloud Runを使いたいです
デプロイ先を追記してみました。

進んでます。いい感じなのかな?

CLAUDE.md出来ました!(長いので中略入れてます)
# AI チャットボット プロジェクト仕様書
## 1. プロジェクト概要
### 1.1 目的
Claude API を使用した汎用会話型 AI チャットボットの開発
### 1.2 主要な特徴
- リアルタイムストリーミング応答によるスムーズな会話体験
- 複数の会話スレッドを並行管理
- ブラウザベースの匿名利用(認証不要)
- ChatGPT風のモダンなUI/UX
- モバイル対応のレスポンシブデザイン
---
## 2. 技術スタック
### 2.1 フロントエンド
(略)
### 2.2 バックエンド
(略)
### 2.3 データベース
(略)
## 3. システムアーキテクチャ
### 3.1 全体構成
(略)
### 3.2 データフロー
#### 3.2.1 新規メッセージ送信時
(略)
#### 3.2.2 会話スレッド取得時
(略)
## 4. 機能要件
### 4.1 必須機能
#### 4.1.1 チャット機能
(略)
#### 4.1.2 会話スレッド管理
(略)
#### 4.1.3 データ永続化
(略)
#### 4.1.4 UI/UX
(略)
### 4.2 非機能要件
#### 4.2.1 パフォーマンス
(略)
#### 4.2.2 セキュリティ
(略)
#### 4.2.3 スケーラビリティ
(略)
---
## 5. データモデル設計
### 5.1 Prisma スキーマ
(略)
---
## 6. API 設計
### 6.1 エンドポイント一覧
#### 6.1.1 会話スレッド API
(略)
#### 6.1.2 メッセージ API
(略)
### 6.2 エラーハンドリング
(略)
---
## 7. フロントエンド設計
### 7.1 ディレクトリ構造
(略)
### 7.2 主要コンポーネント
#### 7.2.1 レイアウト構成
(略)
#### 7.2.2 状態管理
(略)
### 7.3 レスポンシブデザイン
(略)
---
## 8. バックエンド設計
### 8.1 ディレクトリ構造
(略)
### 8.2 Mastra 設定例
(略)
### 8.3 SSE ストリーミング実装
(略)
---
## 9. デプロイメント設計
### 9.1 Google Cloud Run 設定
#### 9.1.1 Dockerfile
(略)
#### 9.1.2 Cloud Run デプロイコマンド
(略)
### 9.2 環境変数
(略)
### 9.3 CI/CD パイプライン(Cloud Build)
(略)
## 10. 開発手順
### 10.1 セットアップ
(略)
### 10.2 開発の流れ
(略)
### 10.3 開発コマンド
(略)
## 11. 追加の推奨事項
### 11.1 セキュリティ
(略)
### 11.2 監視とロギング
(略)
### 11.3 今後の拡張案
(略)
## 12. 参考リソース
### ドキュメント
- [Next.js App Router](https://nextjs.org/docs/app)
- [Hono Documentation](https://hono.dev/)
- [Prisma MongoDB](https://www.prisma.io/docs/concepts/database-connectors/mongodb)
- [Mastra Documentation](https://mastra.ai/docs)
- [Claude API Reference](https://docs.anthropic.com/claude/reference)
- [Google Cloud Run](https://cloud.google.com/run/docs)
### チュートリアル
- SSE with Next.js: Server-Sent Events implementation
- Prisma with MongoDB Atlas: Getting started guide
- Deploying Next.js to Cloud Run: Step-by-step guide
---
## 変更履歴
| 日付 | バージョン | 変更内容 |
|------|-----------|---------|
| 2025-01-02 | 1.0.0 | 初版作成 |
---
**作成日**: 2025-01-02
**作成者**: Claude (AI Assistant)
**プロジェクト名**: AI Chatbot with Claude API全800行。これを一瞬で。
すごい。
要件定義完了時のクレジット残高

71円弱。
正直、もっといってるかとドキドキしてました笑
まとめ
Claude Codeを用いて質問をしてもらいながら回答することで、全800行のCLAUDE.mdが出来るとは思っていませんでした。
実装サンプルや図も書いてくれています。
次回、実装を任せていきますが、ここまで要件定義が具体的であれば期待できそうです。

