diff --git a/customer-support-agent/README.md b/customer-support-agent/README.md index c8860f81..7212cbe6 100644 --- a/customer-support-agent/README.md +++ b/customer-support-agent/README.md @@ -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` @@ -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 @@ -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: @@ -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". @@ -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: @@ -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 @@ -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: @@ -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; }; @@ -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 @@ -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.