Construct a customized UI for Amazon Q Enterprise

Amazon Q is a brand new generative synthetic intelligence (AI)-powered assistant designed for work that may be tailor-made to what you are promoting. Amazon Q may help you get quick, related solutions to urgent questions, clear up issues, generate content material, and take actions utilizing the information and experience present in your organization’s data repositories and enterprise techniques. If you chat with Amazon Q, it offers instant, related data and recommendation to assist streamline duties, pace up decision-making, and spark creativity and innovation at work. For extra data, see Amazon Q Business, now generally available, helps boost workforce productivity with generative AI.

This put up demonstrates how one can construct a customized UI for Amazon Q Business. The custom-made UI permits you to implement particular options like dealing with suggestions, utilizing firm model colours and templates, and utilizing a customized login. It additionally allows conversing with Amazon Q by way of an interface customized to your use case.

Answer overview

On this answer, we deploy a customized internet expertise for Amazon Q to ship fast, correct, and related solutions to what you are promoting questions on prime of an enterprise data base. The next diagram illustrates the answer structure.

The workflow contains the next steps:

1. The consumer accesses the chatbot utility, which is hosted behind an Software Load Balancer.
2. After the consumer logs in, they’re redirected to the Amazon Cognito login web page for authentication.
   • This answer makes use of an Amazon Cognito consumer pool as an OAuth-compatible identification supplier (IdP), which is required as a way to change a token with AWS IAM Identity Center and in a while work together with the Amazon Q Enterprise APIs. For extra details about trusted token issuers and the way token exchanges are carried out, see Using applications with a trusted token issuer. If you have already got an OAuth-compatible IdP, you need to use it as a substitute of setting an Amazon Cognito consumer pool.
   • Provisioning native customers within the consumer pool and reconciling them with IAM Identification Heart could be error-prone. You possibly can streamline the combination of IAM Identification Heart customers into the consumer pool by utilizing a federated IdP and making a second customized utility (SAML) in IAM Identification Heart. For directions, confer with How do I integrate IAM Identity Center with an Amazon Cognito user pool and the related demo video.
3. The UI utility, deployed on an Amazon Elastic Compute Cloud (Amazon EC2) occasion, authenticates the consumer with Amazon Cognito and obtains an authentication token. It then exchanges this Amazon Cognito identification token for an IAM Identification Heart token that grants the appliance permissions to entry Amazon Q.
4. The UI utility assumes an AWS Identity and Access Management (IAM) function and retrieves an AWS session token from the AWS Security Token Service (AWS STS). This session token is augmented with the IAM Identification Heart token, enabling the appliance to work together with Amazon Q. For extra details about the token change stream between IAM Identification Heart and the IdP, confer with How to develop a user-facing data application with IAM Identity Center and S3 Access Grants (Part 1) and Part 2.
5. Amazon Q makes use of the chat_sync API to hold out the dialog.
   1. The request makes use of the next necessary parameters:
      1. applicationId – The identifier of the Amazon Q utility linked to the Amazon Q dialog.
      2. userMessage – An end-user message in a dialog.
   2. Amazon Q returns the response as a JSON object (detailed within the Amazon Q documentation). The next are a couple of core attributes from the response payload:
      1. systemMessage – An AI-generated message in a dialog.
      2. sourceAttributions – The supply paperwork used to generate the dialog response. In Retrieval Augmentation Era (RAG), this all the time refers to a number of paperwork from enterprise knowledge bases that are indexed in Amazon Q.

Stipulations

For this walkthrough, you need to have the next conditions:

• An AWS account arrange.
• A VPC the place you’ll deploy the answer.
• An IAM role within the account with ample permissions to create the mandatory assets. In case you have administrator entry to the account, no further motion is required.
• An present, working Amazon Q utility, built-in with IAM Identification Heart. Should you haven’t set one up but, see Creating an Amazon Q application.
• Entry to IAM Identification Heart to create a buyer managed utility.
• An SSL certificates created and imported into AWS Certificate Manager (ACM). For extra particulars, confer with Importing a certificate. Should you don’t have a public SSL certificates, observe the steps within the subsequent part to generate a non-public certificates.

