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 ビジネス アプリケーション。詳細については、「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.

後で CloudFormation テンプレートをプロビジョニングするときに使用する CertificateARN を書き留めます。

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:

[Launch Stack] を選択してアカウントで 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 Identity Center アプリケーションを作成する

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:

このセクションで説明するアクションは 1 回限りのアクションです。目標は、構築しているアプリケーションを表すように IAM Identity Center でアプリケーションを構成することです。具体的には、このステップでは、アプリケーションが認証されたユーザーを表す ID トークンを信頼できるように IAM Identity Center を構成します。次の手順を実行します。

Custom UI

カスタム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 アプリケーションをデプロイして開始します。Application Load Balancer の背後で実行されているアプリケーションの正常性を表示するには、Amazon EC2 コンソールを開き、ナビゲーション ペインの [ターゲット グループ] で [ロード バランシング] を選択します。デバッグの目的で、AWS Systems Manager の機能である Session 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 リポジトリで [Watch] を選択して新しいリリースに関する通知を受け取り、最新の更新を確認してください。改善や新機能に関するご提案をお待ちしております。

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

Amazon Q ビジネスの詳細については、『Amazon Q ビジネス開発者ガイド』を参照してください。