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 비즈니스 애플리케이션 생성을 참조하십시오.

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 ID 센터 애플리케이션 생성

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 자격 증명 센터를 구성합니다. 다음 단계를 완료하세요.

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.

이 게시물에서는 Amazon Q Business와 사용자 정의 UI를 통합하는 방법을 배웠습니다. 특정 요구 사항과 요구 사항에 맞는 사용자 지정 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 비즈니스 개발자 가이드를 참조하세요.