为 Amazon Q Business 构建自定义 UI，通过生成式 AI 提高员工生产力

本文演示了如何为 Amazon Q Business 构建自定义 UI。定制的 UI 允许您实现处理反馈等特殊功能

This walkthrough demonstrates how to build a custom UI for Amazon Q Business. The customized UI allows you to implement special features like handling feedback, using company brand colors and templates, and using a custom login. It also enables conversing with Amazon Q through an interface personalized to your use case.

本演练演示如何为 Amazon Q Business 构建自定义 UI。定制的 UI 允许您实现特殊功能，例如处理反馈、使用公司品牌颜色和模板以及使用自定义登录。它还可以通过根据您的使用案例进行个性化的界面与 Amazon Q 进行对话。

Prerequisites

先决条件

For this walkthrough, you should have the following prerequisites:

对于本演练，您应该满足以下先决条件：

An active AWS account. If you do not have an AWS account, create one at https://aws.amazon.com.

一个活跃的 AWS 账户。如果您没有 AWS 账户，请在 https://aws.amazon.com 创建一个账户。

An enterprise knowledge base with relevant data and expertise. For more information, see Creating an enterprise knowledge base.

包含相关数据和专业知识的企业知识库。有关详细信息，请参阅创建企业知识库。

An Amazon Q Business application. For more information, see Creating an Amazon Q Business application.

Amazon Q Business 应用程序。有关更多信息，请参阅创建 Amazon Q Business 应用程序。

Basic knowledge of HTML, CSS, JavaScript, and Python.

HTML、CSS、JavaScript 和 Python 的基本知识。

Generate a private certificate

生成私有证书

If you already have an SSL certificate, you can skip this section.

如果您已有 SSL 证书，则可以跳过此部分。

You will receive a warning from your browser when accessing the UI if you didn’t provide a custom SSL certificate when launching the AWS CloudFormation stack. The instructions in this section show you how to create a self-signed certificate. This is not recommended for production use cases. You should obtain an SSL certificate that has been validated by a certificate authority, import it into ACM, and reference this when launching the CloudFormation stack. If you want to continue with the self-signed certificate (for development purposes), you should be able to proceed past the browser warning page. With Chrome, you will see the message Your connection is not private error message (NET::ERR_CERT_AUTHORITY_INVALID), but by choosing Advanced, you should then see a link to proceed.

如果您在启动 AWS CloudFormation 堆栈时未提供自定义 SSL 证书，则在访问 UI 时您将收到来自浏览器的警告。本节中的说明向您展示如何创建自签名证书。不建议将其用于生产用例。您应该获取已由证书颁发机构验证的 SSL 证书，将其导入 ACM，并在启动 CloudFormation 堆栈时引用该证书。如果您想继续使用自签名证书（用于开发目的），您应该能够跳过浏览器警告页面。使用 Chrome，您将看到消息“您的连接不是私有”错误消息 (NET::ERR_CERT_AUTHORITY_INVALID)，但通过选择“高级”，您应该会看到一个继续的链接。

The following command generates a sample self-signed certificate (for development purposes) and uploads the certificate to ACM. You can also find the script on the GitHub repo.

以下命令生成示例自签名证书（用于开发目的）并将证书上传到 ACM。您还可以在 GitHub 存储库上找到该脚本。

Note down the CertificateARN to use later while provisioning the CloudFormation template.

记下 CertificateARN，以便稍后在配置 CloudFormation 模板时使用。

Provision resources with the CloudFormation template

使用 CloudFormation 模板配置资源

The full source of the solution on in the GitHub repository and is deployed with AWS CloudFormation.

该解决方案的完整源代码位于 GitHub 存储库中，并使用 AWS CloudFormation 进行部署。

Choose Launch Stack to launch a CloudFormation stack in your account and deploy the template:

选择启动堆栈以在您的帐户中启动 CloudFormation 堆栈并部署模板：

This template creates separate IAM roles for the Application Load Balancer, Amazon Cognito, and the EC2 instance. Additionally, it creates and configures those services to run the end-to-end demonstration.

此模板为 Application Load Balancer、Amazon Cognito 和 EC2 实例创建单独的 IAM 角色。此外，它还创建并配置这些服务以运行端到端演示。

Provide the following parameters for the stack:

为堆栈提供以下参数：

Create an IAM Identity Center application

创建 IAM 身份中心应用程序

The actions described in this section are one-time actions. The goal is to configure an application in IAM Identity Center to represent the application you are building. Specifically, in this step, you configure IAM Identity Center to be able to trust the identity tokens by which your application will represent its authenticated users. Complete the following steps:

本节中描述的操作是一次性操作。目标是在 IAM Identity Center 中配置一个应用程序来代表您正在构建的应用程序。具体来说，在此步骤中，您将 IAM Identity Center 配置为能够信任您的应用程序代表其经过身份验证的用户的身份令牌。完成以下步骤：

Custom UI

自定义用户界面

The CloudFormation stack deploys and starts the Streamlit application on an EC2 instance on port 8080. To view the health of the application running behind the Application Load Balancer, open the Amazon EC2 console and choose Load Balancing under Target groups in the navigation pane. For debugging purposes, you can also connect to Amazon EC2 through Session Manager, a capability of AWS Systems Manager.

CloudFormation 堆栈在端口 8080 上的 EC2 实例上部署并启动 Streamlit 应用程序。要查看应用程序负载均衡器后面运行的应用程序的运行状况，请打开 Amazon EC2 控制台并在导航窗格中的目标组下选择负载均衡。出于调试目的，您还可以通过会话管理器（AWS Systems Manager 的一项功能）连接到 Amazon EC2。

To access the custom UI, use the URL that you copied from the CloudFormation stack output. Choose Sign up and use the same email address for the users that were registered in IAM Identity Center.

要访问自定义 UI，请使用您从 CloudFormation 堆栈输出复制的 URL。选择注册并为在 IAM Identity Center 中注册的用户使用相同的电子邮件地址。

After successful authentication, you’re redirected to the custom UI. You can enhance it by implementing custom features like handling feedback, using your companies brand colors and templates, and personalizing it to your specific use case.

身份验证成功后，您将重定向到自定义 UI。您可以通过实施自定义功能（例如处理反馈、使用您公司的品牌颜色和模板以及根据您的特定用例进行个性化）来增强它。

Clean up

清理

To avoid future charges in your account, delete the resources you created in this walkthrough. The EC2 instance with the custom UI will incur charges as long as the instance is active, so stop it when you’re done.

为了避免您的帐户将来产生费用，请删除您在本演练中创建的资源。只要实例处于活动状态，具有自定义 UI 的 EC2 实例就会产生费用，因此在完成后将其停止。

Conclusion

结论

In this post, you learned how to integrate a custom UI with Amazon Q Business. Using a custom UI tailored to your specific needs and requirements makes Amazon Q more efficient and straightforward to use for your business. You can include your company branding and design, and have control and ownership over the user experience. For example, you could introduce custom feedback handling features.

在本文中，您学习了如何将自定义 UI 与 Amazon Q Business 集成。使用根据您的特定需求和要求量身定制的自定义 UI 可以让 Amazon Q 更高效、更简单地用于您的业务。您可以包含公司的品牌和设计，并对用户体验拥有控制权和所有权。例如，您可以引入自定义反馈处理功能。

The sample custom UI for Amazon Q discussed in this post is provided as open source—you can use it as a starting point for your own solution, and help improve it by contributing bug fixes and new features using GitHub pull requests. Explore the code, choose Watch in the GitHub repo to receive notifications about new releases, and check back for the latest updates. We welcome your suggestions for improvements and new features.

本文中讨论的 Amazon Q 示例自定义 UI 作为开源提供 - 您可以将其用作您自己的解决方案的起点，并通过使用 GitHub 拉取请求贡献错误修复和新功能来帮助改进它。探索代码，在 GitHub 存储库中选择“观看”以接收有关新版本的通知，然后回来查看最新更新。我们欢迎您提出改进和新功能的建议。

For more information on Amazon Q business, refer to the Amazon Q Business Developer Guide.

有关 Amazon Q 业务的更多信息，请参阅 Amazon Q 业务开发人员指南。