├── reactjs-gen-ai-apps ├── .eslintignore ├── amplify │ ├── .config │ │ ├── local-aws-info.json │ │ ├── local-env-info.json │ │ └── project-config.json │ ├── backend │ │ ├── api │ │ │ └── buildingreactjsgenai │ │ │ │ ├── transform.conf.json │ │ │ │ ├── schema.graphql │ │ │ │ ├── cli-inputs.json │ │ │ │ ├── resolvers │ │ │ │ └── README.md │ │ │ │ ├── parameters.json │ │ │ │ └── stacks │ │ │ │ └── CustomResources.json │ │ ├── tags.json │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── types │ │ │ └── amplify-dependent-resources-ref.d.ts │ │ ├── awscloudformation │ │ │ └── override.ts │ │ ├── hosting │ │ │ └── amplifyhosting │ │ │ │ └── amplifyhosting-template.json │ │ ├── auth │ │ │ └── llmchatbotjs6f7265086f726508 │ │ │ │ └── cli-inputs.json │ │ └── backend-config.json │ └── cli.json ├── vite.config.js ├── .graphqlconfig.yml ├── src │ ├── helpers.js │ ├── ui-components │ │ ├── studioTheme.js.d.ts │ │ ├── studioTheme.js │ │ ├── index.js │ │ ├── PromptCreateForm.d.ts │ │ ├── PromptUpdateForm.d.ts │ │ ├── PromptCreateForm.jsx │ │ ├── PromptUpdateForm.jsx │ │ └── utils.js │ ├── main.jsx │ ├── App.css │ ├── graphql │ │ ├── queries.js │ │ ├── mutations.js │ │ └── subscriptions.js │ ├── BasicNewForm.jsx │ ├── PromptNew.jsx │ ├── BedrockKBLoader.jsx │ ├── index.css │ ├── FMPicker.jsx │ ├── Prompt.jsx │ ├── App.jsx │ ├── FlashBar.jsx │ ├── BasicTable.jsx │ ├── BasicCollection.jsx │ ├── PromptPicker.jsx │ ├── Prompts.jsx │ ├── messageHelpers.js │ ├── BedrockAgentLoader.jsx │ ├── fetchHelper.js │ ├── BedrockAgent.jsx │ ├── Layout.jsx │ ├── LLM.jsx │ ├── __old │ │ ├── LLM.jsx │ │ └── Chat.jsx │ ├── Chat.jsx │ ├── FileLoader.jsx │ ├── Menu.jsx │ ├── questionGenerator.js │ ├── BedrockKBAndGenerate.jsx │ ├── assets │ │ └── react.svg │ ├── MessageList.jsx │ ├── BedrockKBRetrieve.jsx │ ├── MultiModalLLM.jsx │ ├── PromptCreateFormV2.jsx │ └── llmLib.js ├── index.html ├── README.md ├── .gitignore ├── public │ └── vite.svg └── package.json ├── image.png ├── image-1.png ├── imagenes ├── Q_A.jpg ├── auth.jpg ├── diagram.jpg ├── sing_in.jpg ├── amplify_1.jpg ├── back_end.jpg ├── chat_q_a.jpg ├── demo-LLM.gif ├── demo-q-a.gif ├── demos_menu.jpg ├── new_branch.jpg ├── amplify_done.jpg ├── backend_env.jpg ├── create_user.jpg ├── demo-memory.gif ├── demo-models.jpg ├── demo-prompt.jpg ├── back_end_done.jpg ├── build_settings.jpg ├── knowledge_bases.jpg ├── prompt_diagram.jpg ├── view_in_cognito.jpg ├── chat_with_memory.jpg ├── demo-bedrock-ret.gif ├── prompt_javascript.gif ├── prompt_javascript.jpg ├── repository_branch.jpg ├── bedrock_retrieve_LLM.jpg ├── chat_multimodal_text.gif ├── chat_multimodal_image.gif ├── retrieve_and_generate.jpg ├── chat_with_amazon_bedrock.jpg ├── demo-agent-create-ticket.gif └── demo-agent-query-ticket.gif ├── CODE_OF_CONDUCT.md ├── .gitignore ├── LICENSE ├── CONTRIBUTING.md └── README.md /reactjs-gen-ai-apps/.eslintignore: -------------------------------------------------------------------------------- 1 | amplify-codegen-temp/models/models -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/.config/local-aws-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "staging": { 3 | "configLevel": "amplifyAdmin" 4 | } 5 | } -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/image.png -------------------------------------------------------------------------------- /image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/image-1.png -------------------------------------------------------------------------------- /imagenes/Q_A.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/Q_A.jpg -------------------------------------------------------------------------------- /imagenes/auth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/auth.jpg -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/transform.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "Version": 5, 3 | "ElasticsearchWarning": true 4 | } -------------------------------------------------------------------------------- /imagenes/diagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/diagram.jpg -------------------------------------------------------------------------------- /imagenes/sing_in.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/sing_in.jpg -------------------------------------------------------------------------------- /imagenes/amplify_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/amplify_1.jpg -------------------------------------------------------------------------------- /imagenes/back_end.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/back_end.jpg -------------------------------------------------------------------------------- /imagenes/chat_q_a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/chat_q_a.jpg -------------------------------------------------------------------------------- /imagenes/demo-LLM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-LLM.gif -------------------------------------------------------------------------------- /imagenes/demo-q-a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-q-a.gif -------------------------------------------------------------------------------- /imagenes/demos_menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demos_menu.jpg -------------------------------------------------------------------------------- /imagenes/new_branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/new_branch.jpg -------------------------------------------------------------------------------- /imagenes/amplify_done.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/amplify_done.jpg -------------------------------------------------------------------------------- /imagenes/backend_env.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/backend_env.jpg -------------------------------------------------------------------------------- /imagenes/create_user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/create_user.jpg -------------------------------------------------------------------------------- /imagenes/demo-memory.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-memory.gif -------------------------------------------------------------------------------- /imagenes/demo-models.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-models.jpg -------------------------------------------------------------------------------- /imagenes/demo-prompt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-prompt.jpg -------------------------------------------------------------------------------- /imagenes/back_end_done.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/back_end_done.jpg -------------------------------------------------------------------------------- /imagenes/build_settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/build_settings.jpg -------------------------------------------------------------------------------- /imagenes/knowledge_bases.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/knowledge_bases.jpg -------------------------------------------------------------------------------- /imagenes/prompt_diagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/prompt_diagram.jpg -------------------------------------------------------------------------------- /imagenes/view_in_cognito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/view_in_cognito.jpg -------------------------------------------------------------------------------- /imagenes/chat_with_memory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/chat_with_memory.jpg -------------------------------------------------------------------------------- /imagenes/demo-bedrock-ret.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-bedrock-ret.gif -------------------------------------------------------------------------------- /imagenes/prompt_javascript.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/prompt_javascript.gif -------------------------------------------------------------------------------- /imagenes/prompt_javascript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/prompt_javascript.jpg -------------------------------------------------------------------------------- /imagenes/repository_branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/repository_branch.jpg -------------------------------------------------------------------------------- /imagenes/bedrock_retrieve_LLM.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/bedrock_retrieve_LLM.jpg -------------------------------------------------------------------------------- /imagenes/chat_multimodal_text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/chat_multimodal_text.gif -------------------------------------------------------------------------------- /imagenes/chat_multimodal_image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/chat_multimodal_image.gif -------------------------------------------------------------------------------- /imagenes/retrieve_and_generate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/retrieve_and_generate.jpg -------------------------------------------------------------------------------- /imagenes/chat_with_amazon_bedrock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/chat_with_amazon_bedrock.jpg -------------------------------------------------------------------------------- /imagenes/demo-agent-create-ticket.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-agent-create-ticket.gif -------------------------------------------------------------------------------- /imagenes/demo-agent-query-ticket.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/HEAD/imagenes/demo-agent-query-ticket.gif -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/schema.graphql: -------------------------------------------------------------------------------- 1 | 2 | type Prompt @model @auth(rules: [{ allow: owner }]) { 3 | id: ID! 4 | name: String! 5 | prompt: String 6 | } 7 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/tags.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Key": "user:Stack", 4 | "Value": "{project-env}" 5 | }, 6 | { 7 | "Key": "user:Application", 8 | "Value": "{project-name}" 9 | } 10 | ] -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/.config/local-env-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectPath": "/Users/ensamblador/Documents/proyectos/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/reactjs-gen-ai-apps", 3 | "envName": "staging", 4 | "defaultEditor": "vscode" 5 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonjs", 5 | "strict": false, 6 | "esModuleInterop": true, 7 | "skipLibCheck": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "outDir": "build" 10 | } 11 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 4 | opensource-codeofconduct@amazon.com with any additional questions or comments. 5 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/cli-inputs.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "serviceConfiguration": { 4 | "apiName": "buildingreactjsgenai", 5 | "serviceName": "AppSync", 6 | "defaultAuthType": { 7 | "mode": "AMAZON_COGNITO_USER_POOLS", 8 | "cognitoUserPoolId": "authllmchatbotjs6f7265086f726508" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/resolvers/README.md: -------------------------------------------------------------------------------- 1 | Any resolvers that you add in this directory will override the ones automatically generated by Amplify CLI and will be directly copied to the cloud. 2 | For more information, visit [https://docs.amplify.aws/cli/graphql-transformer/resolvers](https://docs.amplify.aws/cli/graphql-transformer/resolvers) -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/parameters.json: -------------------------------------------------------------------------------- 1 | { 2 | "AppSyncApiName": "buildingreactjsgenai", 3 | "DynamoDBBillingMode": "PAY_PER_REQUEST", 4 | "DynamoDBEnableServerSideEncryption": false, 5 | "AuthCognitoUserPoolId": { 6 | "Fn::GetAtt": [ 7 | "authllmchatbotjs6f7265086f726508", 8 | "Outputs.UserPoolId" 9 | ] 10 | } 11 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/.graphqlconfig.yml: -------------------------------------------------------------------------------- 1 | projects: 2 | buildingreactjsgenai: 3 | schemaPath: src/graphql/schema.json 4 | includes: 5 | - src/graphql/**/*.js 6 | excludes: 7 | - ./amplify/** 8 | extensions: 9 | amplify: 10 | codeGenTarget: javascript 11 | generatedFileName: '' 12 | docsFilePath: src/graphql 13 | extensions: 14 | amplify: 15 | version: 3 16 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/helpers.js: -------------------------------------------------------------------------------- 1 | const formatDates = (aDate) => { 2 | const newDate = new Date(aDate).toLocaleString() 3 | return newDate.slice(0, 17) 4 | } 5 | 6 | const formatBool = (val) => { 7 | return val ? "Y" : "N" 8 | } 9 | 10 | const getOportunities = (val) => { 11 | return val.oportunities?.items ? val.oportunities.items.length : 0 12 | } 13 | 14 | export { formatDates, formatBool, getOportunities} -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bedrock Js demo 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "overrides-dependencies", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "tsc", 7 | "watch": "tsc -w", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "dependencies": { 11 | "@aws-amplify/cli-extensibility-helper": "^3.0.0" 12 | }, 13 | "devDependencies": { 14 | "typescript": "^4.9.5" 15 | } 16 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/.config/project-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "providers": [ 3 | "awscloudformation" 4 | ], 5 | "projectName": "buildingreactjsgenai", 6 | "version": "3.1", 7 | "frontend": "javascript", 8 | "javascript": { 9 | "framework": "react", 10 | "config": { 11 | "SourceDir": "src", 12 | "DistributionDir": "dist", 13 | "BuildCommand": "npm run-script build", 14 | "StartCommand": "npm run-script start" 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/ui-components/studioTheme.js.d.ts: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | * The contents of this file were generated with Amplify Studio. * 3 | * Please refrain from making any modifications to this file. * 4 | * Any changes to this file will be overwritten when running amplify pull. * 5 | **************************************************************************/ 6 | 7 | declare const _default: any; 8 | export default _default; 9 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/ui-components/studioTheme.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | * The contents of this file were generated with Amplify Studio. * 3 | * Please refrain from making any modifications to this file. * 4 | * Any changes to this file will be overwritten when running amplify pull. * 5 | **************************************************************************/ 6 | 7 | /* eslint-disable */ 8 | import { createTheme, defaultTheme } from "@aws-amplify/ui-react"; 9 | export default createTheme(defaultTheme); 10 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/types/amplify-dependent-resources-ref.d.ts: -------------------------------------------------------------------------------- 1 | export type AmplifyDependentResourcesAttributes = { 2 | "api": { 3 | "buildingreactjsgenai": { 4 | "GraphQLAPIEndpointOutput": "string", 5 | "GraphQLAPIIdOutput": "string" 6 | } 7 | }, 8 | "auth": { 9 | "llmchatbotjs6f7265086f726508": { 10 | "AppClientID": "string", 11 | "AppClientIDWeb": "string", 12 | "IdentityPoolId": "string", 13 | "IdentityPoolName": "string", 14 | "UserPoolArn": "string", 15 | "UserPoolId": "string", 16 | "UserPoolName": "string" 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/ui-components/index.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | * The contents of this file were generated with Amplify Studio. * 3 | * Please refrain from making any modifications to this file. * 4 | * Any changes to this file will be overwritten when running amplify pull. * 5 | **************************************************************************/ 6 | 7 | export { default as PromptCreateForm } from "./PromptCreateForm"; 8 | export { default as PromptUpdateForm } from "./PromptUpdateForm"; 9 | export { default as studioTheme } from "./studioTheme"; 10 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { Amplify } from 'aws-amplify' 4 | 5 | import App from './App.jsx' 6 | import './index.css' 7 | import "@cloudscape-design/global-styles/index.css" 8 | import "@aws-amplify/ui-react/styles.css" 9 | import { ThemeProvider,createTheme, defaultTheme } from "@aws-amplify/ui-react"; 10 | 11 | 12 | 13 | import awsconfig from './aws-exports' 14 | Amplify.configure(awsconfig); 15 | 16 | 17 | const studioTheme = createTheme(defaultTheme) 18 | 19 | ReactDOM.createRoot(document.getElementById('root')).render( 20 | 21 | 22 | 23 | ) 24 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | /* max-width: 1280px; */ 3 | margin: 0 auto; 4 | /* padding: 2rem; */ 5 | text-align: left; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/awscloudformation/override.ts: -------------------------------------------------------------------------------- 1 | import { AmplifyProjectInfo, AmplifyRootStackTemplate } from '@aws-amplify/cli-extensibility-helper'; 2 | 3 | export function override(resources: AmplifyRootStackTemplate, amplifyProjectInfo: AmplifyProjectInfo) { 4 | const authRole = resources.authRole; 5 | const basePolicies = Array.isArray(authRole.policies) ? authRole.policies : [authRole.policies]; 6 | authRole.policies = [ ...basePolicies, 7 | { policyName: "amplify-permissions-custom-resources", 8 | policyDocument: { 9 | Version: "2012-10-17", 10 | Statement: [ 11 | { 12 | Resource: "*", 13 | Action: ["bedrock:Invoke*", "bedrock:List*", "bedrock:Retrieve*"], 14 | Effect: "Allow", 15 | } 16 | ] 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/graphql/queries.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // this is an auto generated file. This will be overwritten 3 | 4 | export const getPrompt = /* GraphQL */ ` 5 | query GetPrompt($id: ID!) { 6 | getPrompt(id: $id) { 7 | id 8 | name 9 | prompt 10 | createdAt 11 | updatedAt 12 | owner 13 | __typename 14 | } 15 | } 16 | `; 17 | export const listPrompts = /* GraphQL */ ` 18 | query ListPrompts( 19 | $filter: ModelPromptFilterInput 20 | $limit: Int 21 | $nextToken: String 22 | ) { 23 | listPrompts(filter: $filter, limit: $limit, nextToken: $nextToken) { 24 | items { 25 | id 26 | name 27 | prompt 28 | createdAt 29 | updatedAt 30 | owner 31 | __typename 32 | } 33 | nextToken 34 | __typename 35 | } 36 | } 37 | `; 38 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/BasicNewForm.jsx: -------------------------------------------------------------------------------- 1 | 2 | import {Container, Header, Box, } from "@cloudscape-design/components" 3 | import { useRef, forwardRef, useImperativeHandle } from 'react' 4 | import FlashBar from './FlashBar' 5 | 6 | export default forwardRef(({ headerText, children }, ref) => { 7 | 8 | const childRef = useRef(null); 9 | 10 | useImperativeHandle(ref, () => ({ 11 | showMessage(e, messageType, messageTitle, messageText) { 12 | childRef.current.showMessage(e, messageType, messageTitle, messageText) 13 | } 14 | })) 15 | return ( 16 | 17 | 20 | {headerText}}> 21 | 22 | {children} 23 | 24 | 25 | ) 26 | }) -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/PromptNew.jsx: -------------------------------------------------------------------------------- 1 | 2 | import BasicNewForm from "./BasicNewForm" 3 | import {useRef } from 'react'; 4 | import { useNavigate } from "react-router-dom"; 5 | 6 | import PromptCreateForm from './PromptCreateFormV2'; 7 | 8 | //todo: fix new prompt ID 9 | 10 | export default () => { 11 | let navigate = useNavigate() 12 | 13 | const childRef = useRef(null); 14 | const onSuccess = (e) => { 15 | console.log(e) 16 | childRef.current.showMessage(e, "success", "Success", "Created in Database!") 17 | navigate(`/prompt/${e.id}`) 18 | } 19 | const onError = (e) => childRef.current.showMessage(e, "error", "Error", "Error creating in the Database!") 20 | 21 | return ( 22 | 23 | 27 | 28 | ) 29 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | *.ipynb 27 | .vscode/ 28 | .DS_Store 29 | *.csv 30 | *.drawio 31 | 32 | #amplify-do-not-edit-begin 33 | amplify/\#current-cloud-backend 34 | amplify/.config/local-* 35 | amplify/logs 36 | amplify/mock-data 37 | amplify/mock-api-resources 38 | amplify/backend/amplify-meta.json 39 | amplify/backend/.temp 40 | build/ 41 | dist/ 42 | node_modules/ 43 | aws-exports.js 44 | awsconfiguration.json 45 | amplifyconfiguration.json 46 | amplifyconfiguration.dart 47 | amplify-build-config.json 48 | amplify-gradle-config.json 49 | amplifytools.xcconfig 50 | .secret-* 51 | **.sample 52 | #amplify-do-not-edit-end 53 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/hosting/amplifyhosting/amplifyhosting-template.json: -------------------------------------------------------------------------------- 1 | { 2 | "AWSTemplateFormatVersion": "2010-09-09", 3 | "Description": "{\"createdOn\":\"Linux\",\"createdBy\":\"Amplify\",\"createdWith\":\"12.11.1\",\"stackType\":\"hosting-amplifyhosting\",\"metadata\":{}}", 4 | "Parameters": { 5 | "env": { 6 | "Type": "String" 7 | }, 8 | "appId": { 9 | "Type": "String" 10 | }, 11 | "type": { 12 | "Type": "String" 13 | } 14 | }, 15 | "Conditions": { 16 | "isManual": { 17 | "Fn::Equals": [ 18 | { 19 | "Ref": "type" 20 | }, 21 | "manual" 22 | ] 23 | } 24 | }, 25 | "Resources": { 26 | "AmplifyBranch": { 27 | "Condition": "isManual", 28 | "Type": "AWS::Amplify::Branch", 29 | "Properties": { 30 | "BranchName": { 31 | "Ref": "env" 32 | }, 33 | "AppId": { 34 | "Ref": "appId" 35 | } 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | #amplify-do-not-edit-begin 27 | amplify/\#current-cloud-backend 28 | amplify/.config/local-* 29 | amplify/logs 30 | amplify/mock-data 31 | amplify/mock-api-resources 32 | amplify/backend/amplify-meta.json 33 | amplify/backend/.temp 34 | build/ 35 | dist/ 36 | node_modules/ 37 | aws-exports.js 38 | awsconfiguration.json 39 | amplifyconfiguration.json 40 | amplifyconfiguration.dart 41 | amplify-build-config.json 42 | amplify-gradle-config.json 43 | amplifytools.xcconfig 44 | .secret-* 45 | **.sample 46 | #amplify-do-not-edit-end 47 | *.ipynb 48 | .vscode/ 49 | .DS_Store 50 | *.csv 51 | team-provider-info.json 52 | amplify/team-provider-info.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT No Attribution 2 | 3 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so. 10 | 11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 13 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 14 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 15 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 16 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 17 | 18 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/graphql/mutations.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // this is an auto generated file. This will be overwritten 3 | 4 | export const createPrompt = /* GraphQL */ ` 5 | mutation CreatePrompt( 6 | $input: CreatePromptInput! 7 | $condition: ModelPromptConditionInput 8 | ) { 9 | createPrompt(input: $input, condition: $condition) { 10 | id 11 | name 12 | prompt 13 | createdAt 14 | updatedAt 15 | owner 16 | __typename 17 | } 18 | } 19 | `; 20 | export const updatePrompt = /* GraphQL */ ` 21 | mutation UpdatePrompt( 22 | $input: UpdatePromptInput! 23 | $condition: ModelPromptConditionInput 24 | ) { 25 | updatePrompt(input: $input, condition: $condition) { 26 | id 27 | name 28 | prompt 29 | createdAt 30 | updatedAt 31 | owner 32 | __typename 33 | } 34 | } 35 | `; 36 | export const deletePrompt = /* GraphQL */ ` 37 | mutation DeletePrompt( 38 | $input: DeletePromptInput! 39 | $condition: ModelPromptConditionInput 40 | ) { 41 | deletePrompt(input: $input, condition: $condition) { 42 | id 43 | name 44 | prompt 45 | createdAt 46 | updatedAt 47 | owner 48 | __typename 49 | } 50 | } 51 | `; 52 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/graphql/subscriptions.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // this is an auto generated file. This will be overwritten 3 | 4 | export const onCreatePrompt = /* GraphQL */ ` 5 | subscription OnCreatePrompt( 6 | $filter: ModelSubscriptionPromptFilterInput 7 | $owner: String 8 | ) { 9 | onCreatePrompt(filter: $filter, owner: $owner) { 10 | id 11 | name 12 | prompt 13 | createdAt 14 | updatedAt 15 | owner 16 | __typename 17 | } 18 | } 19 | `; 20 | export const onUpdatePrompt = /* GraphQL */ ` 21 | subscription OnUpdatePrompt( 22 | $filter: ModelSubscriptionPromptFilterInput 23 | $owner: String 24 | ) { 25 | onUpdatePrompt(filter: $filter, owner: $owner) { 26 | id 27 | name 28 | prompt 29 | createdAt 30 | updatedAt 31 | owner 32 | __typename 33 | } 34 | } 35 | `; 36 | export const onDeletePrompt = /* GraphQL */ ` 37 | subscription OnDeletePrompt( 38 | $filter: ModelSubscriptionPromptFilterInput 39 | $owner: String 40 | ) { 41 | onDeletePrompt(filter: $filter, owner: $owner) { 42 | id 43 | name 44 | prompt 45 | createdAt 46 | updatedAt 47 | owner 48 | __typename 49 | } 50 | } 51 | `; 52 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/BedrockKBLoader.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, forwardRef, useImperativeHandle } from "react"; 2 | import { Grid, Select } from "@cloudscape-design/components"; 3 | import { getBedrockKnowledgeBases } from "./llmLib"; 4 | import { formatDates } from "./helpers" 5 | 6 | export default forwardRef(({}, ref) => { 7 | const [knowledgBases, setKnowledgBases] = useState([]) 8 | const [selectedOption, setSelectedOption] = useState({ }); 9 | 10 | useImperativeHandle(ref, () => ({ 11 | getSelectedOption(){ 12 | return selectedOption 13 | } 14 | })) 15 | 16 | 17 | useEffect(() => { 18 | getBedrockKnowledgeBases().then(kbs => { 19 | const kbOptions = kbs.map(kb => ({ label: kb.name, value: kb.knowledgeBaseId, iconName: "settings", description: kb.description, tags: ["Status: "+ kb.status, "Update: " + formatDates(kb.updatedAt) ]})) 20 | setKnowledgBases(kbOptions) 21 | setSelectedOption(kbOptions[0]) 22 | }) 23 | 24 | }, []) 25 | 26 | 27 | 28 | return ( 29 | 30 | 33 | 34 | { 46 | console.log(detail) 47 | setSelectedOption(detail.selectedOption) 48 | }} 49 | options={getOptions()} 50 | triggerVariant="option" /> 51 | 52 | 53 | 54 | 55 | ) 56 | }) 57 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bedrock-javascript", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@aws-amplify/ui-react": "^6.1.3", 14 | "@aws-crypto/sha256-js": "^5.2.0", 15 | "@aws-sdk/client-bedrock": "^3.556.0", 16 | "@aws-sdk/client-bedrock-agent": "^3.513.0", 17 | "@aws-sdk/client-bedrock-agent-runtime": "^3.513.0", 18 | "@aws-sdk/client-bedrock-runtime": "^3.556.0", 19 | "@aws-sdk/credential-provider-node": "^3.509.0", 20 | "@aws-sdk/types": "^3.502.0", 21 | "@cloudscape-design/components": "^3.0.521", 22 | "@cloudscape-design/design-tokens": "^3.0.34", 23 | "@cloudscape-design/global-styles": "^1.0.23", 24 | "@langchain/community": "^0.0.26", 25 | "@langchain/core": "^0.1.27", 26 | "@langchain/openai": "^0.0.14", 27 | "@smithy/eventstream-codec": "^2.1.1", 28 | "@smithy/protocol-http": "^3.1.1", 29 | "@smithy/signature-v4": "^2.1.1", 30 | "@smithy/util-utf8": "^2.1.1", 31 | "aws-amplify": "^6.0.28", 32 | "langchain": "^0.1.17", 33 | "marked": "^12.0.2", 34 | "react": "^18.2.0", 35 | "react-dom": "^18.2.0", 36 | "react-router-dom": "^6.22.0" 37 | }, 38 | "devDependencies": { 39 | "@types/react": "^18.2.55", 40 | "@types/react-dom": "^18.2.19", 41 | "@vitejs/plugin-react": "^4.2.1", 42 | "eslint": "^8.56.0", 43 | "eslint-plugin-react": "^7.33.2", 44 | "eslint-plugin-react-hooks": "^4.6.0", 45 | "eslint-plugin-react-refresh": "^0.4.5", 46 | "vite": "^5.1.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/api/buildingreactjsgenai/stacks/CustomResources.json: -------------------------------------------------------------------------------- 1 | { 2 | "AWSTemplateFormatVersion": "2010-09-09", 3 | "Description": "An auto-generated nested stack.", 4 | "Metadata": {}, 5 | "Parameters": { 6 | "AppSyncApiId": { 7 | "Type": "String", 8 | "Description": "The id of the AppSync API associated with this project." 9 | }, 10 | "AppSyncApiName": { 11 | "Type": "String", 12 | "Description": "The name of the AppSync API", 13 | "Default": "AppSyncSimpleTransform" 14 | }, 15 | "env": { 16 | "Type": "String", 17 | "Description": "The environment name. e.g. Dev, Test, or Production", 18 | "Default": "NONE" 19 | }, 20 | "S3DeploymentBucket": { 21 | "Type": "String", 22 | "Description": "The S3 bucket containing all deployment assets for the project." 23 | }, 24 | "S3DeploymentRootKey": { 25 | "Type": "String", 26 | "Description": "An S3 key relative to the S3DeploymentBucket that points to the root\nof the deployment directory." 27 | } 28 | }, 29 | "Resources": { 30 | "EmptyResource": { 31 | "Type": "Custom::EmptyResource", 32 | "Condition": "AlwaysFalse" 33 | } 34 | }, 35 | "Conditions": { 36 | "HasEnvironmentParameter": { 37 | "Fn::Not": [ 38 | { 39 | "Fn::Equals": [ 40 | { 41 | "Ref": "env" 42 | }, 43 | "NONE" 44 | ] 45 | } 46 | ] 47 | }, 48 | "AlwaysFalse": { 49 | "Fn::Equals": ["true", "false"] 50 | } 51 | }, 52 | "Outputs": { 53 | "EmptyOutput": { 54 | "Description": "An empty output. You may delete this if you have at least one resource above.", 55 | "Value": "" 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/Prompts.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState, useEffect } from 'react' 3 | 4 | import { formatDates } from './helpers' 5 | import BasicCollection from './BasicCollection' 6 | 7 | import { fetchByValue } from './fetchHelper' 8 | 9 | 10 | export default () => { 11 | const [itemList, setList] = useState([]); 12 | const [isLoading, setIsLoading] = useState(false) 13 | 14 | const columnDefinitions = [ 15 | { id: "id", header: "id", cell: e => e.id, isRowHeader: false }, 16 | { id: "name", header: "Name", cell: e => e.name, sortingField: "name", isRowHeader: true }, 17 | { id: "prompt", header: "Prompt", cell: e => e.prompt, sortingField: "prompt", isRowHeader: true }, 18 | { id: "createdAt", header: "Creation", cell: e => formatDates(e.createdAt), sortingField: "createdAt", isRowHeader: true }, 19 | { id: "updatedAt", header: "Update", cell: e => formatDates(e.updatedAt), sortingField: "updatedAt", isRowHeader: true } 20 | ] 21 | 22 | const columnDisplay = [ 23 | { id: "name", visible: true }, 24 | { id: "prompt", visible: true }, 25 | { id: "createdAt", visible: false }, 26 | { id: "updatedAt", visible: true } 27 | ] 28 | 29 | 30 | 31 | const getList = async () => { 32 | setIsLoading(true) 33 | setList(await fetchByValue("listPrompts")) 34 | setIsLoading(false) 35 | } 36 | 37 | useEffect(() => { 38 | getList() 39 | }, []) 40 | 41 | return ( 42 | 43 | 50 | 51 | ) 52 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/amplify/backend/auth/llmchatbotjs6f7265086f726508/cli-inputs.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1", 3 | "cognitoConfig": { 4 | "identityPoolName": "llmchatbotjs6f726508_identitypool_6f726508", 5 | "allowUnauthenticatedIdentities": false, 6 | "resourceNameTruncated": "llmcha6f726508", 7 | "userPoolName": "llmchatbotjs6f726508_userpool_6f726508", 8 | "autoVerifiedAttributes": [ 9 | "email" 10 | ], 11 | "mfaConfiguration": "OFF", 12 | "mfaTypes": [ 13 | "SMS Text Message" 14 | ], 15 | "smsAuthenticationMessage": "Your authentication code is {####}", 16 | "smsVerificationMessage": "Your verification code is {####}", 17 | "emailVerificationSubject": "Your verification code", 18 | "emailVerificationMessage": "Your verification code is {####}", 19 | "defaultPasswordPolicy": true, 20 | "passwordPolicyMinLength": 8, 21 | "passwordPolicyCharacters": [ 22 | "Requires Lowercase", 23 | "Requires Uppercase", 24 | "Requires Numbers", 25 | "Requires Symbols" 26 | ], 27 | "requiredAttributes": [ 28 | "email" 29 | ], 30 | "aliasAttributes": [], 31 | "userpoolClientGenerateSecret": false, 32 | "userpoolClientRefreshTokenValidity": "365", 33 | "userpoolClientWriteAttributes": [ 34 | "email" 35 | ], 36 | "userpoolClientReadAttributes": [ 37 | "email" 38 | ], 39 | "userpoolClientLambdaRole": "llmcha6f726508_userpoolclient_lambda_role", 40 | "userpoolClientSetAttributes": false, 41 | "sharedId": "6f726508", 42 | "resourceName": "llmchatbotjs6f7265086f726508", 43 | "authSelections": "identityPoolAndUserPool", 44 | "useDefault": "manual", 45 | "thirdPartyAuth": false, 46 | "usernameAttributes": [ 47 | "email" 48 | ], 49 | "userPoolGroups": false, 50 | "adminQueries": false, 51 | "triggers": {}, 52 | "hostedUI": false, 53 | "userPoolGroupList": [], 54 | "serviceName": "Cognito", 55 | "usernameCaseSensitive": false, 56 | "useEnabledMfas": true 57 | } 58 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/messageHelpers.js: -------------------------------------------------------------------------------- 1 | export const getMessageList = (messages) => { 2 | const formatted = messages.map(msg => ({ role: msg.sender, content: [{ type: "text", text: msg.text }] })) 3 | return formatted 4 | } 5 | 6 | 7 | 8 | export const handleStreamingTokenResponse = ({ type, content_block, delta }, llmUpdate, llmEnd, setLoading ) => { 9 | let text = "" 10 | if (type === "content_block_start") text = content_block.text 11 | if (type === "content_block_delta") text = delta.text 12 | llmUpdate(msg => msg + text)//.replace(/\n/g, "
")) 13 | 14 | if (type === "content_block_stop") { 15 | llmUpdate(msg => { 16 | llmEnd(prev => [...prev,{ role: "assistant", content: [{ type: "text", text: msg }] }]) 17 | return "" 18 | }) 19 | setLoading(false) 20 | } 21 | } 22 | 23 | 24 | const readAsDataURL = (file) => { 25 | return new Promise((resolve, reject) => { 26 | let fileReader = new FileReader(); 27 | fileReader.onload = function () { 28 | return resolve({ data: fileReader.result, name: file.name, size: file.size, type: file.type }); 29 | } 30 | fileReader.readAsDataURL(file); 31 | }) 32 | } 33 | 34 | const loadImages = async (files) => { 35 | let images = await Promise.all(files.map(f => { return readAsDataURL(f) })); 36 | console.log(images) 37 | return images 38 | 39 | } 40 | // todo: add support for png 41 | export const buildContent = async (text, files=[]) => { 42 | let content = [{ type: "text", text: text }] 43 | if (files.length) { 44 | const b64images = await loadImages(files) 45 | 46 | const imgContent = b64images.map(b64i => { 47 | let imageBytes = b64i.data.split(",")[1] 48 | let media_type = b64i.type 49 | return { "type": "image", "source": { "type": "base64", "media_type": media_type, "data": imageBytes } }}) 50 | 51 | 52 | content = text=="" ? imgContent: [...imgContent, ...content] 53 | } 54 | return content 55 | } -------------------------------------------------------------------------------- /reactjs-gen-ai-apps/src/BedrockAgentLoader.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, forwardRef, useImperativeHandle } from "react"; 2 | import { Grid, Select } from "@cloudscape-design/components"; 3 | import { getBedrockAgents } from "./llmLib"; 4 | import { formatDates } from "./helpers" 5 | 6 | export default forwardRef(({ }, ref) => { 7 | const [agents, setAgents] = useState([]) 8 | const [selectedOption, setSelectedOption] = useState({}); 9 | 10 | useImperativeHandle(ref, () => ({ 11 | getSelectedOption() { 12 | return selectedOption 13 | } 14 | })) 15 | 16 | const expandAgents = (agents) => { 17 | const agentsFull = [] 18 | agents.forEach(ag => { 19 | ag.aliases.forEach(alias => { 20 | agentsFull.push({ ...ag, alias: alias }) 21 | }) 22 | }) 23 | return agentsFull 24 | } 25 | 26 | useEffect(() => { 27 | getBedrockAgents().then((agents) => { 28 | const ags = expandAgents(agents) 29 | const agOptions = ags.map(ag => { 30 | console.log(ag) 31 | return ({ 32 | label: `${ag.agentName} (ID: ${ag.agentId}) ${ag.agentStatus} Actualizado: ${formatDates(ag.updatedAt)}`, 33 | value: ag, 34 | iconName: "gen-ai", 35 | description: ag.status, 36 | tags: [ `Alias: ${ag.alias.agentAliasId} / ${ag.alias.agentAliasStatus}`, "Actualizado: " + formatDates(ag.alias.updatedAt)] 37 | }) 38 | }) 39 | setAgents(agOptions) 40 | setSelectedOption(agOptions[0]) 41 | }) 42 | 43 | }, []) 44 | 45 | 46 | 47 | return ( 48 | 49 | 52 | 53 |