Erstellen Sie eine benutzerdefinierte Benutzeroberfläche für Amazon Q Business, um die Produktivität Ihrer Mitarbeiter mit generativer KI zu steigern

In diesem Beitrag wird gezeigt, wie Sie eine benutzerdefinierte Benutzeroberfläche für Amazon Q Business erstellen. Über die angepasste Benutzeroberfläche können Sie spezielle Funktionen wie den Umgang mit Feedback implementieren

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.

Diese exemplarische Vorgehensweise zeigt, wie Sie eine benutzerdefinierte Benutzeroberfläche für Amazon Q Business erstellen. Die angepasste Benutzeroberfläche ermöglicht Ihnen die Implementierung spezieller Funktionen wie die Bearbeitung von Feedback, die Verwendung von Markenfarben und -vorlagen des Unternehmens sowie die Verwendung eines benutzerdefinierten Logins. Es ermöglicht auch die Kommunikation mit Amazon Q über eine auf Ihren Anwendungsfall zugeschnittene Schnittstelle.

Prerequisites

Voraussetzungen

For this walkthrough, you should have the following prerequisites:

Für diese exemplarische Vorgehensweise sollten Sie die folgenden Voraussetzungen erfüllen:

An active AWS account. If you do not have an AWS account, create one at https://aws.amazon.com.

Ein aktives AWS-Konto. Wenn Sie kein AWS-Konto haben, erstellen Sie eines unter https://aws.amazon.com.

An enterprise knowledge base with relevant data and expertise. For more information, see Creating an enterprise knowledge base.

Eine Unternehmenswissensdatenbank mit relevanten Daten und Fachwissen. Weitere Informationen finden Sie unter Erstellen einer Unternehmenswissensdatenbank.

An Amazon Q Business application. For more information, see Creating an Amazon Q Business application.

Eine Amazon Q Business-Anwendung. Weitere Informationen finden Sie unter Erstellen einer Amazon Q Business-Anwendung.

Basic knowledge of HTML, CSS, JavaScript, and Python.

Grundkenntnisse in HTML, CSS, JavaScript und Python.

Generate a private certificate

Generieren Sie ein privates Zertifikat

If you already have an SSL certificate, you can skip this section.

Wenn Sie bereits über ein SSL-Zertifikat verfügen, können Sie diesen Abschnitt überspringen.

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.

Wenn Sie beim Starten des AWS CloudFormation-Stacks kein benutzerdefiniertes SSL-Zertifikat angegeben haben, erhalten Sie beim Zugriff auf die Benutzeroberfläche eine Warnung von Ihrem Browser. Die Anweisungen in diesem Abschnitt zeigen Ihnen, wie Sie ein selbstsigniertes Zertifikat erstellen. Dies wird für Produktionsanwendungsfälle nicht empfohlen. Sie sollten ein SSL-Zertifikat erhalten, das von einer Zertifizierungsstelle validiert wurde, es in ACM importieren und beim Starten des CloudFormation-Stacks darauf verweisen. Wenn Sie mit dem selbstsignierten Zertifikat fortfahren möchten (zu Entwicklungszwecken), sollten Sie über die Browser-Warnseite hinaus fortfahren können. Bei Chrome wird die Fehlermeldung „Ihre Verbindung ist nicht privat“ (NET::ERR_CERT_AUTHORITY_INVALID) angezeigt. Wenn Sie jedoch „Erweitert“ auswählen, sollte ein Link zum Fortfahren angezeigt werden.

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.

Der folgende Befehl generiert ein selbstsigniertes Beispielzertifikat (für Entwicklungszwecke) und lädt das Zertifikat auf ACM hoch. Sie finden das Skript auch im GitHub-Repo.

Note down the CertificateARN to use later while provisioning the CloudFormation template.

Notieren Sie sich den CertificateARN, um ihn später bei der Bereitstellung der CloudFormation-Vorlage zu verwenden.

Provision resources with the CloudFormation template

Stellen Sie Ressourcen mit der CloudFormation-Vorlage bereit

The full source of the solution on in the GitHub repository and is deployed with AWS CloudFormation.

Die vollständige Quelle der Lösung befindet sich im GitHub-Repository und wird mit AWS CloudFormation bereitgestellt.

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

Wählen Sie „Stack starten“, um einen CloudFormation-Stack in Ihrem Konto zu starten und die Vorlage bereitzustellen:

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.

