Claude客户支持聊天web app开发[可建私域知识库]

由 Claude 提供支持的先进、完全可定制的客户支持聊天界面，并利用 Amazon Bedrock 知识库进行知识检索。

0.下载源码

git clone https://github.com/anthropics/anthropic-quickstarts/tree/main/customer-support-agent

1 主要特点

• 使用 Anthropic 的 Claude 模型进行人工智能聊天
• 用于上下文知识检索的 Amazon Bedrock 集成
• 实时思考与调试信息展示
• 知识库源可视化
• 用户情绪检测和适当的代理重定向
• 使用 shadcn/ui 组件实现高度可定制的 UI

2 入门

1. 克隆此存储库
2. 安装依赖项：npm install
3. 设置环境变量（参见配置部分）
4. 运行开发服务器：npm run dev
5. 在浏览器中打开http://localhost:3000

3 ⚙️ 配置

.env.local在根目录中创建一个具有以下变量的文件：

ANTHROPIC_API_KEY=your_anthropic_api_key
BAWS_ACCESS_KEY_ID=your_aws_access_key
BAWS_SECRET_ACCESS_KEY=your_aws_secret_key

注意：我们在 AWS 环境变量前面添加了“B”，其原因将在后面的部署部分中讨论。

4 如何获取钥匙

4.1 人类 API 密钥

1. 访问console.anthropic.com
2. 注册或登录您的账户
3. 点击“获取 API 密钥”
4. 复制密钥并将其粘贴到您的.env.local文件中

4.2 AWS 访问密钥和密钥

请按照以下步骤获取您的 AWS 凭证：

1 登录 AWS 管理控制台

2 导航到 IAM（身份和访问管理）仪表板

3 在左侧边栏中，点击“用户”

4 点击“创建用户”，按照提示创建新用户 

5 在“设置权限”页面上，选择“直接附加策略”策略 

6 在权限页面上，使用“AmazonBedrockFullAccess”策略 

7 审查并创建用户

8 在摘要页面上，单击创建访问密钥。

9 然后选择“在 AWS 计算服务上运行的应用程序”。如果需要，添加描述，然后单击“创建”。

10 现在您将看到显示的访问密钥 ID 和秘密访问密钥。请注意，这些密钥在创建期间只能看到一次，因此请务必安全保存它们。 

11 复制这些密钥并将其粘贴到您的.env.local文件中

注意：请确保您的密钥安全，切勿公开分享。

5 Amazon Bedrock RAG 集成

该项目利用 Amazon Bedrock 进行检索增强生成 (RAG)。设置方法如下：

1. 确保您拥有具有 Bedrock 访问权限的 AWS 帐户。
2. 在您所需的 AWS 区域中创建一个 Bedrock 知识库。
3. 在知识库中索引您的文档/来源。有关更多信息，请查看“如何创建您自己的知识库”部分。
4. 在 中，使用您的知识库 ID 和名称ChatArea.tsx更新数组：knowledgeBases

const knowledgeBases: KnowledgeBase[] = [
  { id: "your-knowledge-base-id", name: "Your KB Name" },
  // Add more knowledge bases as needed
];

应用程序将在对话过程中使用这些知识库进行上下文检索。

5.1 如何创建自己的知识库

要创建您自己的知识库：

1 转到您的 AWS 控制台并选择 Amazon Bedrock。

2 在左侧菜单中，点击“更多”下的“知识库”。

3 点击“创建知识库”。 

4 为您的知识库命名。您可以保留“创建新服务角色”。

5 选择知识库的来源。在此示例中，我们将使用 Amazon S3 存储服务。 注意：如果您使用 S3 存储服务，则需要先创建一个存储桶，用于上传文件。或者，您也可以在创建知识库后上传文件。

6 单击“下一步”。

7 为您的知识库选择一个位置。这可以是 S3 存储桶、文件夹，甚至是单个文档。

8 单击“下一步”。

9 选择您喜欢的嵌入模型。在本例中，我们将使用 Titan Text Embeddings 2。

10 选择“快速创建新的矢量商店”。

11 确认并创建您的知识库。

12 完成此操作后，从知识库概述中获取知识库 ID。

6 切换模型

该项目支持多种 Claude 模型。要在模型之间切换：

1. 在中ChatArea.tsx，models数组定义可用的模型：

