Skip to content

Commit 87cecd4

Browse files
aurbacUriel Ramirez
aurbac
and
Uriel Ramirez
authored
AWS SDK update, chart fix and front-end optimization (#110)
* Readme descriptions and DAS data validations. * Readme descriptions and DAS data validations. * Readme descriptions and DAS data validations. * DAS - Answer details and readme updates * DAS - Answer details and readme updates * DAS - Answer details and readme updates * Chart generation prompt improvement * Line correction to update python version in lambda function * AWS SDK update, chart fix and front-end optimization * Chart fix and front-end optimization * Readme updates * Fix chart render calculation * Markdown format update * Markdown format update --------- Co-authored-by: Uriel Ramirez <beralfon@amazon.com>
1 parent 756a73a commit 87cecd4

File tree

27 files changed

+1965
-1030
lines changed

27 files changed

+1965
-1030
lines changed

‎examples/agents_ux/video_games_sales_assistant_with_amazon_bedrock_agents/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ The assistant generates appropriate SQL queries to retrieve the requested data,
2020

2121
To deploy the application, please follow these two steps:
2222

23-
1. **Generative AI Application and Data Source**: [Getting Started with SAM Video Games Sales Assistant and Amazon Bedrock Agents](./sam-bedrock-video-games-sales-assistant/)
24-
2. **Front-End Application**: [Getting Started with Amplify Video Games Sales Assistant](./amplify-video-games-sales-assistant-sample/)
23+
1. **Generative AI Application** - [Data Source and Amazon Bedrock Agent Deployment](./sam-bedrock-video-games-sales-assistant/)
24+
2. **Front-End Application** - [React UI Amazon Bedrock Agent Configuration](./amplify-video-games-sales-assistant-sample/)
2525

2626
> [!NOTE]
2727
> *It is recommended to use the Oregon (us-west-2) or N. Virginia (us-east-1) regions to deploy the application.*

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

Lines changed: 6 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
# Getting Started with Amplify Video Games Sales Assistant
1+
# Front-End Application - React UI Amazon Bedrock Agent Configuration
22

3-
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 IAM user credentials service authorization from the front-end application.
3+
This tutorial guides you through the process of setting up a React front-end application that integrates with an Amazon Bedrock Agent. This agent is specifically created to serve as a Data Analyst Assistant for Video Game Sales.
44

5-
By the end of this tutorial, you'll have a fully functional Generative AI web application that allows a guest user to interact with a Data Analyst Assistant for Video Game Sales using Amazon Bedrock Agents.
5+
By the end of this tutorial, you'll have a fully functional Generative AI web application that enables guest users to interact with the Data Analyst Assistant interface.
66

77
> [!IMPORTANT]
88
> This sample application is meant for demo purposes and is not production ready. Please make sure to validate the code with your organizations security best practices.
9-
>
10-
> Clean up resources after you test the demo to avoid unnecessary costs. Follow the clean-up steps provided.
119
1210
## Prerequisites
1311

@@ -109,7 +107,7 @@ npm start
109107

110108
You can use the following sample questions to test the Data Analyst Assistant:
111109

112-
- Hello
110+
- Hello!
113111
- How can you help me?
114112
- What is the structure of the data?
115113
- Which developers tend to get the best reviews?
@@ -122,45 +120,9 @@ You can use the following sample questions to test the Data Analyst Assistant:
122120
- Which are the most popular consoles and why?
123121
- Give me a short summary and conclusion.
124122

125-
## Using Amplify for Hosting your Front-End Application
126123

127-
Execute the following commands for hosting the React front-end application in Amplify.
128-
129-
[Install the Amplify CLI](https://docs.amplify.aws/gen1/react/tools/cli/start/set-up-cli/) with the following command:
130-
131-
``` bash
132-
npm install -g @aws-amplify/cli
133-
```
134-
135-
### Initialize the Amplify Application using **Gen1**
136-
137-
Set up the Amplify project by executing the following command:
138-
139-
``` bash
140-
amplify init
141-
```
142-
143-
- To initialize the project use the **suggested configuration**.
144-
- Select your authentication method.
145-
146-
### Add Hosting and Testing
147-
148-
Execute the following commands to add hosting to your Amplify project:
149-
150-
151-
``` bash
152-
amplify add hosting
153-
```
154-
155-
Use the following configuration:
156-
- Select the plugin module to execute · **Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)**
157-
- Choose a type **Manual deployment**
158-
159-
``` bash
160-
amplify publish
161-
```
162-
163-
After the publishing finishes, you can copy the provided **URL** to access your front-end application.
124+
> [!TIP]
125+
> 🚀 Deploy your React Application with **[AWS Amplify Hosting](https://aws.amazon.com/amplify/hosting/)** for a production-ready environment. Integrate Amazon Cognito or another identity provider to secure access to Amazon Bedrock and DynamoDB, replacing IAM credentials with proper authentication and authorization controls.
164126
165127
## Front-End Application Preview Images
166128

@@ -186,17 +148,6 @@ Congratulations, now you have your Data Analyst Assistant where you can interact
186148

187149
![Video Games Sales Assistant](../images/preview5.png)
188150

189-
190-
## Cleaning-up Resources (optional)
191-
192-
The next step is optional to delete the resources that we've created.
193-
194-
``` bash
195-
amplify delete
196-
```
197-
198-
Do not forget to [remove your IAM User](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_remove.html) and Access keys for your front-end application.
199-
200151
## Thank You
201152

202153
## License

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

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
11
{
22
"name": "amplify-video-games-sales-assistant-sample",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"author": "Uriel Ramirez (beralfon@amazon.com)",
55
"private": true,
66
"dependencies": {
7-
"@aws-sdk/client-bedrock-agent-runtime": "^3.616.0",
8-
"@aws-sdk/client-bedrock-runtime": "^3.693.0",
9-
"@aws-sdk/client-dynamodb": "^3.693.0",
10-
"@aws-sdk/credential-providers": "^3.617.0",
11-
"@aws-sdk/lib-dynamodb": "^3.738.0",
12-
"@emotion/react": "^11.11.4",
13-
"@emotion/styled": "^11.11.5",
14-
"@fontsource/roboto": "^5.0.13",
15-
"@mui/icons-material": "^5.15.19",
16-
"@mui/material": "^5.15.19",
17-
"@testing-library/jest-dom": "^5.17.0",
18-
"@testing-library/react": "^13.4.0",
7+
"@aws-amplify/ui-react": "^6.10.0",
8+
"@aws-sdk/client-bedrock-agent-runtime": "^3.777.0",
9+
"@aws-sdk/client-bedrock-runtime": "^3.785.0",
10+
"@aws-sdk/client-dynamodb": "^3.777.0",
11+
"@aws-sdk/credential-providers": "^3.778.0",
12+
"@aws-sdk/lib-dynamodb": "^3.787.0",
13+
"@emotion/react": "^11.14.0",
14+
"@emotion/styled": "^11.14.0",
15+
"@fontsource/roboto": "^5.2.5",
16+
"@mui/icons-material": "^7.0.1",
17+
"@mui/material": "^7.0.1",
18+
"@testing-library/dom": "^10.4.0",
19+
"@testing-library/jest-dom": "^6.6.3",
20+
"@testing-library/react": "^16.2.0",
1921
"@testing-library/user-event": "^13.5.0",
20-
"apexcharts": "^4.3.0",
21-
"react": "^18.3.1",
22+
"aws-amplify": "^6.14.1",
23+
"react": "^19.1.0",
2224
"react-apexcharts": "^1.7.0",
23-
"react-dom": "^18.3.1",
25+
"react-dom": "^19.1.0",
26+
"react-markdown": "^10.1.0",
2427
"react-scripts": "5.0.1",
2528
"react-slideshow-image": "^4.3.2",
26-
"uuid": "^10.0.0",
29+
"rehype-raw": "^7.0.0",
30+
"remark-gfm": "^4.0.1",
31+
"uuid": "^11.1.0",
2732
"web-vitals": "^2.1.4"
2833
},
2934
"scripts": {

‎examples/agents_ux/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/public/images/sun.256x256.png‎

5.88 KB
Loading

‎examples/agents_ux/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/src/components/AnswerDetailsDialog.js‎

Lines changed: 72 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,76 @@
11
import React from "react";
2-
import Typography from '@mui/material/Typography';
3-
import Box from '@mui/material/Box';
4-
import Grid from '@mui/material/Unstable_Grid2';
5-
import Button from '@mui/material/Button';
6-
import Dialog from '@mui/material/Dialog';
7-
import DialogActions from '@mui/material/DialogActions';
8-
import DialogContent from '@mui/material/DialogContent';
9-
import DialogTitle from '@mui/material/DialogTitle';
2+
import Typography from "@mui/material/Typography";
3+
import Box from "@mui/material/Box";
4+
import Grid from "@mui/material/Grid";
5+
import Button from "@mui/material/Button";
6+
import Dialog from "@mui/material/Dialog";
7+
import DialogActions from "@mui/material/DialogActions";
8+
import DialogContent from "@mui/material/DialogContent";
9+
import DialogTitle from "@mui/material/DialogTitle";
10+
import OrchestrationRationaleTraceViewer from "./OrchestrationRationaleTraceViewer.js";
11+
import MarkdownRenderer from "./MarkdownRenderer.js";
1012

11-
function AnswerDetailsDialog(props) {
13+
const AnswerDetailsDialog = ({ answer, question, handleClose, open }) => {
14+
const [fullWidth, setFullWidth] = React.useState(true);
15+
const [maxWidth, setMaxWidth] = React.useState("xxl");
1216

13-
const { answer, question, handleClose, open, runningTraces } = props;
14-
const [fullWidth, setFullWidth] = React.useState(true);
15-
const [maxWidth, setMaxWidth] = React.useState('xl');
16-
17-
function removeCharFromStartAndEnd(str, charToRemove) {
18-
// Check if the string starts with the character
19-
while (str.startsWith(charToRemove)) {
20-
str = str.substring(1);
21-
}
22-
// Check if the string ends with the character
23-
while (str.endsWith(charToRemove)) {
24-
str = str.substring(0, str.length - 1);
25-
}
26-
return str;
27-
}
17+
return (
18+
<Dialog
19+
fullWidth={fullWidth}
20+
maxWidth={maxWidth}
21+
open={open}
22+
onClose={handleClose}
23+
>
24+
<DialogTitle>Answer Details</DialogTitle>
25+
<DialogContent>
26+
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
27+
<Grid size={{ sm: 12, md: 12, xs: 6, md: 6 }}>
28+
<Box key="question_value" sx={{ pt: 2, pb: 2 }}>
29+
<Typography
30+
color="primary"
31+
variant="subtitle1"
32+
sx={{ fontWeight: "bold" }}
33+
gutterBottom
34+
>
35+
Question
36+
</Typography>
37+
{question}
38+
</Box>
39+
<Box key="answer_value">
40+
<Typography
41+
component="div"
42+
color="primary"
43+
variant="subtitle1"
44+
sx={{ fontWeight: "bold" }}
45+
gutterBottom
46+
>
47+
Answer
48+
</Typography>
49+
<Typography component="div" variant="body1">
50+
<MarkdownRenderer content={answer.text} />
51+
</Typography>
52+
</Box>
53+
</Grid>
54+
<Grid size={{ sm: 12, md: 12, xs: 6, md: 6 }}>
55+
<Box
56+
sx={{
57+
borderRadius: 4,
58+
p: 2,
59+
background: "#A4E9DB",
60+
}}
61+
>
62+
<OrchestrationRationaleTraceViewer
63+
traces={answer.runningTraces}
64+
/>
65+
</Box>
66+
</Grid>
67+
</Grid>
68+
</DialogContent>
69+
<DialogActions>
70+
<Button onClick={handleClose}>Close</Button>
71+
</DialogActions>
72+
</Dialog>
73+
);
74+
};
2875

29-
return (
30-
<Dialog
31-
fullWidth={fullWidth}
32-
maxWidth={maxWidth}
33-
open={open}
34-
onClose={handleClose}
35-
>
36-
<DialogTitle>Answer Details</DialogTitle>
37-
<DialogContent>
38-
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
39-
<Grid sm={12} md={6} lg={6}>
40-
<Box sx={{ pt:2, pb:2 }}>
41-
<Typography color="primary" variant="subtitle1" sx={{ fontWeight: "bold" }} gutterBottom>Question</Typography>
42-
{question}
43-
</Box>
44-
<Box sx={{ pb: 2 }}>
45-
<Typography color="primary" variant="subtitle1" sx={{ fontWeight: "bold" }} gutterBottom>Answer</Typography>
46-
{ answer.text.split("\n").map(function(item, idx) {
47-
return (
48-
<span key={idx}>
49-
{item}
50-
<br/>
51-
</span>
52-
)
53-
}) }
54-
</Box>
55-
</Grid>
56-
<Grid sm={12} md={6} lg={6} >
57-
<Box sx={{ borderRadius: 4, pl:2, pr:2, pt:2,
58-
background: "#A4E9DB"
59-
}} >
60-
<Box>
61-
{runningTraces.map((row,index) => (
62-
Object.entries(row.trace).map((t,k) => (
63-
<div key={"trace-item"+k}>
64-
{ Object.entries(t[1]).map((l,m) => (
65-
<Box key={"trace"+m}>
66-
{ l[0]==='rationale' && (
67-
<Box sx={{ pb:2 }}>
68-
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }} gutterBottom>SQL Rationale</Typography>
69-
{ removeCharFromStartAndEnd(t[1]["rationale"]["text"], '\n') }
70-
</Box>
71-
)}
72-
73-
{ l[0]==='invocationInput' && (
74-
<Box sx={{ pb:2 }}>
75-
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }} gutterBottom>SQL Generated</Typography>
76-
{
77-
removeCharFromStartAndEnd(t[1]["invocationInput"]["actionGroupInvocationInput"]["requestBody"]["content"]["application/json"][0]["value"], '\n').split("\n").map(function(item, idx) {
78-
return (
79-
<span key={idx}>
80-
{item}
81-
<br/>
82-
</span>
83-
)
84-
})
85-
}
86-
</Box>
87-
)}
88-
</Box>
89-
))}
90-
</div>
91-
))
92-
))}
93-
</Box>
94-
</Box>
95-
</Grid>
96-
</Grid>
97-
</DialogContent>
98-
<DialogActions>
99-
<Button onClick={handleClose}>Close</Button>
100-
</DialogActions>
101-
</Dialog>
102-
);
103-
}
104-
105-
export default AnswerDetailsDialog;
76+
export default AnswerDetailsDialog;

