Real-Time Customer Support Chatbot with React and AWS WebSocket API

Overview

Real-time chat is essential for modern customer support. In this tutorial, we will build a live chatbot using React on the frontend and AWS WebSocket API, AWS Lambda, and Amazon DynamoDB on the backend. This solution allows instant messaging and smart auto-responses, escalating to human agents without managing servers when needed. It’s fully serverless, scalable, and production-ready.
We will build a real-time customer support chatbot with React as the frontend and AWS WebSocket API + AWS Lambda + Amazon DynamoDB as the backend.

Instead of a simple echo bot, our chatbot will:

Respond to user questions using a simple AI engine.
Escalate to a human support agent if the bot doesn’t understand.
Show “agent typing” indicators (bonus feature).

chatbot

Customized Cloud Solutions to Drive your Business Success

Cloud Migration
Devops
AIML & IoT

Know More

Amazon DynamoDB Table Design

Table Name: LiveChatSessions
Partition Key: connectionId (String)
Sort Key (optional): timestamp (for message ordering)

{
  "connectionId": "abc123",
  "userType": "customer",
  "chat": [
    { "sender": "customer", "text": "I need help with my order." },
    { "sender": "bot", "text": "Can you please share your order ID?" }
  ]
}

{

"connectionId": "abc123",

"userType": "customer",

"chat": [

{ "sender": "customer", "text": "I need help with my order." },

{ "sender": "bot", "text": "Can you please share your order ID?" }

]

}

AWS Lambda Functions

A. $connect Handler

Registers new users in Amazon DynamoDB.

exports.handler = async (event) => {
  const connectionId = event.requestContext.connectionId;
  const userType = event.queryStringParameters?.type || 'customer';
  await dynamo.put({
    TableName: 'LiveChatSessions',
    Item: {
      connectionId,
      userType,
      chat: [],
      timestamp: Date.now()
    }
  }).promise();
 
  return { statusCode: 200 };
};

exports.handler = async (event) => {

const connectionId = event.requestContext.connectionId;

const userType = event.queryStringParameters?.type || 'customer';

await dynamo.put({

TableName: 'LiveChatSessions',

Item: {

connectionId,

userType,

chat: [],

timestamp: Date.now()

}

}).promise();

return { statusCode: 200 };

};

B. $disconnect Handler

Removes disconnected users from Amazon DynamoDB.

exports.handler = async (event) => {
  const connectionId = event.requestContext.connectionId;
  await dynamo.delete({
    TableName: 'LiveChatSessions',
    Key: { connectionId }
  }).promise();
 
  return { statusCode: 200 };
};

exports.handler = async (event) => {

const connectionId = event.requestContext.connectionId;

await dynamo.delete({

TableName: 'LiveChatSessions',

Key: { connectionId }

}).promise();

return { statusCode: 200 };

};

C. sendMessage Handler

Handles incoming messages, responds via bot, and escalates if needed.

exports.handler = async (event) => {
  const { connectionId } = event.requestContext;
  const body = JSON.parse(event.body);
  const message = body.message;
 
  const botResponse = getBotResponse(message);
  await sendMessageToClient(connectionId, botResponse);
 
  await dynamo.update({
    TableName: 'LiveChatSessions',
    Key: { connectionId },
    UpdateExpression: 'SET chat = list_append(chat, :msg)',
    ExpressionAttributeValues: {
      ':msg': [{ sender: 'customer', text: message }, { sender: 'bot', text: botResponse }]
    }
  }).promise();
 
  return { statusCode: 200 };
};
 
function getBotResponse(message) {
  const orderRegex = /order/i;
  if (orderRegex.test(message)) {
    return 'Can you please provide your order ID?';
  } else {
    return 'Let me connect you to a human agent.';
  }
}

exports.handler = async (event) => {

const { connectionId } = event.requestContext;

const body = JSON.parse(event.body);

const message = body.message;

const botResponse = getBotResponse(message);

await sendMessageToClient(connectionId, botResponse);

await dynamo.update({

TableName: 'LiveChatSessions',

Key: { connectionId },

UpdateExpression: 'SET chat = list_append(chat, :msg)',

ExpressionAttributeValues: {

':msg': [{ sender: 'customer', text: message }, { sender: 'bot', text: botResponse }]

}

}).promise();

return { statusCode: 200 };

};

function getBotResponse(message) {

const orderRegex = /order/i;

if (orderRegex.test(message)) {

return 'Can you please provide your order ID?';

} else {

return 'Let me connect you to a human agent.';

}

React Frontend (Client)

Install a WebSocket client:

npm install reconnecting-websocket
import React, { useState, useEffect, useRef } from 'react';
import ReconnectingWebSocket from 'reconnecting-websocket';
 
const ChatBot = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const ws = useRef(null);
 
  useEffect(() => {
    ws.current = new ReconnectingWebSocket('wss://your-api-id.execute-api.region.amazonaws.com/production?type=customer');
 
    ws.current.onmessage = (event) => {
      const { data } = event;
      setMessages(prev => [...prev, { sender: 'bot', text: data }]);
    };
 
    return () => ws.current.close();
  }, []);
 
  const sendMessage = () => {
    ws.current.send(JSON.stringify({ message: input }));
    setMessages(prev => [...prev, { sender: 'you', text: input }]);
    setInput('');
  };
 
  return (
    <div>
      <h3>Live Support Chat</h3>
      <div style={{ border: '1px solid #ccc', padding: 10, height: 200, overflowY: 'scroll' }}>
        {messages.map((msg, idx) => (
          <p key={idx}><strong>{msg.sender}:</strong> {msg.text}</p>
        ))}
      </div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};
 
export default ChatBot;

npm install reconnecting-websocket

import React, { useState, useEffect, useRef } from 'react';

import ReconnectingWebSocket from 'reconnecting-websocket';

const ChatBot = () => {

const [messages, setMessages] = useState([]);

const [input, setInput] = useState('');

const ws = useRef(null);

useEffect(() => {

ws.current = new ReconnectingWebSocket('wss://your-api-id.execute-api.region.amazonaws.com/production?type=customer');

ws.current.onmessage = (event) => {

const { data } = event;

setMessages(prev => [...prev, { sender: 'bot', text: data }]);

};

return () => ws.current.close();

}, []);

const sendMessage = () => {

ws.current.send(JSON.stringify({ message: input }));

setMessages(prev => [...prev, { sender: 'you', text: input }]);

setInput('');

};

return (

<div>

<h3>Live Support Chat</h3>

{messages.map((msg, idx) => (

<p key={idx}><strong>{msg.sender}:</strong> {msg.text}</p>

))}

</div>

<input value={input} onChange={e => setInput(e.target.value)} />

</div>

);

};

export default ChatBot;

Security Considerations

Authentication: Add Amazon Cognito or signed query strings to restrict access.

Rate Limiting: Use AWS WAF or Amazon API Gateway throttling.

Escalation Logic: Set up a secondary WebSocket or Amazon SNS topic for real agents.

Conclusion

With React on the frontend and AWS WebSockets, AWS Lambda, and Amazon DynamoDB on the backend, you have built a powerful, real-time customer support chatbot, without managing any servers. This serverless setup enables instant messaging, smart automation, and smooth escalation to human agents, all while scaling effortlessly.

Compared to REST APIs, WebSockets offer true two-way communication, making your support experience faster and more engaging. Combined with Amazon DynamoDB for persistent chat history, this architecture is both lightweight and production-ready.

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

Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.

Cloud Training
Customized Training
Experiential Learning

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.