API gateway best method to integrate AWS application with own website?

Question

Hi All,

I am creating my own generative AI chatbot using AWS Bedrock, Lambda, OpenSearch Serverless, CloudFormation, and S3. Here is the link to the GitHub repo for the chatbot: https://github.com/aws-samples/amazon-bedrock-samples/tree/main/rag-solutions/contextual-chatbot-using-knowledgebase

The GitHub repo allows you to build and test your chatbot in a locally hosted domain via Streamlit.

I want to host the chatbot on my website. I am building the chatbot, and then I'll need to instruct the Dev team on how to integrate it with the website. I have done some research, and it seems to me that the best way to integrate the chatbot with my website is to create an API key using AWS API Gateway, and then the Dev team can simply use the API key. Will generating the API key from my lambda function allow for the the full chatbot application to be integrated to my website?

I just wanted to check whether there is a different, better method anyone would recommend, or whether the API key is the best route to go? (I am new to all of this stuff).

If the above method is the best way to go about it, then my follow up question would be how do I change the Streamlit User Interface such that the chatbot appears as a small icon on the bottom right-hand side of my website that expands when clicked on? It would be nice if the chatbot could expand to about half the size of the website screen, rather than cover the full screen like the current Streamlit UI does (images shown when you scroll all the way down to the bottom of the GitHub repo).

Lastly, I've calculated approximate costs for AWS API Gateway for a REST API (non-private). I am presuming that the "requests" parameter means that one request = one interaction between the user and the chatbot (ie one input question by the user = one request and one output response by the chatbot = one request, so 2 requests in total)? Does the "requests" parameter in the AWS Pricing calculator include the output requests, as there is no separate field for this? https://calculator.aws/#/createCalculator/APIGateway

Thank you so much.

kranthi putti · Accepted Answer

Hey!

Using API Gateway is a solid choice for integrating your chatbot with your website. It offers scalability, security, and cost-efficiency, especially with a serverless approach using Lambda. For customizing the Streamlit UI to have a chat icon, you can use CSS and JavaScript to achieve the desired look.

And yes, each interaction (question + response) counts as two requests in API Gateway pricing.

- For more details, you can check out API Gateway Pricing https://aws.amazon.com/api-gateway/pricing/

Good luck with your project!

Didier_Durand · Answer

Hi,

As AWS employee, I would perceived as biased if I said that API GTW is the "best" way. ;-)
But, I truly believe that it is a very good one.

It brings you lots of advantages "out-of -box" as a managed service:
* Scalability
* High-Availability
* Security (you protect our API via IAM/Cognito) by default
* etc.

If you follow a serverless approach (Lambdas only), it will also deliver cost-efficiency: your bot won't cost while it is not used.

Finally, with a price of $1 per million requests, it will be much cheaper that having you own EC2 instances (several for HA....) to pay for on a 24x7 basis.

So, beyond API GTW, I am also a big fan of serverless end to end to minize costs on my projects until they get to a very high traffic where server-based approaches may make more sense from a cost perspective.

Best,

Didier

tyler_applebaum · Answer

You should evaluate authentication methods other than an API key. Take a look at this:
https://aws.amazon.com/what-is/api-key/

Oher authentication and authorization methods are described here: https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-control-access-to-api.html

Thanniru Anil Kumar · Answer

**Integrating Your Chatbot with Your Website**

**API Gateway as the Integration Method**

Using AWS API Gateway to integrate your chatbot with your website is a solid and common approach, especially when dealing with serverless

**architectures like the one you've built using AWS Lambda and other services. Here’s why:**

API Gateway serves as a fully managed service that allows you to create and publish APIs that act as "front doors" for your application. It can securely expose your Lambda functions to the internet and handle tasks like authorization, request validation, and throttling.

API Key Management: By generating an API key, you can control and monitor access to your API. The API key will allow your website to interact with your chatbot, ensuring that only authorized requests are processed.

**Scalability:**  API Gateway is highly scalable and can handle millions of requests per second, which makes it a great fit for your chatbot’s potentially high-traffic environment.

**Security**:  API Gateway integrates with AWS IAM, allowing you to enforce fine-grained permissions and use other AWS security services like AWS WAF (Web Application Firewall) to protect your API.

**Cost: **  API Gateway charges are based on the number of API calls and the amount of data transferred out. Using the API key as part of your monetization strategy could be a great way to keep track of usage.

**Implementation Steps**

**Create an API Gateway:**  Set up a new REST API in API Gateway that routes requests to your Lambda function.

**Generate an API Key:** In the API Gateway console, create an API key and associate it with your API. Provide this key to your development team for integration with the website.

**Deploy the API:**  Once configured, deploy the API to a stage (like prod) and provide the endpoint URL to your development team.

**Integrating the Chatbot UI on Your Website

**Regarding the user interface, since Streamlit is primarily for rapid prototyping and local deployments, you would need to move away from it if you want a more polished, website-friendly UI.

**Here’s how to integrate the chatbot UI:**

**Custom Frontend Development:**

**Chat Widget:** Develop a custom chat widget that sits at the bottom right corner of your website. This widget can be a small icon that, when clicked, expands into a chat window.

**WebSocket Integration**: You can use WebSockets (supported by API Gateway) for real-time communication between the chatbot and the user. This would allow for more responsive interactions.

**Lambda and API Gateway:** The chat widget will make requests to your Lambda function via API Gateway, sending and receiving messages.
UI Frameworks: Consider using front-end frameworks like React or Vue.js to build the chat widget. These frameworks can help manage the state of the chat application and provide smooth transitions.

**Styling**: You can style the widget using CSS to control its appearance, including the size of the chat window when expanded.

**Cost Calculation for AWS API Gateway**

**Regarding the AWS API Gateway pricing:**

**Requests: **Yes, each interaction with the chatbot (user input + chatbot response) is considered a separate request. If a user asks a question and the chatbot responds, that will count as two requests.

**Cost Implication:** The "requests" parameter in the AWS Pricing Calculator includes all API calls (both input and output). Therefore, you should account for both the user’s question and the chatbot’s response when estimating costs.

API gateway best method to integrate AWS application with own website?

Relevant content