為 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 應用程式。負載平衡。出於偵錯目的，您也可以透過會話管理器（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 業務開發人員指南。