Amazon Web Services ブログ
生成 AI とNext.js を利用して AWS Amplify でフルスタックのレシピ提案アプリをビルドする
Claude 3 によってパワーアップされた生成 AI、Next.js、AWS Amplify、Amazon Bedrock の世界に飛び込んでいきましょう。このガイドでは、ユーザーが食材のリストを入力し、Claude 3 が入力された食材にもとづいて美味しいレシピを提案するレシピ提案アプリの作成方法を紹介します。
2023 年 11 月、AWS Amplify は次世代のフルスタックアプリ構築機能のパブリックプレビューを発表しました。Amplify Gen 2 はコードファーストの開発者エクスペリエンスを採用しており、開発者は TypeScript と AWS Cloud Development Kit (AWS CDK) を使用して、認証やデータ利用のユースケースを含むクラウドリソースを定義およびプロビジョニングできます。
Amazon Bedrock は、AI21 Labs、Anthropic、Cohere、Meta、Stability AI、Amazon などの先進的な AI 企業から選択した高性能な基盤モデル (FM) をフルマネージドで提供するサービスです。単一の API を通じてこれらのモデルにアクセスできるほか、セキュリティ、プライバシー、責任ある AI の観点を考慮した生成型 AI アプリケーションを構築するために必要な幅広い機能を利用できます。Amazon Bedrock では、選択したモデルに関係なく単一の API にアクセスできるため、異なる FM を利用したり、コード変更を最小限に抑えて最新バージョンのモデルにアップグレードしたりする柔軟性が得られます。
AWS Amplify は、データ管理、UI コンポーネント、ホスティングなどの機能群を提供し、クラウドでの Web アプリ開発を加速します。生成AI アプリを構築する際、Amplify はプロセスを簡略化し、シームレスな開発に必要なツールを提供します。さらに、AWS CDK が Amplify Gen 2 を動作させることで、Amazon Bedrock への接続はほんの数行のコードで実現できます。この強力な組み合わせにより、レシピジェネレーターアプリの開発、デプロイ、スケーリングを効率的に行うとともに、セキュリティとパフォーマンスを確保できます。
前提条件
- AWS アカウント。Amplify は AWS 無料利用枠が含まれています。
- Node.js v18.17 以降
- npm v9 以降
- git v2.14.1 以降
- テキストエディタ。このガイドでは VSCode を使用しますが、好みの IDE を使用できます。
Amazon Bedrock モデルアクセス
Amazon Bedrock を使用すると、ユーザーはさまざまな生成 AI モデルへのアクセスをリクエストできます。
この例では、Anthropic の Claude 3 Sonnet へのアクセスが必要です。
以下の手順に従ってアクセスをリクエストしてください。
ステップ 1: AWS コンソールにサインインし、Amazon Bedrock に移動します。リージョン選択から us-east-1 リージョンを選択します。
ステップ 2: Claude モデルを選択し、「モデルアクセスをリクエスト」 ボタンをクリックしてください。
ステップ 3: 「モデルアクセスを管理」 ボタンを選択
ステップ 4: Claude 3 Sonnet のオプションをチェックし、「変更を保存」ボタンをクリックしてください。
リポジトリのクローン
ステップ 1: AWS Samples のリポジトリに移動し、Fork ボタンから自分のリポジトリに Fork します
ステップ 2: 端末で以下のコマンドを実行してアプリをクローンします
git clone https://github.com/[REPLACE_YOUR_GITHUB_NAME]/recipe-aiステップ 3: 端末で以下のコマンドを実行することで、VSCode で新しくクローンしたリポジトリのディレクトリを開きます。
cd recipe-ai
code . -rVSCode でリポジトリフォルダを開きます。amplify ディレクトリにはバックエンドの詳細設定が含まれています。（次のセクションで説明します）
ステップ 4: 以下のコマンドを実行して、Amplify Gen 2 パッケージを含む必要なパッケージをインストールします
npm ｃi
Amplify バックエンド
最終的なアプリ(記事の冒頭の gif を参照)では、ユーザーは食材を入力し、Amazon Bedrock からレシピをリクエストするボタンをクリックします。 このコードはクローンしたリポジトリにあります。 ここでは、Amplify アプリを Amazon Bedrock と接続するための主要なステップを説明します。
リポジトリには、データディレクトリを含むamplifyフォルダがあります。amplify/data/resource.tsファイルには、食材のリストを受け取り、それらの食材に基づいてレシピを生成するために Amazon Bedrock にリンクできる GraphQL クエリを定義しました。このクエリは、Amazon Bedrock からのレスポンスを構造化するためにカスタムタイプを使用します。
GraphQL API のスキーマは 2 つの主要な部分から構成されます:
askBedrockクエリは、ingredientsという文字列の配列を受け取り、BedrockResponseを返します。.authorization([a.allow.public()])を使用して公開アクセス可能にしました。.handler(a.handler.custom({ entry: "./bedrock.js", dataSource: "bedrockDS" }))行は、bedrockDSをデータソースとして使用し、bedrock.js内で定義されているこのクエリのカスタムハンドラを設定します。BedrockResponseは body と error の 2 つの文字列型フィールドを持つカスタムタイプです。このカスタムタイプは、askBedrockクエリからのレスポンスを構造化するために使用されます。
...
const schema = a.schema({
BedrockResponse: a.customType({
body: a.string(),
error: a.string(),
}),
askBedrock: a
.query()
.arguments({ ingredients: a.string().array() })
.returns(a.ref("BedrockResponse"))
.authorization([a.allow.public()])
.handler(
a.handler.custom({ entry: "./bedrock.js", dataSource: "bedrockDS" })
),
});
...amplify/backend.ts ファイルでは、Amazon Bedrock へのクエリを接続するために bedrockDS という名前の HTTP データソースを作成します。このデータソースは、us-east-1 リージョンの Bedrock サービスに関連付けられています。さらに、addToPrincipalPolicy メソッドを使用して、bedrockDS データソースのプリンシパルに新しいポリシーを追加します。ポリシーステートメントは、許可されたリソースとアクションを指定します。この場合、リソースは Claude 3 モデルの AWS ARN(Amazon リソースネーム)であり、許可されたアクションは bedrock:InvokeModel です。
const bedrockDataSource = backend.data.resources.graphqlApi.addHttpDataSource(
"bedrockDS",
"https://bedrock-runtime.us-east-1.amazonaws.com",
{
authorizationConfig: {
signingRegion: "us-east-1",
signingServiceName: "bedrock",
},
}
);
bedrockDataSource.grantPrincipal.addToPrincipalPolicy(
new PolicyStatement({
resources: [
"arn:aws:bedrock:us-east-1::foundation-model/anthropic.claude-3-sonnet-20240229-v1:0",
],
actions: ["bedrock:InvokeModel"],
})
);
amplify/data/bedrock.js ファイルには、askBedrock ハンドラの実装のロジックが含まれています。
これは、クエリの入力パラメータ、つまり ingredients を利用してプロンプトを生成し、メッセージ配列の一部としてプロンプト文字列をリクエスト本文に含めることで、Claude 3 モデルに対して POST リクエストを使用し、 HTTP データソース (今回はAmazon Bedrock) に送信します。
export function request(ctx) {
const { ingredients = [] } = ctx.args ;
const prompt = `Suggest a recipe idea using these ingredients : ${ ingredients.join(
","
)}.` ;
return {
resourcePath: `/model/anthropic.claude-3-sonnet-20240229-v1:0/invoke`,
method: "POST",
params: {
headers: {
"Content-Type": "application/json",
},
body: {
anthropic_version: "bedrock-2023-05-31",
max_tokens: 1000,
messages: [
{
role: "user",
content: [
{
type: "text",
text: `\n\nHuman:${ prompt } \n\nAssistant:`,
},
],
},
],
},
},
};
}
export function response(ctx) {
return {
body: ctx.result.body,
};
}
アプリを実行すると(次のセクションで示されているように)、amplifyconfiguration.json という名前のファイルが自動的に生成されます。このファイルには、API のエンドポイントの詳細が含まれています。src/app/amplify-utils.ts で、以下のように Amplify クライアントライブラリを初期化して設定します。次に、Amplify バックエンドへの完全型付き API リクエストを容易にするデータクライアントを作成します。
import config from "@/../amplifyconfiguration.json";
import { Amplify } from "aws-amplify";
import { generateClient } from "aws-amplify/data";
import { type Schema } from "../../amplify/data/resource";
Amplify.configure(config);
export const amplifyClient = generateClient();
このアプリは、src/app/page.tsx ファイルを使用して、食材のリストを送信するためのフォームをユーザーに提示します。
送信されると、src/app/actions.ts ファイルの generateRecipe 関数が呼び出され、生成されたレシピを取得してユーザーに表示します。
src/app/actions.ts ファイルには、generateRecipe 関数があります。この関数は Amplify クライアントを利用して askBedrock クエリを呼び出し、食材をパラメータとして渡して Amazon Bedrock から AI 生成されたレシピを取得します。
import { amplifyClient } from "./amplify-utils";
export async function generateRecipe(formData: FormData) {
const response = await amplifyClient.queries.askBedrock({
ingredients: [formData.get("ingredients")?.toString() || ""],
});
const res = JSON.parse(response.data ?.body !);
const content = res.content[0].text ;
return content || "";
}
アプリの実行
ステップ 1: Amplify は各開発者に個人用のクラウド サンドボックス環境を提供し、高速なビルド、テスト、反復のための隔離された開発スペースを提供します。クラウド サンドボックス環境を開始するには、新しいターミナル ウィンドウを開き、次のコマンドを実行します:
npx amplify sandbox
ステップ 2: ローカルホスト開発サーバーを起動するために、以下のコマンドを実行します。
npm run dev
アプリのデプロイ
アプリが正しく機能するようになったので、Amplify でデプロイしてホストしましょう。Amplify は、組み込みの CI/CD を備えたフルマネージドのホスティングサービスを提供し、Git ブランチを使用した本番環境とステージング環境の設定を簡素化します。Gen 2 では、リポジトリの各 Git ブランチごとに Amplify のフルスタック環境が作成されます。
ステップ 1: AWS コンソールにサインインし、使用したい AWS リージョンを選択します。パブリックプレビューのバナーをクリックし、「Amplify Gen 2 を試す」を選択します。
ステップ 2: 「オプション 2: 既存のアプリケーションを使用して開始」を選択し、GitHub を選んだ後、「次へ」を選択して進めます。
ステップ 3 GitHub にログインし、「Authorize AWS Amplify」ボタンをクリックします。
ステップ 4: ドロップダウンリストからリポジトリとブランチを選択し、「次へ」 を選択して進めます。
注: ドロップダウンリストにリポジトリが表示されない場合は、「View GitHub permissions」ボタンをクリックしてください。次に、リポジトリを選択し、アクセスを許可するために「Install & Authorize」ボタンをクリックしてください。
ステップ 5: 設定を確認し、「次へ」 ボタンをクリックして進めてください。
ステップ 6: 最後に、「保存してデプロイ」ボタンをクリックして、デプロイプロセスを開始します。
ステップ 7: デプロイプロセスが完了するのを待ち、「デプロイされたURLにアクセス」ボタンを使用して Web アプリを開きます。
リソースのクリーンアップ
このチュートリアルを終えたので、以下に示すように Amplify コンソールからアプリを削除することで、バックエンドリソースを削除し予期しないコストを防ぐことができます。
結論
おめでとうございます! AWS Amplify Gen 2 と Amazon Bedrock を使用して、生成 AI の力を借りたレシピジェネレーターアプリを開発することに成功しました。
加えて、Amplify Hosting を使用して AWS にアプリをデプロイしました。
Amplify Gen 2 を始めるには、クイックスタートチュートリアルをお試しください。
フィードバックや機能リクエストは、コミュニティ Discordにご参加ください。
この記事は、Use Generative AI and Next.js with AWS Amplify to build a Fullstack Recipe Generator を翻訳したものです。翻訳はソリューションアーキテクトの髙柴元が担当致しました。
著者: