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 への接続はほんの数行のコードで実現できます。この強力な組み合わせにより、レシピジェネレーターアプリの開発、デプロイ、スケーリングを効率的に行うとともに、セキュリティとパフォーマンスを確保できます。レシピAIがブラウザ上で動作する動画

前提条件

  • 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 リージョンを選択します。

AWS BedrockのWEBコンソール

ステップ 2: Claude モデルを選択し、「モデルアクセスをリクエスト」 ボタンをクリックしてください。

Claudeモデルタブをクリックして、右下のRequest model Accessをクリックする

ステップ 3: 「モデルアクセスを管理」 ボタンを選択

Manage Model accessボタンをクリックする

ステップ 4: Claude 3 Sonnet のオプションをチェックし、「変更を保存」ボタンをクリックしてください。

Claude3 SonnetのチェックボックスをONにしてSave Changesをクリックする

リポジトリのクローン

ステップ 1: AWS Samples のリポジトリに移動し、Fork ボタンから自分のリポジトリに Fork します

サンプルリポジトリのFolkボタンを押し、Clone用URLを取得する

ステップ 2: 端末で以下のコマンドを実行してアプリをクローンします

git clone https://github.com/[REPLACE_YOUR_GITHUB_NAME]/recipe-ai
Bash

ステップ 3: 端末で以下のコマンドを実行することで、VSCode で新しくクローンしたリポジトリのディレクトリを開きます。

cd recipe-ai 
code . -r
Bash

VSCode でリポジトリフォルダを開きます。amplify ディレクトリにはバックエンドの詳細設定が含まれています。（次のセクションで説明します）リポジトリをVSCodeで開いた画面

ステップ 4: 以下のコマンドを実行して、Amplify Gen 2 パッケージを含む必要なパッケージをインストールします

npm ｃi
Bash

Amplify バックエンド

最終的なアプリ(記事の冒頭の gif を参照)では、ユーザーは食材を入力し、Amazon Bedrock からレシピをリクエストするボタンをクリックします。 このコードはクローンしたリポジトリにあります。 ここでは、Amplify アプリを Amazon Bedrock と接続するための主要なステップを説明します。

リポジトリには、データディレクトリを含むamplifyフォルダがあります。amplify/data/resource.tsファイルには、食材のリストを受け取り、それらの食材に基づいてレシピを生成するために Amazon Bedrock にリンクできる GraphQL クエリを定義しました。このクエリは、Amazon Bedrock からのレスポンスを構造化するためにカスタムタイプを使用します。

amplifyディレクトリの構造

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" })
    ),
});
 
 ...
TypeScript

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"],
    
  })
);
TypeScript

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,
  };
}
TypeScript

アプリを実行すると(次のセクションで示されているように)、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();
TypeScript

このアプリは、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 || "";
}
TypeScript

アプリの実行

ステップ 1: Amplify は各開発者に個人用のクラウド サンドボックス環境を提供し、高速なビルド、テスト、反復のための隔離された開発スペースを提供します。クラウド サンドボックス環境を開始するには、新しいターミナル ウィンドウを開き、次のコマンドを実行します:

npx amplify sandbox
Bash

ステップ 2: ローカルホスト開発サーバーを起動するために、以下のコマンドを実行します。

npm run dev
Bash

The Recipe AI App running in the browser

アプリのデプロイ

アプリが正しく機能するようになったので、Amplify でデプロイしてホストしましょう。Amplify は、組み込みの CI/CD を備えたフルマネージドのホスティングサービスを提供し、Git ブランチを使用した本番環境とステージング環境の設定を簡素化します。Gen 2 では、リポジトリの各 Git ブランチごとに Amplify のフルスタック環境が作成されます。

ステップ 1: AWS コンソールにサインインし、使用したい AWS リージョンを選択します。パブリックプレビューのバナーをクリックし、「Amplify Gen 2 を試す」を選択します。

Amplify homepage on AWS console

ステップ 2: 「オプション 2: 既存のアプリケーションを使用して開始」を選択し、GitHub を選んだ後、「次へ」を選択して進めます。

select option 2 then select Github

ステップ 3 GitHub にログインし、「Authorize AWS Amplify」ボタンをクリックします。

Authorize Amplify to access your GitHub

ステップ 4: ドロップダウンリストからリポジトリとブランチを選択し、「次へ」 を選択して進めます。

Choose the repository and the branch from the dropdown lists

注: ドロップダウンリストにリポジトリが表示されない場合は、「View GitHub permissions」ボタンをクリックしてください。次に、リポジトリを選択し、アクセスを許可するために「Install & Authorize」ボタンをクリックしてください。

click on the "View GitHub permissions" button to authorize Amplify access to your repository

Select the repository and click Install & Authorize button

ステップ 5: 設定を確認し、「次へ」 ボタンをクリックして進めてください。

Review the settings

ステップ 6: 最後に、「保存してデプロイ」ボタンをクリックして、デプロイプロセスを開始します。

click on the "Save and deploy" button

ステップ 7: デプロイプロセスが完了するのを待ち、「デプロイされたURLにアクセス」ボタンを使用して Web アプリを開きます。

Click the Visit deployed Url button to open the web app

The Recipe AI App running in the browser

リソースのクリーンアップ

このチュートリアルを終えたので、以下に示すように Amplify コンソールからアプリを削除することで、バックエンドリソースを削除し予期しないコストを防ぐことができます。

Click the Delete app button

結論

おめでとうございます! 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 を翻訳したものです。翻訳はソリューションアーキテクトの髙柴元が担当致しました。

著者:

Mo Malaka

Mo Malaka is a Senior Solution Architect on the AWS Amplify Team. The Solution Architecture team educates developers regarding products and offerings, and acts as the primary point of contact for assistance and feedback. Mo enjoys using technology to solve problems and making people ’ s lives easier. You can find Mo on YouTube or on Twitter.