The Constellation UI is one of the core component of the Center-out™ business architecture and provides a clear separation of concern between the business logic layer and the presentation layer using the Constellation DX API. While the Constellation design system provides an extensive set of components and functionality, customers can decide to extend the OOB experience by using DX Components or SDKs.

DX components are expected to be used to extend the core functionality for simple use cases - for example adding a new template or a new simple widget that would be composed using some of the core presentational components of the Constellation component library. DX component requires a strong front-end expertise and understand of the traditional web tools like npm and webpack to build the component and ReactJS as the main framework for rendering the UI. For more complex widgets where some specific back end is required and complex interactions are needed (like a chat UI, a completely self-contained UI...), the recommendation is to host them externally as a standalone micro-front-end and to inject them into the Constellation UI using either a web component or an iframe approach. For more advanced use cases where using a different presentation layer is required, using the SDK approach is recommended.

The purpose of this document is to showcase an example of a DX Component using Chat GPT. The Chat GPT UI is built using a simple ReactJS application to generate the front-end UI and a nodeJS back-end server to drive the interaction with a generative AI endpoint like OpenAI or Azure. Is it assumed that such an application would be self-managed and shared across different applications.

Note: The GenAI application used in this demo is not attached to this article since this is not the goal of this article but you can find several examples of such application on the web such as https://github.com/Aklilu-Mandefro/chatbot-using-react-nodejs-chatgpt

The DX component is built as a widget and uses an iframe to load the micro front-end Chat GPT application - as such it is very lightweight and easy to maintained - Changes done to this UI could be handled and managed externally without dependency with your Pega application.

Here is a complete demo of the functionality

You can find attached the source code of the Constellation DX Component.

You can also watch the following videos on how to build a DX component:

• https://support.pega.com/discussion/cosmos-dx-component-react-na%C3%AFve
• https://support.pega.com/discussion/video-steps-create-cosmos-dx-component

Technical documentation

• https://docs.pega.com/bundle/constellation-dx-components-88/page/constellation-dx-components/custom-components/lifecycle-dx-cosmos-components.html