これをやっていきます。
なお、エラー等で詰まったときはClaude 3 Opus（有料版）を頼りました。おっぷすおっぷす〜〜！！✌️✌️ 1
ハンズオン
ローカル環境の準備
前提条件を確認：
- Node.js v18.17 以降
- npm v9 以降
- git v2.14.1 以降
なお、Nodeはv20系だとうまく動かないため注意。（ハマりポイント）
Bedrockのモデルを有効化
バージニア北部のClaude 3 Sonnet（中堅モデル）を有効化しておく。
ソースコードを取得
リポジトリのクローン
Cloud9 ターミナル
$ git clone https://github.com/aws-samples/recipe-ai.git
$ cd recipe-ai
バッケージのインストール
Cloud9 ターミナル
$ npm ci
アプリケーションを実行
新しいターミナルを開き、以下を実行。
Cloud9 ターミナル
$ npx amplify sandbox
すると、CloudFormationが実行されてAWSアカウント上に一時的なバックエンド環境がデプロイされます。これは凄い！
（Sandbox環境の実行を停止すると、CFnスタックが自動で削除される）
元のターミナルで以下を実行。
Cloud9 ターミナル
$ npm run dev
すると、ブラウザーでローカルのフロントエンドにアクセスできるようになります。
ブラウザーで動作確認
以下のURLにアクセス
無事にアプリが利用できました🎉
試しに食材名をカンマ区切りで入力して、料理をGenerateしてみましょう。
ソースコードを改造
タイトルや、LLMへ投げるプロンプトを日本語にしてみましょう。
- src/app/page.tsx：ページ本文の変更が可能
- amplify/data/bedrock.js：プロンプトの変更が可能
さらに、もはやレシピ関係ないジェネレーターに改造するのも簡単です。
プロンプトをいじるだけ！
ローカルで開発完了したらクラウドへ本格デプロイも可能なのですが、今日はいったんここまで。
おまけ：Claude 3 Opus化も可能！
リージョンをオレゴンに変更して、Claude 3 Opusに対応させることも可能です。
以下ファイルのリージョンとモデル名を変更します。
- amplify/backend.ts
- amplify/data/bedrock.js
👇 Opusで生成したレシピ。ちょっと賢くなってます
※ちなみに、プロンプトを日本語に変更すると、なぜかOpusではレスポンスがうまく取得できなくなってしまいました。モデルの呼び出しログは成功していることを確認済み。謎です 🤔