Generate a non-public certificates

If you have already got an SSL certificates, you possibly can skip this part.

You’ll obtain a warning out of your browser when accessing the UI in the event you didn’t present a customized SSL certificates when launching the AWS CloudFormation stack. The directions on this part present you how one can create a self-signed certificates. This isn’t beneficial for manufacturing use instances. You need to get hold of an SSL certificates that has been validated by a certificates authority, import it into ACM, and reference this when launching the CloudFormation stack. If you wish to proceed with the self-signed certificates (for improvement functions), you need to be capable to proceed previous the browser warning web page. With Chrome, you will note the message Your connection isn’t non-public error message (NET::ERR_CERT_AUTHORITY_INVALID), however by selecting Superior, you need to then see a hyperlink to proceed.

The next command generates a pattern self-signed certificates (for improvement functions) and uploads the certificates to ACM. You too can discover the script on the GitHub repo.

openssl req 
  -x509 -nodes -days 365 -sha256 
  -subj '/C=US/ST=Oregon/L=Portland/CN=sampleexample.com' 
  -newkey rsa:2048 -keyout key.pem -out cert.pem

aws acm import-certificate --certificate fileb://cert.pem --private-key fileb://key.pem   

Notice down the CertificateARN to make use of later whereas provisioning the CloudFormation template.

Provision assets with the CloudFormation template

The total supply of the answer on within the GitHub repository and is deployed with AWS CloudFormation.

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

This template creates separate IAM roles for the Software Load Balancer, Amazon Cognito, and the EC2 occasion. Moreover, it creates and configures these providers to run the end-to-end demonstration.

Present the next parameters for the stack:

• Stack identify – The identify of the CloudFormation stack (for instance, AmazonQ-UI-Demo).
• AuthName – A globally distinctive identify to assign to the Amazon Cognito consumer pool. Be certain that your area identify doesn’t embrace any reserved phrases, reminiscent of cognito, aws, or amazon.
• CertificateARN – The CertificateARN generated from the earlier step.
• IdcApplicationArn – That is the Amazon Useful resource Title (ARN) for the AWS Identification Heart buyer utility. Go away it clean on the primary run, as a result of it’s essential to create the Amazon Cognito consumer pool as a part of this stack. This may create an IAM Identity Center application with an Amazon Cognito user pool as the trusted token issuer.
• LatestAMIId – The ID of the AMI to make use of for the EC2 occasion. We recommend retaining the default worth.
• PublicSubnetIds – The ID of the general public subnet that can be utilized to deploy the EC2 occasion and the Software Load Balancer.
• QApplicationId – The present utility ID of Amazon Q.
• VPCId – The ID of the prevailing VPC that can be utilized to deploy the demo.

After the CloudFormation stack deploys efficiently, copy the next values on the stack’s Outputs tab:

• Viewers – Viewers to arrange the shopper utility in IAM Identification Heart
• RoleArn – ARN of the IAM function required to arrange the token change in IAM Identification Heart
• TrustedIssuerUrl – Endpoint of the trusted issuer to arrange IAM Identification Heart
• URL – The load balancer URL to entry the UI utility

Create an IAM Identification Heart utility

The actions described on this part are one-time actions. The purpose is to configure an utility in IAM Identification Heart to signify the appliance you’re constructing. Particularly, on this step, you configure IAM Identification Heart to have the ability to belief the identification tokens by which your utility will signify its authenticated customers. Full the next steps:

1. On the IAM Identification Heart console, add a brand new customized managed utility.
2. For Software sort, choose OAuth 2.0, then select Subsequent.
   