‎examples/agents_ux/video_games_sales_assistant_with_amazon_bedrock_agents/amplify-video-games-sales-assistant-sample/src/components/Answering.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import Typography from "@mui/material/Typography";
3+
import Box from "@mui/material/Box";
4+
import CircularProgress from "@mui/material/CircularProgress";
5+
import Stack from "@mui/material/Stack";
6+
import Fade from "@mui/material/Fade";
7+
8+
const Answering = ({ loading }) => {
9+
return (
10+
<Fade timeout={1000} in={loading}>
11+
<Stack
12+
direction="row"
13+
spacing={2}
14+
sx={{
15+
display: "flex",
16+
alignItems: "center",
17+
alignContent: "top",
18+
}}
19+
>
20+
<CircularProgress size={22} color="primary" sx={{ p: 0, m: 0 }} />
21+
<Box
22+
sx={(theme) => ({
23+
pt: 1,
24+
pb: 1,
25+
pl: 2,
26+
pr: 2,
27+
m: 0,
28+
borderRadius: 4,
29+
display: "flex",
30+
boxShadow: "rgba(0, 0, 0, 0.05) 0px 4px 12px",
31+
})}
32+
>
33+
<Typography variant="body1">Answering your question...</Typography>
34+
</Box>
35+
</Stack>
36+
</Fade>
37+
);
38+
};
39+
40+
export default Answering;

0 commit comments

Comments
 (0)