Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Skip to main content

Getting Started Resource Center

TUTORIAL

Build a Serverless Web Application using Generative AI

Create a simple serverless web application using AWS Amplify and Amazon Bedrock

Introduction

Overview

In this tutorial, you will learn how to use AWS Amplify to build a serverless web application powered by Generative AI using Amazon Bedrock and the Claude 3 Sonnet foundation model. Users can enter a list of ingredients, and the application will generate delicious recipes based on the input ingredients. The application includes an HTML-based user interface for ingredient submission and a backend web app to request AI-generated recipes.

What you will accomplish

In this tutorial, you will:

  • Configure AWS Amplify to host your frontend application with continuous deployment built in

  • Configure Amplify Auth and enable Amazon Bedrock foundation model Access

  • Build an app backend for handling requests for your web application

  • Use Amplify Data to call the serverless backend

  • Connect the app to the backend

Prerequisites

Before starting this tutorial, you will need:

Implementation

Beginner

35 minutes

Free tier eligible

Note: Accounts created within the past 24 hours might not yet have access to the services required for this tutorial.

July 19, 2024

Application Architecture

The following diagram provides a visual representation of the services used in this tutorial and how they are connected. This application uses AWS Amplify, a GraphQL API built with AWS AppSync, AWS Lambda, and Amazon Bedrock.

As you go through the tutorial, you will learn about the services in detail and find resources that will help you get up to speed with them.

Architecture diagram illustrating a serverless generative AI application on AWS, featuring user interaction through AWS Amplify, authentication via Amazon Cognito, data flow using AWS AppSync and GraphQL, AWS Lambda for compute, and Amazon Bedrock for generative AI capabilities.

Tasks

This tutorial is divided into the following tasks. You must complete each task before moving to the next one.

  1. Host a Static Website (5 minutes): Configure AWS Amplify to host your frontend application with continuous deployment built in

  2. Manage Users (5 minutes): Configure Amplify Auth and enable Amazon Bedrock foundation model Access

  3. Build a Serverless Backend (10 minutes): Build an app backend for handling requests for your web application

  4. Call the API from the Static Website (5 minutes): Use Amplify Data to call the serverless backend

  5. Build the frontend (5 minutes): Connect the app to the backend

  6. Clean up Resources (2 minutes): Clean up the resources used in this tutorial

Host a Static Website

Start Task One