VS Code版のGPT Pilotを使ってみた
Pythagora GPT-Pilotは、フルスタックアプリケーションを開発してくれるAIエージェントです。普段はターミナルで利用していますが、今回はVS Code版を試してみました。
VS Code版のインストール
VS Code版は、以下のリンクから入手できます。
ユーザ情報を入力してアカウントを作成します。なんと、お試し用に、GPT-4用の10万トークンを無料で使えます。お試しだけならGPT-4のアカウントは必要ありません。
アプリケーションの開発
概要
試しに、その日に記録したメモから日記を生成する日記帳アプリを開発してもらうことにしました。要件は、How-to-write-a-good-initial-project-descriptionを参考にして、日本語で書きました。
日本語でやり取りしてくれることを期待して、要件の最後に、「** 重要 ** クライアントは英語が苦手です。クライアントと会話する時は必ず日本語で話してください。 」と追加しておきます。
メモから日記を作成するWebアプリケーションをNode.js/ExpressとMongoDBを使用して作成します。UIにはBootstrapとVanilla JSを使用します。
ユーザーは登録が必要です（ユーザー名とパスワードのみで、メールによる確認やパスワードの回復はありません）。セッションベースの認証を使用し、JWTは使用しません。
ユーザーがログインすると、ホームページにメモを入力するフィールドと、「記録」ボタンが表示されます。フィールドにメモを入力して、「記録」ボタンを押すと、メモの内容と「記録ボタン」を押した時刻がデータベースに登録されます。データベースへの登録が成功したら、メモのフィールドは空にします。
ホームページの上部右端には、カレンダー画面へのリンクを表示します。
カレンダー画面は、現在の月のカレンダーを表示します。月のラベルをクリックすることで、他の年月を選択することができます。データベースにデータが存在する日にちは、分かりやすくハイライトされ、クリックすることができます。ハイライトされた日をクリックすると、日記参照画面に飛びます。日記参照画面は、上部中央に日付を表示し、中央に日記を表示します。左上には戻るボタンを配置します。
日記参照画面では、まず、その日の全てのメモをデータベースから取得し、GPT-3.5に送信して、日記の形に整形してしてください。日記が生成されたら日記表示エリアに日記を表示してください。
異なるユーザーは完全に分離されており（各ユーザーは自分のデータのみを見ることができます）、複数の役割や管理者などは不要です。
以下のプロジェクト構造を使用してください：
- メインファイルはserver.jsと呼ばれるべきです。
- すべてのデータベースモデルはmodels/ディレクトリにあるべきです。
- HTMLを返すすべてのルートはroutes/ディレクトリにあるべきです。
- JSONを取り扱うAPIエンドポイント（フロントエンドJSによって使用される）はroutes/api/ディレクトリにあるべきです。
- すべてのテンプレートはviews/ディレクトリにあり、テンプレート言語としてEJSを使用します。
- すべての設定パラメーター（ポート、セッションシークレット、データベースURL、APIキー）はenvファイルに定義され、dotenv経由で読み込まれるべきです。
UIはシンプルでレスポンシブであり、ヘッダー（テキストロゴとページナビゲーション、ログアウト用のナビバーを含む）が必要です。スタイリングにはBootstrapを使用してください。
** 重要 **
クライアントは英語が苦手です。クライアントと会話する時は必ず日本語で話してください。
プロジェクト立ち上げ
Create New Appをクリックして、開発を開始します。
プロジェクト名を聞かれます。MemoJournalという名前にしてSubmitしました。
要件定義
GPT Pilotは、Node, Express, MongoDBを使った時にベストの結果を得られるそうです。作りたいアプリケーションについて、できる限り詳細に記述するようにとのことで、先ほど書いた要件を渡します。
要件が仕様に落とし込まれて返ってきました。日本語です。GPT-3.5の利用イメージについて聞かれていますが、特にイメージもないので、このまま進めます。
Let's start by refining your project idea:
メモを日記に変換するWebアプリケーション
目的:このWebアプリケーションの主な目的は、ユーザーが短いメモを記録し、それらのメモを日記の形に自動で整形する機能を提供することです。ユーザーは自分のメモを振り返り、特定の日付に関連するメモを基にした日記を読むことができます。
機能:1. **ユーザー登録と認証**:
ユーザーはユーザー名とパスワードを使用してアカウントを作成し、ログインできます。メールによる確認やパスワードの回復は必要ありません。セッションベースの認証システムを使用します。
2. **メモの記録**:
ログインしたユーザーは、ホームページに表示されるフィールドにメモを入力し、「記録」ボタンを押すことでメモをデータベースに保存できます。保存時には、メモの内容と、記録ボタンを押した時刻も記録されます。
3. **カレンダー機能**:
ホームページの上部右端にカレンダーページへのリンクがあります。カレンダーは現在の月を表示し、ユーザーは月のラベルをクリックすることで他の年月を選択できます。データベースにデータが存在する日はハイライトされ、クリック可能になります。
4. **日記の参照**: ハイライトされた日をクリックすると、その日のメモを基にした日記を表示する日記参照画面に遷移します。この画面は、選択した日付とその日付に関連する日記を表示します。
5. **日記の自動生成**: 日記参照画面で、その日の全てのメモをデータベースから取得し、GPT-3.5に送信して、日記の形に整形します。
技術的仕様:
- **アプリケーションタイプ**: Webアプリケーション。
- **バックエンド**: Node.js と Express フレームワーク。
- **データベース**: MongoDB と Mongoose ORM。
- **フロントエンド**: EJS テンプレートエンジン、Bootstrap でのスタイリング、vanilla JS。
- **認証**: セッションベース。
アーキテクチャ:
- メインファイル: `server.js`
- データベースモデル: `models/` ディレクトリ。
- ルート: HTML を返すすべてのルートは `routes/` ディレクトリ、API エンドポイントは `routes/api/` ディレクトリ。
- ビュー: `views/` ディレクトリ、EJS テンプレート言語。
- 設定: `.env` ファイルにすべての設定パラメーター（ポート、セッションシークレット、データベースURL、APIキー）を定義し、`dotenv` 経由で読み込む。UIデザイン:- シンプルでレスポンシブなデザイン。
- ヘッダーにはテキストロゴ、ページナビゲーション、ログアウト用のナビバーを含む。
- スタイリングにはBootstrapを使用。
その他の仕様:
- 異なるユーザー間でデータの分離を確保（各ユーザーは自分のデータのみアクセス可能）。
- 複数の役割や管理者アカウントは不要。
GPT-3.5の使用について明確な指示がなければ、どのようにメモを日記の形に整形するか、具体的な例や要件が必要です。
Does this sound good, and does it capture all the information about your project?
アーキテクトエージェントに、nodeがインストールされているか確認するために、node --versionコマンドを実行して良いか聞かれました。Yesです。
アーキテクトエージェントに、mongodbがインストールされているか確認するために、mongosh --versionコマンドを実行して良いか聞かれました。これもYesです。
テクニカルリードエージェントに、npm installを実行して良いか聞かれました。Yes
プロジェクト計画
技術リーダーエージェントがプロジェクトをタスクに分解して計画を立てした。（これは英語だったので、和訳、要約したものです。なお、ここから先は日本語で話してくれなくなりました。）
1. Memoモデルの実装
- MongooseでMemoモデルを作成 (フィールド: content, userId, createdAt)
- userIdとcreatedAtにインデックスを作成し、効率的なクエリを実現
- メモの保存と取得に使用
2. メモ記録機能の開発
- 新しいPOSTルート「/memos/create」を作成
- 認証ミドルウェア「isAuthenticated」を使用してユーザー認証
- メモを保存し、成功メッセージとともにリダイレクト
- エラーハンドリングの実装
3. カレンダー機能の開発
- 新しいGETルート「/calendar」を作成し、認証ミドルウェアで保護
- Memoモデルを使用して、ユーザーのメモがある日付を取得
- Bootstrapを使用してカレンダーを表示し、メモのある日付を視覚的に区別
- 月の移動用のナビゲーションを含める
4. 日記閲覧機能の作成
- GETルート「/diary/:date」を作成し、認証ミドルウェアで保護
- 指定された日付のユーザーのメモをMemoモデルから取得
- 取得したメモを「diary.ejs」ビューに渡して表示
- メモが存在しない場合のエラー処理を追加
5. GPT-3.5の統合
- OpenAI SDKを依存関係として追加
- 「/diary/:date」ルートを変更し、取得したメモをGPT-3.5 APIに送信
- GPT-3.5にメモを一貫性のある日記エントリーにフォーマットするように要求
- 生成された日記エントリーを「diary.ejs」ビューに表示
- APIの失敗や予期しないレスポンスに対するエラー処理を実装
6. フロントエンドでのカレンダーの動的インタラクション
- 「public/js/calendar.js」にJavaScriptを実装
- ページの再読み込みなしで月の移動を可能にする
- 新しいAPIエンドポイント「/api/calendar/month-data」からメモの日付を取得
- Fetch APIを使用してデータを取得し、メモのある日付を動的にハイライト表示
- 認証とエラー処理を適切に行う
7. ユーザー間のデータ分離の確保
- データベースインタラクションでユーザーIDに基づくフィルターを適用
- メモの作成、カレンダーデータの取得、日記の表示で、現在の認証ユーザーのデータのみを扱う
- コードにコメントを追加し、フィルターの適用箇所と理由を明記
開発（タスク１）
デベロッパーエージェントが、開発を開始しました。最初のタスクを実行して良いか聞いています。どうぞ。
以下のタスクを実行してよろしいでしょうか。
Mongoose を使って 'Memo' モデルを 'models/' ディレクトリの 'memo.js' という新しいファイルに実装します。このモデルには、'content' (文字列、必須)、'userId' (ObjectId、User モデルへの参照、必須)、'createdAt' (日付、デフォルトは現在の日付) のフィールドが必要です。効率的なクエリのために、'userId' と 'createdAt' にインデックスが作成されていることを確認してください。このモデルは、ユーザによって入力されたメモを保存し、日記を生成するためにそれらを取得するために使用されます。
mongooseのインストールコマンドを実行して良いか聞いてきました。Mongooseは、Node.jsアプリケーションでMongoDBを使用するための、ライブラリです。問題ないです。
コードモンキーエージェントが登場して、コーディングを始めました。コーディングが終わったら、レビューワーエージェントがレビューしています。「全体的に、コードはよく構造化されており、プロジェクトのガイドラインに従っている。」と褒めていました。
開発（タスク２）
タスク２を遂行して良いか聞かれています。Edit Taskというボタンを押すとタスクの内容を人間が修正することもできるようです。ここではYesを押してそのまま進めます。
このタスクを実行しますか？
メモ録用の新しいルートとビューを作成します。 'routes/memoRoutes.js'に、認証されたユーザーがメモを投稿できるようにするPOSTルート'/memos/create'を追加します。routes/middleware/authMiddleware.js'の'isAuthenticated'関数を使って、ユーザーがログインしているかどうかをチェックします。ルートハンドラは、リクエストボディから'content'を抽出し、現在のユーザーIDで新しいメモを保存し、成功メッセージとともにホームページにリダイレクトします。バリデーションの失敗やデータベースのエラーに対するエラーハンドリングが適切に行われていることを確認してください。
expressとbody-parserをインストールして良いか聞かれました。Express は、Node.js のための Web アプリケーションフレームワークです。Body-Parser は、Express のミドルウェアの一つで、受信したHTTPリクエストのボディを解析するために使用されます。Yes
ここで、トライアル用に付与された10万トークンを使い果たしました。
続けるためには、Pythagora Proを購読するか、OpenAIのAPIキーを設定する必要があります。続きます。
この記事が気に入ったらサポートをしてみませんか？