![Add Generative AI to a JavaScript Web App](/_next/image?url=https%3A%2F%2Fassets.community.aws%2Fa%2F2ceTmXXFRhVUUqN78njOg2HsE64%2FPort.webp&w=3840&q=75)
Add Generative AI to a JavaScript Web App
Learn how to integrate genAI with minimal code changes using JS, Cognito credentials to invoke the Amazon Bedrock API in a React single page app.
How Does This Application Work?
An instance of a Large Language Model
First: Chat With Amazon Bedrock
Second: Knowledge Bases for Amazon Bedrock
Let's Deploy React Generative AI Application With Amazon Bedrock and AWS Javascript SDK
Step 1 - Enable AWS Amplify Hosting:
Step 2 - Access to the App URL:
Let's Try React Generative AI Application With Amazon Bedrock Javascript SDK
šØšØšØšØšØ This blog is outdated, check the new version Add Generative AI to a JavaScript Web App 2.0 šØšØšØšØšØšØ
![Authentication Authentication](https://assets.community.aws/a/2cdbKCbYGP6jhUBL1fe5NjFHz0g/auth-jpg.webp)
- Chat with Amazon Bedrock
- Knowledge Bases for Amazon Bedrock
Ā
![Demos Menu Demos menu](https://assets.community.aws/a/2cdc3cMlEAIcmSmCjLqeQk1w5o6/demos_menu-jpg.webp)
![Chat Q&A Chat Q&A](https://assets.community.aws/a/2cdcy1xpIInW6kfqv86bTVSsMJy/chat_with_amazon_bedrock-jpg.webp)
![Chat Q&A Chat Q&A](https://assets.community.aws/a/2cdcnFg3O9RaRC0l6FsSCPquKXg/chat_q_a-jpg.webp)
![Chat with Memory Chat with Memory](https://assets.community.aws/a/2cdd4facscABEceMqZShfk2VG1r/chat_with_memory-jpg.webp)
chat_history
key in the memory to get past dialogs, hence you use that key as memoryKey in BufferMemory.![Knowledge Bases for Amazon Bedrock Knowledge Bases for Amazon Bedrock](https://assets.community.aws/a/2cddGn1Xekhol4lekLusbgM3ZbC/knowledge_bases-jpg.webp)
![Amazon Bedrock Retrieve => LLM Amazon Bedrock Retrieve => LLM](https://assets.community.aws/a/2cddNbYSTORYQtFgh30eN059FBl/bedrock_retrieve_LLM-jpg.webp)
![Amazon Bedrock Retrieve & Generate Amazon Bedrock Retrieve & Generate](https://assets.community.aws/a/2cddiTw4UNefE81x5XWQoyhECYr/retrieve_and_generate-jpg.webp)
- first fork this repo:
- Create a New branch:
dev-branch
. - Then follow the steps in Getting started with existing code guide.
- In Step 1 Add repository branch, select main branch and Connecting a monorepo? Pick a folder and enter
reactjs-gen-ai-apps
as a root directory.Add repository branch - For the next Step, Build settings, select
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app)
as App name, in Enviroment select Create a new envitoment and writedev.
![App build and test settings App build and test settings](https://assets.community.aws/a/2cde8qGNpmapBi87nftPMchdQNS/build_settings-jpg.webp)
- If there is no existing role, create a new one to service Amplify.
- Deploy your app.
![Amplify Deploy Amplify Deploy](https://assets.community.aws/a/2cdeHSfiKXRByvSPjPZXmYbyEPM/amplify_done-jpg.webp)
![Sing In Window Sing In Window](https://assets.community.aws/a/2cdeLe0NQR1Rgke5Xk8pMoHzdTB/sing_in-jpg.webp)
![Backend environments Backend environments](https://assets.community.aws/a/2cdeQsjNgT2fTFdDIIovhdARVso/backend_env-jpg.webp)
![View in Cognito View in Cognito](https://assets.community.aws/a/2cdefQMpji4U3FWPDS9sNoGwqqQ/view_in_cognito-jpg.webp)
hideSignUp: false
in App.jsx, but this can introduce a security flaw by giving anyone access to it.Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.