Task 5: Build the Frontend - Build a Serverless Web Application using Generative AI
OverviewWhat you will accomplishImplementationConclusion

Task 5: Build the Frontend

Time to complete

5 minutes

Get help

Troubleshooting Amplify

Troubleshooting common issues using Amplify UI

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

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.

  • 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
    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.

  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. 

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

  2. Modify the App CSS

    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 */
}
    The file structure for an 'ai-recipe-generator' project, highlighting the 'App.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.

  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>
);
    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.

    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.

    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.

    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.

    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. 

    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
    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.

    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.