Build a serverless web application using generative AI

Create the application

1. In a new terminal or command line window, run the following command to use Vite to create a React application:

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

Open the application

1. In the terminal window, select and open the local link to view the Vite + React application.

Sign in to GitHub

1. Sign in to the GitHub website.

Start a new repository

In the Start a new repository section, make the following selections:

1. For Repository name, enter ai-recipe-generator, and choose the Public radio button.

2. Then choose Create a new repository.

Initialize Git

1. Open a new terminal window, navigate to your project's root folder (ai-recipe-generator), and run the following commands to initialize a git repository and push the application to the new GitHub repository:

   Note

   Replace the SSH GitHub URL in the command with your GitHub URL.

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

Install Amplify

1. Open a new terminal window, navigate to your app's root folder (ai-recipe-generator), and run the following command:

   npm create amplify@latest -y

View directory

1. Running the previous command scaffolds a lightweight Amplify project in the app's directory.

Open the Amplify console

1. Sign in to the AWS Management Console in a new browser window, and open the AWS Amplify console.

2. Choose Create new app.

Select GitHub to deploy your app

1. On the Start building with Amplify page, for Deploy your app, select GitHub, and choose Next.

Authenticate with GitHub

1. When prompted, authenticate with GitHub. You are automatically redirected back to the Amplify console.

2. Choose the repository and main branch you created earlier.

3. Then choose Next.

Confirm the build settings

1. Leave the default build settings, and choose Next.

Review configuration

1. Review the inputs selected, and choose Save and deploy.

View your app

1. AWS Amplify now builds your source code and deploys your app at https://...amplifyapp.com, and on every git push your deployment instance updates. It might take up to 5 minutes to deploy your app.

2. After the build completes, choose the Visit deployed URL button to see your web app up and running live.

Open the Amazon Bedrock console

1. Sign in to the AWS Management Console in a new browser window, and open the Amazon Bedrock console. Verify that you are in the US East (N. Virginia) (us-east-1) Region.

Open the model catalog

1. In the left navigation pane, under Discover, choose Model catalog.

Find the Claude 3.5 Sonnet model

1. Filter by the Anthropic provider, and then choose the Claude 3.5 Sonnet model.

Request model access

1. Choose Request model access. If this is the first time your account requests access to an Anthropic model, choose Submit use case details, complete the one-time form (a description of your intended use and a website URL), and then choose Submit. Access is typically granted immediately.

   Note

   If your account already has access to Anthropic models, the model opens directly and the use case form is not required. The form is required only once per account.

Create a Lambda function

1. On your local machine, navigate to the ai-recipe-generator/amplify/data folder, and create a file named bedrock.js.

Add the function code

