Skip to main content

Getting Started Resource Center

Build a Serverless Web Application using Generative AI

Task 5: Build the Frontend

In this task, you will create an app frontend and connect it to the cloud backend you have already built

Introduction

Overview

In this task, you will update the website you created in module one to use the Amplify UI component library to scaffold out an entire user authentication flow, allowing users to sign up, sign in, and reset their password and invoke the GraphQL API to use the customer query for generating recipe based on a list of ingredients.

What you will accomplish

In this tutorial, you will:

  • Install the Amplify client libraries

  • Configure your React app to add the authentication flow and invoke the GraphQL API

Implementation

Install the Amplify libraries

You will need two Amplify libraries for your project. The main aws-amplify library contains all of the client-side APIs for connecting your app's frontend to your backend, and the @aws-amplify/ui-react library contains framework-specific UI components.

1. Install the libraries

Open a new terminal window, navigate to your projects root folder (ai-recipe-generator), and run the following command to install the libraries.

npm install aws-amplify @aws-amplify/ui-react
Screenshot showing terminal commands to install AWS Amplify libraries for a serverless web app project in the 'ai-recipe-generator' directory. The output indicates successful installation with no vulnerabilities found. Used in Module 5 of a generative AI web app tutorial.

Style the App UI

1. Modify the Index CSS

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.

Screenshot of the file structure for an 'ai-recipe-generator' project, highlighting the 'index.css' file within the 'src/assets' directory. This image is used in Module 5 of the tutorial to show how to modify CSS for the project.

Index.css

Replace your code with this code

css 
: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;
}

1. Modify the App CSS

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

Screenshot of the file structure for the 'ai-recipe-generator' project, highlighting the 'App.css' file in the 'src' folder as part of a tutorial step to modify the app's CSS for a serverless web application with generative AI.

App CSS

Replace your code with this code

css 
.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 */
}

Implement the UI

1. Add authentication

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.

  • The code will use 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 multifactor authentication (MFA).

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>);
Screenshot showing the file structure of the 'ai-recipe-generator' project with the 'main.tsx' file highlighted within the 'src' folder, as part of a tutorial step for building a serverless web app using generative AI.

2. Configure the Amplify library

Open the ai-recipe-generator/src/App.tsx file, and update it with this code. Then, save the file.

  • 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 to users for submitting a list of ingredients. Once submitted, it will use the data client to pass the list to the askBedrock query and retrieve the generated recipe then display it to the user.

Screenshot showing the file structure of the ai-recipe-generator project with the App.tsx file highlighted. This image is used in the serverless web app with generative AI tutorial to illustrate which file to modify in the src directory.

3. Launch the app

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

npm run dev

4. Open the app

Select the Local host link to open the Vite + React application.

Screenshot showing the terminal output after running a local server for a serverless web app generative AI tutorial (Module 5). The text highlights the local server address (http://localhost:5173/) indicating the app is running locally.

5. Create an account

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

Then, choose Create Account.

Screenshot of a web form for creating an account, showing fields for email, password, and confirm password, with 'Create Account' button highlighted.

6. Enter verification code

You will get a verification code sent to your email. Enter the verification code to log in to the app.

Screenshot of a web interface prompting users to enter a confirmation code sent via email to complete login. The interface includes a field to input the code, a 'Confirm' button, and a 'Resend Code' option.

7. Generate recipes

When signed in, you can start inputting ingredients and generating recipes. 

Screenshot of a web app titled 'Meet Your Personal Recipe AI' showing an input box for typing ingredients such as chicken, white rice, yellow squash, and onion, with a 'Generate' button for creating recipes using AI.

8. Push changes

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
Screenshot of a command-line terminal showing git commands used to add, commit, and push changes to a repository for the 'ai-recipe-generator' project as part of a serverless web app with generative AI tutorial. The output displays files changed and push confirmation to GitHub.

9. View your changes

Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at https://console.aws.amazon.com/amplify/apps.

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

Screenshot of the AWS Amplify console showing the overview page for the 'ai-recipe-generator' app, with a highlighted 'Visit deployed URL' button, production branch deployment status, and branch details. Used in a tutorial for building a serverless web app with generative AI.

Conclusion

You have now connected your app to the Amplify backend and built a frontend to generate a recipe based on a list of ingredients submitted by the user.

Clean Up Resources

Start Task Six