const models: Model[] = [
  { id: "claude-3-haiku-20240307", name: "Claude 3 Haiku" },
  { id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet" },
  // Add more models as needed
];

2. 状态selectedModel变量控制当前选定的模型：

const [selectedModel, setSelectedModel] = useState("claude-3-haiku-20240307");

3. 为了在 UI 中实现模型切换，使用了下拉组件来更新selectedModel。

7 定制

该项目利用shadcn / ui组件，提供高度的定制性：

• components/ui修改目录中的UI组件
• 调整主题app/globals.css
• 自定义各个组件文件中的布局和功能
• 通过编辑文件来修改主题颜色和样式styles/themes.js：

// styles/themes.js
export const themes = {
  neutral: {
    light: {
      // Light mode colors for neutral theme
    },
    dark: {
      // Dark mode colors for neutral theme
    }
  },
  // Add more themes here
};

您可以通过调整此文件中的颜色值来添加新主题或修改现有主题。

8 使用 AWS Amplify 进行部署

要使用 AWS Amplify 部署此应用程序，请按照以下步骤操作：

1. 转到您的 AWS 控制台并选择 Amplify。
2. 点击“创建新应用程序”（图像链接稍后添加）。
3. 选择 GitHub（或您首选的提供商）作为源。
4. 选择此存储库。
5. 编辑 YAML 文件以包含以下内容：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npm run build # Next.js build runs first
        - echo "ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY" >> .env
        - echo "KNOWLEDGE_BASE_ID=$KNOWLEDGE_BASE_ID" >> .env
        - echo "BAWS_ACCESS_KEY_ID=$BAWS_ACCESS_KEY_ID" >> .env
        - echo "BAWS_SECRET_ACCESS_KEY=$BAWS_SECRET_ACCESS_KEY" >> .env
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*

1. 选择创建新的服务角色或使用现有角色。请参阅“服务角色”部分了解更多信息。
2. 单击“高级设置”并添加您的环境变量：

ANTHROPIC_API_KEY=your_anthropic_api_key
BAWS_ACCESS_KEY_ID=your_aws_access_key
BAWS_SECRET_ACCESS_KEY=your_aws_secret_key

1. 我们在这里键前面添加“B”的原因是 AWS 不允许 Amplify 中的键以“AWS”开头。
2. 单击“保存并部署”即可开始部署过程。

您的应用程序现在将使用 AWS Amplify 进行部署。

8.1 服务角色

应用程序部署完成后，如果您选择创建新的服务角色：

1. 转到部署页面
2. 选择刚刚创建的部署
3. 点击“应用程序设置”
4. 复制服务角色 ARN
5. 进入IAM控制台，找到此角色
6. 将“AmazonBedrockFullAccess”策略附加到角色

这可确保您的 Amplify 应用程序具有与 Amazon Bedrock 交互所需的权限。

9 定制部署与开发

该项目现在支持灵活的部署和开发配置，允许您根据需要包含或排除特定组件（左侧边栏、右侧边栏）。配置侧边栏的包含由 config.ts 文件控制，该文件使用环境变量来设置配置：

typescriptCopytype Config = {
  includeLeftSidebar: boolean;
  includeRightSidebar: boolean;
};

const config: Config = {
  includeLeftSidebar: process.env.NEXT_PUBLIC_INCLUDE_LEFT_SIDEBAR === "true",
  includeRightSidebar: process.env.NEXT_PUBLIC_INCLUDE_RIGHT_SIDEBAR === "true",
};

export default config;

此配置使用两个环境变量：

NEXT_PUBLIC_INCLUDE_LEFT_SIDEBAR：设置为“true”以包含左侧边栏 NEXT_PUBLIC_INCLUDE_RIGHT_SIDEBAR：设置为“true”以包含右侧边栏

10 NPM 脚本

package.json 包含几个用于不同配置的新脚本：

npm run dev: Runs the full app with both sidebars (default)
npm run build: Builds the full app with both sidebars (default)
npm run dev:full: Same as npm run dev
npm run dev:left: Runs the app with only the left sidebar
npm run dev:right: Runs the app with only the right sidebar
npm run dev:chat: Runs the app with just the chat area (no sidebars)
npm run build:full: Same as npm run build
npm run build:left: Builds the app with only the left sidebar
npm run build:right: Builds the app with only the right sidebar
npm run build:chat: Builds the app with just the chat area (no sidebars)

用法 要使用特定配置：

对于开发：运行所需脚本（例如，npm run dev:left）对于生产：使用所需脚本进行构建（例如，npm run build:right）

这些脚本在运行或构建应用程序之前设置适当的环境变量，让您能够轻松地在不同的配置之间切换。这种灵活性让您能够根据特定需求定制应用程序的布局，无论是用于测试、开发还是生产部署。