1. Then, update the file with the following code:

   export function request(ctx) {
       const { ingredients = [] } = ctx.args;
     
       // Construct the prompt with the provided ingredients
       const prompt = `Suggest a recipe idea using these ingredients: ${ingredients.join(", ")}.`;
     
       // Return the request configuration
       return {
         resourcePath: `/model/anthropic.claude-3-5-sonnet-20241022-v2: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: prompt,
                   },
                 ],
               },
             ],
           }),
         },
       };
     }
     
     export function response(ctx) {
       // Parse the response body
       const parsedBody = JSON.parse(ctx.result.body);
       // Extract the text content from the response
       const res = {
         body: parsedBody.content[0].text,
       };
       // Return the response
       return res;
     }

This code defines a request function that constructs the HTTP request to invoke the Claude 3.5 Sonnet foundation model in Amazon Bedrock. The response function parses the response and returns the generated recipe.

Update the resource.ts file

1. On your local machine, navigate to the ai-recipe-generator/amplify/data/resource.ts file, and update it with the following code. Then, save the file.

   import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
   
   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((allow) => [allow.authenticated()])
       .handler(
         a.handler.custom({
           entry: "./bedrock.js",
           dataSource: "bedrockDS"
         })
       ),
   });
   
   export type Schema = ClientSchema<typeof schema>;
   
   export const data = defineData({
     schema,
     authorizationModes: {
       defaultAuthorizationMode: "apiKey",
       apiKeyAuthorizationMode: {
         expiresInDays: 30,
       },
     },
   });

2. The following code defines the askBedrock query that takes an array of strings called ingredients and returns a BedrockResponse. The .handler(a.handler.custom({ entry: "./bedrock.js", dataSource: "bedrockDS" })) line sets up a custom handler for this query, defined in bedrock.js, using bedrockDS as its data source.

Deploy resources

1. Open a new terminal window, navigate to your app's project folder (ai-recipe-generator), and run the following command to deploy cloud resources into an isolated development space so you can iterate fast.

   npx ampx sandbox

View confirmation message

1. After the cloud sandbox is fully deployed, your terminal displays a confirmation message.

Verify outputs file creation

1. Verify that the amplify_outputs.json file was generated and added to your project.

Modify the index CSS

1. On your local machine, navigate to the ai-recipe-generator/src/index.css file, and update it with the following code to center the app UI. Then, save the file.

   :root {
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
   
     color: rgba(255, 255, 255, 0.87);
   
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   
     max-width: 1280px;
     margin: 0 auto;
     padding: 2rem;
   
   }
   
   .card {
     padding: 2em;
   }
   
   .read-the-docs {
     color: #888;
   }
   
   .box:nth-child(3n + 1) {
     grid-column: 1;
   }
   .box:nth-child(3n + 2) {
     grid-column: 2;
   }
   .box:nth-child(3n + 3) {
     grid-column: 3;
   }

Modify the app CSS

1. Update the src/App.css file with the following code to style the ingredients form. Then, save the file.

   .app-container {
   
     margin: 0 auto;
     padding: 20px;
     text-align: center;
   }
   
   .header-container {
     padding-bottom: 2.5rem;
     margin:  auto;
     text-align: center;
   
     align-items: center;
     max-width: 48rem;
     
     
   }
   
   .main-header {
     font-size: 2.25rem;
     font-weight: bold;
     color: #1a202c;
   }
   
   .main-header .highlight {
     color: #2563eb;
   }
   
   @media (min-width: 640px) {
     .main-header {
       font-size: 3.75rem;
     }
   }
   
   .description {
   
     font-weight: 500;
     font-size: 1.125rem;
     max-width: 65ch;
     color: #1a202c;
   }
   
   .form-container {
     margin-bottom: 20px;
   }
   
   .search-container {
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
   }
   
   .wide-input {
     width: 100%;
     padding: 10px;
     font-size: 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
   }
   
   .search-button {
     width: 100%; /* Make the button full width */
     max-width: 300px; /* Set a maximum width for the button */
     padding: 10px;
     font-size: 16px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
   }
   
   .search-button:hover {
     background-color: #0056b3;
   }
   
   .result-container {
     margin-top: 20px;
     transition: height 0.3s ease-out;
     overflow: hidden;
   }
   
   .loader-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }
   
   .result {
     background-color: #f8f9fa;
     border: 1px solid #e9ecef;
     border-radius: 4px;
     padding: 15px;
     white-space: pre-wrap;
     word-wrap: break-word;
     color: black;
     font-weight: bold;
     text-align: left; /* Align text to the left */
   }

Add authentication

1. On your local machine, navigate to the ai-recipe-generator/src/main.tsx file, and update it with the following code. Then, save the file.

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App.jsx";
   import "./index.css";
   import { Authenticator } from "@aws-amplify/ui-react";
   
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
       <Authenticator>
         <App />
       </Authenticator>
     </React.StrictMode>
   );

2. The code uses the Amplify Authenticator component to scaffold out an entire user authentication flow, allowing users to sign up, sign in, reset their password, and confirm sign-in for multi-factor authentication (MFA).

Configure the Amplify library

1. Replace the contents of the ai-recipe-generator/src/App.tsx file with the following code, then save the file.

   import { FormEvent, useState } from "react";
   import { Loader, Placeholder } from "@aws-amplify/ui-react";
   import "./App.css";
   import { Amplify } from "aws-amplify";
   import { Schema } from "../amplify/data/resource";
   import { generateClient } from "aws-amplify/data";
   import outputs from "../amplify_outputs.json";
   import "@aws-amplify/ui-react/styles.css";
   
   Amplify.configure(outputs);
   
   const amplifyClient = generateClient<Schema>({
     authMode: "userPool",
   });
   
   function App() {
     const [result, setResult] = useState<string>("");
     const [loading, setLoading] = useState(false);
   
     const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       setLoading(true);
       try {
         const formData = new FormData(event.currentTarget);
         const { data, errors } = await amplifyClient.queries.askBedrock({
           ingredients: [formData.get("ingredients")?.toString() || ""],
         });
         if (!errors) {
           setResult(data?.body || "No data returned");
         } else {
           console.log(errors);
         }
       } catch (e) {
         alert(`An error occurred: ${e}`);
       } finally {
         setLoading(false);
       }
     };
   
     return (
       <div className="app-container">
         <div className="header-container">
           <h1 className="main-header">
             Meet Your Personal
             <br />
             <span className="highlight">Recipe AI</span>
           </h1>
           <p className="description">
             Simply type a few ingredients using the format ingredient1,
             ingredient2, etc., and Recipe AI will generate an all-new recipe on
             demand...
           </p>
         </div>
         <form onSubmit={onSubmit} className="form-container">
           <div className="search-container">
             <input
               type="text"
               className="wide-input"
               id="ingredients"
               name="ingredients"
               placeholder="Ingredient1, Ingredient2, Ingredient3,...etc"
             />
             <button type="submit" className="search-button">
               Generate
             </button>
           </div>
         </form>
         <div className="result-container">
           {loading ? (
             <div className="loader-container">
               <p>Loading...</p>
               <Loader size="large" />
               <Placeholder size="large" />
               <Placeholder size="large" />
               <Placeholder size="large" />
             </div>
           ) : (
             result && <p className="result">{result}</p>
           )}
         </div>
       </div>
     );
   }
   
   export default App;

2. The code starts by configuring the Amplify library with the client configuration file (amplify_outputs.json). It then generates a data client using the generateClient() function. The app presents a form for submitting a list of ingredients. After you submit the list, the app uses the data client to pass the list to the askBedrock query and retrieve the generated recipe, and then displays it to you.

Launch the app

1. Open a new terminal window, navigate to your project's root directory (ai-recipe-generator), and run the following command to launch the app:

   npm run dev

Open the app

1. Select the local host link to open the Vite + React application.

Create an account

1. Choose the Create Account tab, and use the authentication flow to create a new user by entering your email address and a password.

2. Then, choose Create Account.

Enter verification code

1. You receive a verification code by email. Enter the verification code to log in to the app.

Generate recipes

1. When signed in, you can enter ingredients and choose Generate to generate recipes.

Push changes

1. In the open terminal window, run the following command to push the changes to GitHub:

   git add .
   git commit -m 'connect to bedrock'
   git push origin main
   

View your changes

1. Sign in to the AWS Management Console in a new browser window, and open the AWS Amplify console.

2. AWS Amplify automatically builds your source code and deploys your app at https://...amplifyapp.com, and on every git push your deployment instance updates. Choose the Visit deployed URL button to see your web app up and running live.