Data Analyst Assistant for Video Games Sales

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/README.md

@@ -0,0 +1,36 @@
+# Tutorial to Deploy the Data Analyst Assistant for Video Game Sales Using Amazon Bedrock Agents
+
+This solution provides a Generative AI Application reference that is able to access structured data stored in a PostgreSQL database based on a question-answering assistant that generates SQL queries to obtain the necessary data to provide an answer in natural language. **Also, you can change the data source to connect to your preferred database engine by adapting the Agent's instructions and the Lambda function logic.**
+
+![Video Games Sales Assistant](./images/preview.png)
+
+**To deploy the application, please follow these instructions:**
+
+> *It is recommended to use the Oregon (us-west-2) or N. Virginia (us-east-1) regions to deploy the application.*
+
+1. [Getting Started with SAM Video Games Sales Assistant and Amazon Bedrock Agents](./sam-bedrock-video-games-sales-assistant/)
+2. [Getting Started with Amplify Video Games Sales Assistant](./amplify-video-games-sales-assistant-sample/)
+
+## AWS Diagram Architecture
+
+![Video Games Sales Assistant](./images/gen-ai-assistant-diagram.png)
+
+## Application Preview
+
+The following images are part of a conversation analysis that includes the natural language answer, the rationale used by the LLM to generate the SQL query, the records resulting from the SQL query used to answer the question, and chart generation.
+
+**Agent answers**
+
+![Video Games Sales Assistant](./images/preview1.png)
+
+**Answer details including the rationale to generate the SQL**
+
+![Video Games Sales Assistant](./images/preview2.png)
+
+**The record results from the SQL used to answer the question**
+
+![Video Games Sales Assistant](./images/preview3.png)
+
+**The chart generated using the agent's answer and the record results from the SQL Query (charts created using [Apexcharts](https://apexcharts.com/))**
+
+![Video Games Sales Assistant](./images/preview4.png)

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/.gitignore

@@ -0,0 +1,49 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+package-lock.json
+src/env.js
+amplify
+
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/mock-api-resources
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/README.md