3. Enter an utility identify and outline.
4. Set Software visibility as Not seen, then select Subsequent.
5. On the Trusted token issuers tab, select Create trusted token issuer.
6. For Issuer URL, present the TrustedIssuerUrl you copied from the CloudFormation stack output.
7. Enter an issuer identify and hold the map attributes as E-mail.
8. Within the IAM Identification Heart utility authentication settings, choose the trusted token issuer created within the earlier step and add the Aud declare, offering the viewers you copied from the CloudFormation stack output, then select Subsequent.
9. On the Specify utility credentials tab, select Enter a number of IAM roles and supply the worth for RoleArn you copied from the CloudFormation stack output.
10. Evaluation all of the steps and create the appliance.
11. After the appliance is created, go to the appliance, select Assign customers and teams, and add the customers who may have entry to the UI utility.
12. On the Choose setup sort web page, select All functions for service with similar entry, select Amazon Q from the Providers listing, and select Belief functions.
13. After the IAM Identification Heart utility is created, copy the appliance ARN.
14. On the AWS CloudFormation console, replace the stack and supply the IAM Identification Heart utility ARN for the parameter IdcApplicationArn, then run the stack.
    
15. When the replace course of is full, go to the CloudFormation stack’s Outputs tab and duplicate the URL offered there.

Customized UI

The CloudFormation stack deploys and begins the Streamlit utility on an EC2 occasion on port 8080. To view the well being of the appliance working behind the Software Load Balancer, open the Amazon EC2 console and select Load Balancing beneath Goal teams within the navigation pane. For debugging functions, it’s also possible to connect with Amazon EC2 by way of Session Manager, a functionality of AWS Systems Manager.

To entry the customized UI, use the URL that you simply copied from the CloudFormation stack output. Select Enroll and use the identical electronic mail handle for the customers that had been registered in IAM Identification Heart.

After profitable authentication, you’re redirected to the customized UI. You possibly can improve it by implementing customized options like dealing with suggestions, utilizing your firms model colours and templates, and personalizing it to your particular use case.

Clear up

To keep away from future prices in your account, delete the assets you created on this walkthrough. The EC2 occasion with the customized UI will incur prices so long as the occasion is lively, so cease it while you’re completed.

1. On the CloudFormation console, within the navigation pane, select Stacks.
2. Choose the stack you launched (AmazonQ-UI-Demo), then select Delete.

Conclusion

On this put up, you discovered how one can combine a customized UI with Amazon Q Enterprise. Utilizing a customized UI tailor-made to your particular wants and necessities makes Amazon Q extra environment friendly and simple to make use of for what you are promoting. You possibly can embrace your organization branding and design, and have management and possession over the consumer expertise. For instance, you would introduce customized suggestions dealing with options.

The pattern customized UI for Amazon Q mentioned on this put up is offered as open supply—you need to use it as a place to begin to your personal answer, and assist enhance it by contributing bug fixes and new options utilizing GitHub pull requests. Discover the code, select Watch within the GitHub repo to obtain notifications about new releases, and examine again for the newest updates. We welcome your solutions for enhancements and new options.

For extra data on Amazon Q enterprise, confer with the Amazon Q Business Developer Guide.

Concerning the Authors

Ennio Emanuele Pastore is a Senior Architect on the AWS GenAI Labs workforce. He’s an fanatic of every part associated to new applied sciences which have a constructive influence on companies and common livelihood. He helps organizations in reaching particular enterprise outcomes by utilizing information and AI, and accelerating their AWS Cloud adoption journey.

Deba is a Senior Architect on the AWS GenAI Labs workforce. He has in depth expertise throughout massive information, information science, and IoT, throughout consulting and industrials. He’s an advocate of cloud-centered information and ML platforms and the worth they’ll drive for patrons throughout industries.

Joseph de Clerck is a senior Cloud Infrastructure Architect at AWS. He leverages his experience to assist enterprises clear up their enterprise challenges by successfully using AWS providers. His broad understanding of cloud applied sciences allows him to plan tailor-made options on matters reminiscent of analytics, safety, infrastructure, and automation.