This is the first of a multi-part series in using GenAI tools to extend the Pega Constellation UI. It is intentionally heavy on background and light on detail.
A key part of the Constellation architecture is its flexibility and support for expanded UX over and above that provided by the out-of-the-box Constellation design system. One of the most accessible of these is the ability to create custom Constellation DX Components, which allow you to add your own controls to accomplish specific tasks within the Pega UI. Whether providing a custom experience for selecting products, a new way to enter addresses or simply displaying a numeric value in a novel fashion – DX Components are a powerful way to extend your UX in a guardrail compliant fashion that maintains a Pega low-code experience for your system architects.
Of course, actually writing a DX Component is not low-code. It requires knowledge of a host of new tooling, concepts, and – critically – the ability to write React code and understand front-end Javascript programming. For more advanced components there is also an entire Javascript SDK to get to grips with, in the form of the PCore and PConnect APIs.
This is where my story starts. A long time ago, admittedly not very far away geographically, I was a developer. C, C++, GNU compilers, Visual IDEs – these were my playgrounds. But the intervening three decades have dulled my coding senses to the point that I struggle to even fire up a development environment, let alone start a coding project from scratch. And so when faced with the challenge of creating a DX Component – well, let’s say it was a steeper learning curve than I would have liked. But I persevered, and I eventually was successful in creating a simple DX Component, with a huge sense of accomplishment. But the next steps – calling APIs, introducing real-time callbacks and dynamically-updating controls? That was a bridge, and an investment in time, too far.
So when I started hearing about how anybody could write applications using AI, and how Claude Code was going to make software developers 100x more productive, I was intrigued. Specifically – could I get AI write DX Components for me? Could it understand the DX framework, the APIs, the Component Builder toolset? Could it turn me, a long-time lapsed developer, into a born-again vibe coder?
The answer, as it turns out, is an emphatic “yes”.
I leave you, doubtless giddy with anticipation, with two simple examples. Firstly, a weather widget, which queries an online weather service and generates a graphical forecast for the next five days. The prompt I used for this was brief: “Create a Pega Constellation DX Component that shows graphically the weather forecast for the next 5 days. The component should take as input a UK postcode.” Nothing more than that. The results were immediate and…compelling.
And the second was a little more complex: “Create a Pega Constellation DX Component that takes real-time keystroke-by-keystroke input from a text field and performs a UK address lookup, displaying a list of addresses that match what has already been typed in and allows me to select and display a single address”. Again, the output was breathtaking – right first time and 100% functional.
Next time, I’ll go into how I set things up to achieve this and will explore how far we can go with it. Until then – comment below:
• Have you tried using AI tools to extend Pega? How did it go?
• How do you see AI affecting your implementations?
• What would you ask AI to create for you?
Enjoyed this article?
See suggested articles from our Constellation 101 series and view all our Knowledge Shares from our User Experience Expert Circle.
