Build a Serverless AI App with React and Amazon Bedrock

Introduction

The fusion of AI with modern web applications is revolutionizing user experiences. However, integrating powerful AI models without managing complex backend infrastructure can be daunting. Amazon Bedrock is a fully managed service that lets you build and scale generative AI apps using foundation models (FMs) from providers like Anthropic, AI21 Labs, and Amazon Titan, without managing servers.

In this blog, we will walk you through building a Serverless AI-powered App using React.js and Amazon Bedrock.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Why Amazon Bedrock?

Before diving into development, let’s understand why Amazon Bedrock is a game-changer:

No Infrastructure Management: You don’t need to worry about provisioning or scaling servers.
Access to Multiple Foundation Models: Choose from top models like Claude, Jurassic, and Titan.
Easy API Integration: Interact with AI models using simple API calls.
Serverless by Design: Combine with AWS Lambda, Amazon API Gateway, and Amazon S3 for a fully serverless architecture.

High-Level Architecture

React Frontend: A user interface to interact with the AI model.
Amazon API Gateway: Exposes a REST API to handle frontend requests.
AWS Lambda Function: Processes requests and communicates them to Amazon Bedrock.
Amazon Bedrock: Generates AI responses.
Amazon S3 (Optional): Hosts your React app for a true serverless deployment.

Step-by-Step Guide

Set Up Your React App

npx create-react-app ai-bedrock-app
cd ai-bedrock-app
npm start

npx create-react-app ai-bedrock-app

cd ai-bedrock-app

npm start

Create a simple UI with a text input and a button to send prompts to the AI model.

import React, { useState } from 'react';

function App() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSend = async () => {
    const res = await fetch('https://<your-api-gateway-url>', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    setResponse(data.response);
  };

  return (
    <div className="App">
      <h1>AI Chat with AWS Bedrock</h1>
      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} />
      <button onClick={handleSend}>Send</button>
      <div><strong>Response:</strong> {response}</div>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {

const [prompt, setPrompt] = useState('');

const [response, setResponse] = useState('');

const handleSend = async () => {

const res = await fetch('https://<your-api-gateway-url>', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ prompt }),

});

const data = await res.json();

setResponse(data.response);

};

return (

<h1>AI Chat with AWS Bedrock</h1>

<textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} />

<div><strong>Response:</strong> {response}</div>

</div>

);

}

export default App;

Create an AWS Lambda Function to Call Amazon Bedrock

Go to AWS Lambda and create a new function:

import boto3
import json

bedrock = boto3.client('bedrock-runtime')

def lambda_handler(event, context):
    body = json.loads(event['body'])
    prompt = body.get('prompt', '')

    response = bedrock.invoke_model(
        modelId='anthropic.claude-v2',
        body=json.dumps({
            "prompt": f"\n\nHuman: {prompt}\n\nAssistant:",
            "max_tokens_to_sample": 200
        }),
        contentType='application/json',
        accept='application/json'
    )

    response_body = json.loads(response['body'].read())
    return {
        'statusCode': 200,
        'headers': { 'Access-Control-Allow-Origin': '*' },
        'body': json.dumps({'response': response_body['completion']})
    }

import boto3

import json

bedrock = boto3.client('bedrock-runtime')

def lambda_handler(event, context):

body = json.loads(event['body'])

prompt = body.get('prompt', '')

response = bedrock.invoke_model(

modelId='anthropic.claude-v2',

body=json.dumps({

"prompt": f"\n\nHuman: {prompt}\n\nAssistant:",

"max_tokens_to_sample": 200

}),

contentType='application/json',

accept='application/json'

)

response_body = json.loads(response['body'].read())

return {

'statusCode': 200,

'headers': { 'Access-Control-Allow-Origin': '*' },

'body': json.dumps({'response': response_body['completion']})

}

AWS IAM Permissions:

Ensure your AWS Lambda function has the following permissions:

bedrock:InvokeModel
logs:CreateLogGroup
logs:CreateLogStream
logs:PutLogEvents

bedrock:InvokeModel

logs:CreateLogGroup

logs:CreateLogStream

logs:PutLogEvents

Set Up Amazon API Gateway

Go to Amazon API Gateway → Create a new HTTP API.
Integrate with your AWS Lambda function.
Enable CORS for your frontend domain.
Deploy and copy the API invoke URL.

4. Connect React Frontend with Amazon API Gateway

Update the React fetch URL with your Amazon API Gateway endpoint.

const res = await fetch('https://your-api-gateway-url/prod', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt }),
});

const res = await fetch('https://your-api-gateway-url/prod', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ prompt }),

});

Deploy React App on Amazon S3 (Optional)

For a fully serverless deployment:

Build your React app:

npm run build

1	npm run build

Upload the build files to an Amazon S3 bucket.
Enable Static Website Hosting on Amazon S3.
Point your domain (optional) using Amazon Route 53.

Test the App

Open your React app in the browser, type a query, and hit Send. You will see real-time responses generated by Amazon Bedrock’s AI models, without managing any servers.

Advantages of This Architecture

Completely Serverless: No Amazon EC2, no backend hosting.
Scalable on Demand: Amazon Bedrock and AWS Lambda scale automatically.
Pay-as-You-Go: You pay only for API calls and compute usage.
Model Flexibility: Switch between different Foundation Models with minimal code changes.

Real-World Use Cases

AI-driven chatbots
Content generation tools
Automated customer support assistants
Summarization engines
Internal knowledge base search bots

Conclusion

With Amazon Bedrock and a React frontend, building a powerful AI-driven application becomes a streamlined, serverless experience. Whether you’re a startup experimenting with GenAI or an enterprise building scalable AI solutions, Amazon Bedrock empowers you to focus on features over infrastructure.

Drop a query if you have any questions regarding Amazon Bedrock and we will get back to you quickly.

Empowering organizations to become ‘data driven’ enterprises with our Cloud experts.

Reduced infrastructure costs
Timely data-driven decisions

Get Started

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. Do I need Machine Learning expertise to use Amazon Bedrock?

ANS: – No, Amazon Bedrock abstracts the complexity of AI/ML model training and deployment. Developers can simply use API calls to invoke AI models and integrate them into their applications without ML expertise.

2. Can I deploy my React App serverlessly on AWS?

ANS: – Yes, you can host your React app on Amazon S3 as a static website, making the entire solution serverless. You can also use AWS Amplify for CI/CD deployments.

3. Is it possible to secure the Amazon API Gateway endpoint?

ANS: – Yes, you can secure your Amazon API Gateway using Amazon Cognito Authentication, API Keys, or IAM-based access policies to ensure that only authorized users can call your AI service.

WRITTEN BY Shreya Shah

Shreya Shah is a Frontend Developer II at CloudThat, specializing in building scalable, user-focused web applications. She has a strong emphasis on creating clean, responsive interfaces with seamless integration to cloud-based solutions. Passionate about delivering smooth user experiences, Shreya continuously explores innovative ways to enhance efficiency, quality, and overall product performance.