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 also 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 info repositories and enterprise programs. If you chat with Amazon Q, it gives fast, related info and recommendation to assist streamline duties, pace up decision-making, and spark creativity and innovation at work. For extra info, see Amazon Q Enterprise, now typically accessible, helps increase workforce productiveness with generative AI.

This publish demonstrates tips on how to construct a customized UI for Amazon Q Enterprise. The custom-made UI means that you can 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 means of an interface customized to your use case.

Answer overview

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

The workflow consists of the next steps:

1. The person accesses the chatbot utility, which is hosted behind an Software Load Balancer.
2. After the person logs in, they’re redirected to the Amazon Cognito login web page for authentication.
   • This answer makes use of an Amazon Cognito person pool as an OAuth-compatible identification supplier (IdP), which is required to be able to trade a token with AWS IAM Identification Middle 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 Utilizing purposes with a trusted token issuer. If you have already got an OAuth-compatible IdP, you should use it as a substitute of setting an Amazon Cognito person pool.
   • Provisioning native customers within the person pool and reconciling them with IAM Identification Middle will be error-prone. You may streamline the mixing of IAM Identification Middle customers into the person pool by utilizing a federated IdP and making a second customized utility (SAML) in IAM Identification Middle. For directions, seek advice from 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 person with Amazon Cognito and obtains an authentication token. It then exchanges this Amazon Cognito identification token for an IAM Identification Middle token that grants the applying permissions to entry Amazon Q.
4. The UI utility assumes an AWS Identification and Entry Administration (IAM) function and retrieves an AWS session token from the AWS Safety Token Service (AWS STS). This session token is augmented with the IAM Identification Middle token, enabling the applying to work together with Amazon Q. For extra details about the token trade movement between IAM Identification Middle and the IdP, seek advice from How you can develop a user-facing information utility with IAM Identification Middle and S3 Entry Grants (Half 1) and Half 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 just a few 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 at all times refers to a number of paperwork from enterprise information bases which are listed in Amazon Q.

Conditions

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

• An AWS account arrange.
• A VPC the place you’ll deploy the answer.
• An IAM function within the account with ample permissions to create the mandatory sources. When you have administrator entry to the account, no further motion is required.
• An current, working Amazon Q utility, built-in with IAM Identification Middle. In case you haven’t set one up but, see Creating an Amazon Q utility.
• Entry to IAM Identification Middle to create a buyer managed utility.
• An SSL certificates created and imported into AWS Certificates Supervisor (ACM). For extra particulars, seek advice from Importing a certificates. In case you don’t have a public SSL certificates, observe the steps within the subsequent part to generate a personal certificates.

Generate a personal certificates

If you have already got an SSL certificates, you may 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 tips on how to create a self-signed certificates. This isn’t beneficial for manufacturing use circumstances. It’s best to acquire 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 just 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. It’s also possible to 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   

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

Provision sources with the CloudFormation template

The complete 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 companies 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 person pool. Make certain your area identify doesn’t embrace any reserved phrases, comparable to 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 Middle buyer utility. Go away it clean on the primary run, as a result of you have to create the Amazon Cognito person pool as a part of this stack. It will create an IAM Identification Middle utility with an Amazon Cognito person pool because the trusted token issuer.
• LatestAMIId – The ID of the AMI to make use of for the EC2 occasion. We advise maintaining 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 present 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 client utility in IAM Identification Middle
• RoleArn – ARN of the IAM function required to arrange the token trade in IAM Identification Middle
• TrustedIssuerUrl – Endpoint of the trusted issuer to arrange IAM Identification Middle
• URL – The load balancer URL to entry the UI utility

Create an IAM Identification Middle utility

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

1. On the IAM Identification Middle console, add a brand new customized managed utility.
2. For Software kind, 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 Electronic mail.
8. Within the IAM Identification Middle 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. Evaluate all of the steps and create the applying.
11. After the applying is created, go to the applying, select Assign customers and teams, and add the customers who could have entry to the UI utility.
12. On the Choose setup kind web page, select All purposes for service with identical entry, select Amazon Q from the Providers checklist, and select Belief purposes.
13. After the IAM Identification Middle utility is created, copy the applying ARN.
14. On the AWS CloudFormation console, replace the stack and supply the IAM Identification Middle 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 replica the URL supplied 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 applying 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, you can too hook up with Amazon EC2 by means of Session Supervisor, a functionality of AWS Techniques Supervisor.

To entry the customized UI, use the URL that you simply copied from the CloudFormation stack output. Select Join and use the identical e-mail handle for the customers that have been registered in IAM Identification Middle.

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

Clear up

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

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 publish, you realized tips on how to 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 may embrace your organization branding and design, and have management and possession over the person expertise. For instance, you may introduce customized suggestions dealing with options.

The pattern customized UI for Amazon Q mentioned on this publish is supplied as open supply—you should 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 info on Amazon Q enterprise, seek advice from the Amazon Q Enterprise Developer Information.

Concerning the Authors

Ennio Emanuele Pastore is a Senior Architect on the AWS GenAI Labs crew. He’s an fanatic of every thing associated to new applied sciences which have a constructive impression on companies and normal 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 crew. He has in depth expertise throughout large 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 purchasers 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 companies. His broad understanding of cloud applied sciences allows him to plot tailor-made options on matters comparable to analytics, safety, infrastructure, and automation.