Create a Serverless Web Application with Generative AI

Introduction

In this article, we will teach how to create a serverless web application using AWS Amplify and Generative AI, employing Amazon Bedrock and the Claude 3 Sonnet model. The application allows users to input a list of ingredients to receive recipes generated based on those ingredients.

Application Architecture

The application consists of a user interface built with HTML for ingredient input and a backend that fetches recipes generated by AI.

Implementation

Step 1: Create a new React app

Start a new React project using the command:

npm create vite@latest ai-recipe-generator -- --template react-ts -y
cd ai-recipe-generator
npm install
npm run dev

Step 2: Initialize the repository on GitHub

Create a GitHub repository named ai-recipe-generator and push the app:

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:ai-recipe-generator.git
git branch -M main
git push -u origin main

Step 3: Install Amplify packages

Type the following commands in the terminal:

npm create amplify@latest -y

Step 4: Deploy your app with AWS Amplify

In the AWS Amplify console, click on create app and select your GitHub repository.

Step 5: Configure Amplify authentication

In the resource.ts file, update with the following code to set up authentication:

import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "Welcome to the AI-Powered Recipe Generator!",
      verificationEmailBody: (createCode) => `Use this code to confirm your account: ${createCode()}`,
    },
  },
});

Step 6: Set up access to the Amazon Bedrock model

1. Log in to the AWS Management Console and access Amazon Bedrock.
2. Select the Claude model.
3. Request access to the Claude 3 Sonnet model.

Step 7: Create a Lambda function

In the ai-recipe-generator/amplify/data directory, create a file bedrock.js with the logic to handle the requests:

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: JSON.stringify({
          anthropic_version: "bedrock-2023-05-31",
          max_tokens: 1000,
          messages: [
            {
              role: "user",
              content: [
                {
                  type: "text",
                  text: `

Human: ${prompt}

Assistant:`,
                },
              ],
            },
          ],
        }),
      },
    };
}

Step 8: Add Amazon Bedrock as a data source

Update the amplify/backend.ts file to connect to the Bedrock data source.

Step 9: Configure Amplify data

Define the API response structure in the resource.ts file.

Step 10: Style the application interface

Update the index.css file with the desired style definitions.

Conclusion

By following these steps, you will have a functional web application that utilizes Generative AI to create recipes based on provided ingredients. In the future, the integration with AI services will continue to expand, offering more and more capabilities and utilities for developers and users.