Diese Vorlage erstellt separate IAM-Rollen für den Application Load Balancer, Amazon Cognito und die EC2-Instanz. Darüber hinaus werden diese Dienste erstellt und konfiguriert, um die End-to-End-Demonstration auszuführen.

Provide the following parameters for the stack:

Geben Sie die folgenden Parameter für den Stapel an:

Create an IAM Identity Center application

Erstellen Sie eine IAM Identity Center-Anwendung

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:

Bei den in diesem Abschnitt beschriebenen Aktionen handelt es sich um einmalige Aktionen. Das Ziel besteht darin, eine Anwendung im IAM Identity Center so zu konfigurieren, dass sie die von Ihnen erstellte Anwendung darstellt. Konkret konfigurieren Sie in diesem Schritt IAM Identity Center so, dass es den Identitätstoken vertrauen kann, mit denen Ihre Anwendung ihre authentifizierten Benutzer darstellt. Führen Sie die folgenden Schritte aus:

Custom UI

Benutzerdefinierte Benutzeroberfläche

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.

Der CloudFormation-Stack stellt die Streamlit-Anwendung auf einer EC2-Instanz an Port 8080 bereit und startet sie. Um den Zustand der Anwendung anzuzeigen, die hinter dem Application Load Balancer ausgeführt wird, öffnen Sie die Amazon EC2-Konsole und wählen Sie im Navigationsbereich unter „Zielgruppen“ die Option „Lastausgleich“ aus. Zu Debugzwecken können Sie auch über den Session Manager, eine Funktion von AWS Systems Manager, eine Verbindung zu Amazon EC2 herstellen.

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.

Um auf die benutzerdefinierte Benutzeroberfläche zuzugreifen, verwenden Sie die URL, die Sie aus der CloudFormation-Stack-Ausgabe kopiert haben. Wählen Sie „Registrieren“ und verwenden Sie dieselbe E-Mail-Adresse für die Benutzer, die im IAM Identity Center registriert wurden.

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.

Nach erfolgreicher Authentifizierung werden Sie zur benutzerdefinierten Benutzeroberfläche weitergeleitet. Sie können es verbessern, indem Sie benutzerdefinierte Funktionen wie die Bearbeitung von Feedback implementieren, die Markenfarben und Vorlagen Ihres Unternehmens verwenden und es an Ihren spezifischen Anwendungsfall anpassen.

Clean up

Aufräumen

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.

Um zukünftige Belastungen Ihres Kontos zu vermeiden, löschen Sie die Ressourcen, die Sie in dieser exemplarischen Vorgehensweise erstellt haben. Für die EC2-Instanz mit der benutzerdefinierten Benutzeroberfläche fallen Gebühren an, solange die Instanz aktiv ist. Stoppen Sie sie also, wenn Sie fertig sind.

Conclusion

Abschluss

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.

In diesem Beitrag haben Sie erfahren, wie Sie eine benutzerdefinierte Benutzeroberfläche in Amazon Q Business integrieren. Durch die Verwendung einer benutzerdefinierten Benutzeroberfläche, die auf Ihre spezifischen Bedürfnisse und Anforderungen zugeschnitten ist, ist die Nutzung von Amazon Q für Ihr Unternehmen effizienter und benutzerfreundlicher. Sie können das Branding und Design Ihres Unternehmens einbeziehen und haben die Kontrolle und Verantwortung über das Benutzererlebnis. Sie könnten beispielsweise benutzerdefinierte Funktionen zur Feedback-Verarbeitung einführen.

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.

Die in diesem Beitrag besprochene Beispiel-Benutzeroberfläche für Amazon Q wird als Open Source bereitgestellt. Sie können sie als Ausgangspunkt für Ihre eigene Lösung verwenden und zur Verbesserung beitragen, indem Sie mithilfe von GitHub-Pull-Requests Fehlerbehebungen und neue Funktionen beisteuern. Erkunden Sie den Code, wählen Sie „Beobachten“ im GitHub-Repository aus, um Benachrichtigungen über neue Versionen zu erhalten, und schauen Sie noch einmal nach den neuesten Updates. Wir freuen uns über Ihre Vorschläge für Verbesserungen und neue Funktionen.

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

Weitere Informationen zu Amazon Q Business finden Sie im Amazon Q Business Developer Guide.