@@ -0,0 +1,146 @@
+# Getting Started with Amplify Video Games Sales Assistant
+
+This tutorial guides you through the process of setting up a React front-end application using AWS Amplify that integrates with an Amazon Bedrock Agent project. The services to be deployed are: Amplify Hosting, and it leverages Amazon Cognito for user authentication and authorization.
+
+By the end of this tutorial, you'll have a fully functional web application that allows users to interact with a conversational AI agent for video game sales assistance.
+
+> IMPORTANT: This example is meant for demo purposes and is not production ready. Please make sure to validate the code with your organizations security best practices.
+
+## Prerequisites
+
+- An **Alias** created from your **Amazon Bedrock Agent** that you created in the first tutorial.
+- [Node.js > 18 version required](https://nodejs.org/en/download/package-manager)
+- [Install the Amplify CLI](https://docs.amplify.aws/gen1/react/tools/cli/start/set-up-cli/) with the following command:
+
+``` bash
+npm install -g @aws-amplify/cli 
+```
+
+## Amplify Deployment
+
+Run the following commands in the React front-end application.
+
+### Install React Application Dependencies
+
+``` bash
+npm install
+```
+
+### Initialize the Amplify Application using **Gen1**
+
+``` bash
+amplify init
+```
+
+- To initialize the project use the **suggested configuration**.
+- Select your authentication method.
+
+### Add Authentication
+
+``` bash
+amplify add auth
+```
+
+Use the following configuration:
+ - Do you want to use the default authentication and security configuration? **Default configuration**
+ - How do you want users to be able to sign in? **Email**
+ - Do you want to configure advanced settings? **No, I am done.**
+
+
+``` bash
+amplify push
+```
+
+### Configure the Amazon Bedrock Agent
+
+Rename the file **src/sample.env.js** to **src/env.js**, update the values with your **Agent**, **Agent Alias ID** and **Question Answers Table Name** that you can find in the CloudFormation Outputs from the SAM project **sam-bedrock-video-games-sales-assistant**.
+
+### Update the Auth Role from Amazon Cognito Identity Pool
+
+Go to the **Cognito** service, choose **Identity pools**, click on **amplifyvideogamessaXXXXXXXXX_identitypool_XXXXXXXXX__dev**, go to **User access**.
+
+From the **Authenticated access** section, click on the **Authenticated role** to go to the configuration page.
+
+In the **Permissions policies** section, click **Add permissions** and then click **Create inline policy** to add the following inline policy using the **JSON Policy editor**, update the values with your **<agent_arn>**, **<agent_id>**, **<account_id>** and **<question_answers_table_arn>** that you can find in the outputs from the SAM tutorial.
+
+``` json
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "InvokeBedrockAgent",
+            "Effect": "Allow",
+            "Action": [
+                "bedrock:*"
+            ],
+            "Resource": [
+                "<agent_arn>",
+                "arn:aws:bedrock:*:<account_id>:agent-alias/<agent_id>/*"
+            ]
+        },
+        {
+            "Sid": "InvokeBedrockModel",
+            "Effect": "Allow",
+            "Action": [
+                "bedrock:*"
+            ],
+            "Resource": [
+                "arn:aws:bedrock:*:<account_id>:inference-profile/us.anthropic.claude-3-5-sonnet-20241022-v2:0",
+                "arn:aws:bedrock:us-east-2::foundation-model/anthropic.claude-3-5-sonnet-20241022-v2:0",
+                "arn:aws:bedrock:us-east-1::foundation-model/anthropic.claude-3-5-sonnet-20241022-v2:0",
+                "arn:aws:bedrock:us-west-2::foundation-model/anthropic.claude-3-5-sonnet-20241022-v2:0"
+            ]
+        },
+        {
+            "Sid": "DynamoDB",
+            "Effect": "Allow",
+            "Action": [
+                "dynamodb:Query"
+            ],
+            "Resource": "<question_answers_table_arn>"
+        }
+    ]
+}
+```
+
+### Add Hosting and Testing
+
+``` bash
+amplify add hosting
+```
+
+Use the following configuration:
+- Select the plugin module to execute · **Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)**
+- Choose a type **Manual deployment**
+
+``` bash
+amplify publish
+```
+
+Now you can test the application using the provided URL and create an account to access the Data Analyst Assistant.
+
+#### Sample Questions
+
+Now you can test de assistant with the following sample questions:
+
+- Hello
+- How can you help me?
+- What is the structure of the data?
+- Which developers tend to get the best reviews?
+- What were the best-selling games in the last 10 years?
+- What are the best-selling video game genres?
+- Give me the top 3 game publishers.
+- Give me the top 3 video games with the best reviews and the best sales.
+- Which is the year with the highest number of games released?
+- Which are the most popular consoles and why?
+- Give me a short summary and conclusion.
+
+## Cleaning-up Resources (optional)
+
+The next step is optional to delete the resources that we've created.
+
+``` bash
+amplify delete
+```
+
+## Thank You

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "amplify-video-games-sales-assistant-sample",
+  "version": "0.1.0",
+  "author": "Uriel Ramirez ([email protected])",
+  "private": true,
+  "dependencies": {
+    "@aws-amplify/ui-react": "^6.1.12",
+    "@aws-sdk/client-bedrock-agent-runtime": "^3.616.0",
+    "@aws-sdk/client-bedrock-runtime": "^3.693.0",
+    "@aws-sdk/client-dynamodb": "^3.693.0",
+    "@aws-sdk/credential-providers": "^3.617.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.13",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "apexcharts": "^4.3.0",
+    "aws-amplify": "^6.3.6",
+    "react": "^18.3.1",
+    "react-apexcharts": "^1.7.0",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "react-slideshow-image": "^4.3.2",
+    "uuid": "^10.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/public/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Agents for Amazon Bedrock"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Data Analyst Assistant</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/agents/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: