Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: correcting typos #15

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+43 −44
Open

fix: correcting typos #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 43 additions & 44 deletions customer-support-agent/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ An advanced, fully customizable customer support chat interface powered by Claud

## Key Features

- AI-powered chat using Anthropic's Claude model
- Amazon Bedrock integration for contextual knowledge retrieval
- Real-time thinking & debug information display
- Knowledge base source visualization
- User mood detection & appropriate agent redirection
- Highly customizable UI with shadcn/ui components
- AI-powered chat using Anthropic's Claude model
- Amazon Bedrock integration for contextual knowledge retrieval
- Real-time thinking & debug information display
- Knowledge base source visualization
- User mood detection & appropriate agent redirection
- Highly customizable UI with shadcn/ui components

## Getting Started
## Getting Started

1. Clone this repository
2. Install dependencies: `npm install`
Expand All @@ -32,7 +32,7 @@ BAWS_SECRET_ACCESS_KEY=your_aws_secret_key

Note: We are adding a 'B' in front of the AWS environment variables for a reason that will be discussed later in the deployment section.

## How to Get Your Keys
## How to Get Your Keys

### Anthropic API Key

Expand All @@ -45,28 +45,25 @@ Note: We are adding a 'B' in front of the AWS environment variables for a reason

Follow these steps to obtain your AWS credentials:

1. Log in to the AWS Management Console
2. Navigate to the IAM (Identity and Access Management) dashboard

3. In the left sidebar, click on "Users"

4. Click "Create user" and follow the prompts to create a new user
1. Log in to the AWS Management Console.
2. Navigate to the IAM (Identity and Access Management) dashboard.
3. In the left sidebar, click on "Users".
4. Click "Create user" and follow the prompts to create a new user.
![Add User](tutorial/create-user.png)
5. On the Set Permission page, select the "Attach policies directly" policy
5. On the Set Permission page, select the "Attach policies directly" policy.
![Attach Policy](tutorial/attach.png)
5. On the permissions page, use the "AmazonBedrockFullAccess" policy
6. On the permissions page, use the "AmazonBedrockFullAccess" policy.
![Attach Policy](tutorial/bedrock.png)
6. Review and create the user
7. On the Summary page, click on Create access key.
8. Then select "Application running on an AWS compute service". Add a description if desired, then click "Create".
9. You will now see the Access Key ID and Secret Access Key displayed. Note that these keys are only visible once during creation, so be sure to save them securely.
![Access Keys](tutorial/access-keys.png)
8. Copy these keys and paste them into your `.env.local` file
7. Review and create the user.
8. On the Summary page, click on Create access key.
9. Then select "Application running on an AWS compute service". Add a description if desired, then click "Create".
10. You will now see the Access Key ID and Secret Access Key displayed. Note that these keys are only visible once during creation, so be sure to save them securely.
![Access Keys](tutorial/access-keys.png)
11. Copy these keys and paste them into your `.env.local` file.

Note: Make sure to keep your keys secure and never share them publicly.


## Amazon Bedrock RAG Integration
## Amazon Bedrock RAG Integration

This project utilizes Amazon Bedrock for Retrieval-Augmented Generation (RAG). To set up:

Expand All @@ -90,7 +87,6 @@ To create your own knowledge base:

1. Go to your AWS Console and select Amazon Bedrock.
2. In the left side menu, click on "Knowledge base" under "More".

3. Click on "Create knowledge base".
![Create Knowledge Base](tutorial/create-knowledge-base.png)
4. Give your knowledge base a name. You can leave "Create a new service role".
Expand All @@ -107,8 +103,7 @@ To create your own knowledge base:
11. Confirm and create your knowledge base.
12. Once you have done this, get your knowledge base ID from the knowledge base overview.


## Switching Models
## Switching Models

This project supports multiple Claude models. To switch between models:

Expand All @@ -130,15 +125,14 @@ const [selectedModel, setSelectedModel] = useState("claude-3-haiku-20240307");

3. To implement model switching in the UI, a dropdown component is used that updates the `selectedModel`.


## Customization
## Customization

This project leverages shadcn/ui components, offering a high degree of customization:

* Modify the UI components in the `components/ui` directory
* Adjust the theme in `app/globals.css`
* Customize the layout and functionality in individual component files
* Modify the theme colors and styles by editing the `styles/themes.js` file:
- Modify the UI components in the `components/ui` directory
- Adjust the theme in `app/globals.css`
- Customize the layout and functionality in individual component files
- Modify the theme colors and styles by editing the `styles/themes.js` file:

```javascript
// styles/themes.js
Expand All @@ -149,14 +143,15 @@ export const themes = {
},
dark: {
// Dark mode colors for neutral theme
}
},
},
// Add more themes here
};
```

You can add new themes or modify existing ones by adjusting the color values in this file.

## Deploy with AWS Amplify
## Deploy with AWS Amplify

To deploy this application using AWS Amplify, follow these steps:

Expand Down Expand Up @@ -198,32 +193,34 @@ To deploy this application using AWS Amplify, follow these steps:
BAWS_ACCESS_KEY_ID=your_aws_access_key
BAWS_SECRET_ACCESS_KEY=your_aws_secret_key
```

The reason we are adding a 'B' in front of the keys here is because AWS doesn't allow keys in Amplify to start with "AWS".

8. Click "Save and deploy" to start the deployment process.

Your application will now be deployed using AWS Amplify.


### Service Role

Once your application is deployed, if you selected to create a new service role:

1. Go to your deployments page
2. Select the deployment you just created
3. Click on "App settings"
4. Copy the Service role ARN
5. Go to the IAM console and find this role
6. Attach the "AmazonBedrockFullAccess" policy to the role
1. Go to your deployments page.
2. Select the deployment you just created.
3. Click on "App settings".
4. Copy the Service role ARN.
5. Go to the IAM console and find this role.
6. Attach the "AmazonBedrockFullAccess" policy to the role.

This ensures that your Amplify app has the necessary permissions to interact with Amazon Bedrock.

## Customized Deployment and Development
## Customized Deployment and Development

This project now supports flexible deployment and development configurations, allowing you to include or exclude specific components (left sidebar, right sidebar) based on your needs.
Configuration
The inclusion of sidebars is controlled by a config.ts file, which uses environment variables to set the configuration:

```typescript
typescriptCopytype Config = {
type Config = {
includeLeftSidebar: boolean;
includeRightSidebar: boolean;
};
Expand All @@ -242,6 +239,7 @@ NEXT_PUBLIC_INCLUDE_LEFT_SIDEBAR: Set to "true" to include the left sidebar
NEXT_PUBLIC_INCLUDE_RIGHT_SIDEBAR: Set to "true" to include the right sidebar

## NPM Scripts

The package.json includes several new scripts for different configurations:

```bash
Expand Down Expand Up @@ -269,6 +267,7 @@ This flexibility allows you to tailor the application's layout to your specific
## Appendix

This project is a prototype and is provided on an "as-is" basis. It is not intended for production use and may contain bugs, errors, or inconsistencies. By using this prototype, you acknowledge and agree that:

- The software is provided in a pre-release, beta, or trial form.
- It may not be suitable for production or mission-critical environments.
- The developers are not responsible for any issues, data loss, or damages resulting from its use.
Expand Down