Skip to main content

Getting Started Resource Center

Build a Serverless Web Application using Generative AI

Task 4: Deploy the Backend API

In this task, you will use AWS Amplify to configure a custom data query to use Amazon Bedrock as data source

Introduction

Overview

In this task, you will configure a custom query that will reference the data source and the resolver you defined the previous model to produce a recipe based on a list of ingredients. This query will use a custom type to structure the response from Amazon Bedrock. 

What you will accomplish

In this tutorial, you will:

  • Define a GraphQL Query that takes an array of strings

  • Define a custom type to be used to structure the response from the query

Implementation

Time to complete

5 minutes

Get help

Troubleshooting Amplify

Learn about Data

Set up Amplify Data

1. Update the resource.ts file

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.

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

Screenshot showing the folder structure of the 'ai-recipe-generator' project, with the 'resource.ts' file highlighted in the data directory.

Resource.ts file

Replace your code with this code

bash 
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. Deploy resources

Open a new terminal window, navigate to your apps 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
Screenshot showing an example of using the 'npx ampx sandbox' command in a terminal for AWS Amplify Sandbox, including identifier and stack information.

3. View confirmation message

Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message.

Screenshot of a terminal window showing AWS Amplify serverless app deployment output. The output includes various parameters and settings for an Amplify app, such as OAuth configuration, region, authentication requirements, and references to the written amplify_outputs.json file.

4. Verify outputs file creation

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

Screenshot of a project folder named 'ai-recipe-generator' with the file 'amplify_outputs.json' highlighted in red, showing part of the directory structure for a serverless web app using AWS Amplify.

Conclusion

You have configured a GraphQL API to define a custom query to connect to Amazon Bedrock and generate recipes based on a list of ingredients. 

Build the Frontend

Start Task Five