❓ Webinar Q&A: Your Questions Answered on Extending Constellation UI with AI

Thank you to everyone who attended our recent webinar, “Extending Constellation UI with AI.” We were thrilled to see so much engagement and receive so many insightful questions. For those who missed it, you can watch the replay.

We’ve compiled all the questions and answers from the session for your reference.

Q&A Summary

The Q&A session was lively, with a strong focus on the practical aspects of using AI, particularly “vibe coding,” to develop custom DX components for Pega’s Constellation architecture. Key themes that emerged from your questions included:

  • Vibe Coding & AI Tools: Many of you were curious about the specifics of “vibe coding.” Questions covered which AI models (like Gemini, Claude, xAI) and tools (like Cursor, Replit) can be used, and whether Pega’s built-in AI Assistant in Infinity '26 supports this for DX components (it currently does not, but it’s under consideration).

  • Component Development & Best Practices: There was significant interest in the end-to-end process, from setting up the development harness and “skills” to managing dependencies, ensuring security (e.g., checking npm packages), and handling upgrades. We emphasized that while AI accelerates coding, manual review and robust testing remain critical for quality and security.

  • Integration with Pega Platform: You asked how these custom components and AI-driven processes integrate with the Pega platform. This included discussions on how translations are saved as localization bundles, how to extend OOTB components like Pulse, and the role of Pega APIs (PConnect, PCore) in this new paradigm.

  • Governance and Future Roadmap: Questions touched on governance, such as tracking custom components, managing performance, and ensuring future upgrade compatibility. We also discussed the future roadmap for AI-assisted development within Pega Infinity, highlighting that while tools are evolving, the fundamental principles of weighing the ROI of custom components versus OOTB functionality remain.

Below is the complete list of questions and their corresponding answers from the webinar.

Full Q&A Transcript

Here is the complete list of questions and answers from the webinar.

Question Answer
Is this feature available for UI toolkit application ? This is constellation only
The change(Edit) you made will be temporary or permanent. i belive this components saves the data. Once you push the translation back to Pega it is permanent (creates a new localization bundle in a new ruleset version)
translation happens for current screen only or it will be for following screens as well It will follow everywhere you go
“Translate & Push” was vibecoded with AI Assistant or other AI with Pega MCP ? live answered. it is vibecoded outside pega mcp. It was prior to releasing Pega MCP
Question related to translation : 1. Does it only works with 26 and above? 2. After translating with the new component can we still use the OOTB pega Translation wizard as well parallely ? 26 does have the localization switch, but we create a bundle which did not change from 25. And yes you still can as we use the same construct, just a different way how to get there
Will you share some of those guides and references to get us going? Favorite starting-from-scratch creating a DX component with vibe coding tutorial? definitively, this is the purpose of this webinar :slight_smile:
why having a instance created? for a translation. This is an OOTB construct which is easily connected. a case allows to process localization, and potentially allow approval steps
can we create a component using using vibe coding? You certainly can! And we will go through some more detail in the rest of this webinar.
vibe coding only inside pega infinity 26 code assistant AI or can we use external vibe coding tools like replit or cursor AI It is standard practice to vibe code custom DX components using external tools, and in fact throughout this webinar so far you have heard our panelists discuss using different external tools like Gemini and Claude Code.
“Translate & Push” Is this integrated with any AI tool? Integrated with Google translate, not with any other AI tool
there are two users both default language is english.
If user A change language to dutch and logoff and clear browser cache and login the application language English or dutch ?

without browser cache clear ?
depends on the operator locale. the component generates the localization bundle. in 26 it is just more clear which one you can select.
Pega 26 having AI Assistant. Will this vibe coding fecility available there to build the custome DX component ? Pega Infinity 26 currently does not offer specific support for vibe coding a custom DX component with its AI Assistant.
Hierarchy strcuture It seems you may have a question about “hierarchy vs. tree structure.” Could you please clarify with additional details?
landing rendered on page type data page can be build ? I assume you are referring to a landing page that renders content backed by a data page. You could do this by creating a custom widget component that accesses data from your data page and renders it appropriately. You would then use this component in a landing page of your choice.
If one wants to extend the OOTB component in pega constellation like Pulse can that happen ? To do this you would create a new widget component that implements Pulse as you would prefer it to function, and then use this widget in your landing pages and cases in place of the OOTB Pulse widget.
Is vibe coding allowed for on premise application which is upgraded to Pega 26? You will have to check with your organization’s policies, an on-premise deployment of Pega 26 will not dictate permission for vibe coding a custom component. Generally, if you are allowed to use agentic development tools today, I would expect you would also be able to obtain permission from your security team (if that is even necessary) to vibe code a custom DX component.
I would be fantastic if Pega platform could provide this kind of Translate component ootb…! I hope you sell it to the infinity team / PM thx! We build it to make it really contextual, as this was the real issue while translating. It generates the OOTB bundle, so potentially it can
DX Component can be maintained & documented? and how to track how many components my app have and their performance live answered. components are visible in Reuse library. Performance of component needs to be assured during development of each component
How do we ensure none of the npm packages have security issues like log4j? Any tools or receommendations available to ensure there are no loop hole? There are numerous options, but two popular choices would be asking the agents themselves to check for security concerns, as well as making use of the popular NPM package estlint-plugin-security.
Will the recording be shared to us who joined this webinar the replay will be up next week on the expert circles. Keep an eye out on Pega Forums and LinkedIn for our post once its up. It will be available next week on this site https://community.pega.com/event/extending-constellation-ui-ai
How we ensure that the code generated by agent is robust? This need manual review before pushing to production? Manual review is always needed to make sure all is in places and verify security aspects
Do we have a future roadmap to support vibe coding a custom DX component with AI Assistant in Pega Infinity? Our product and engineering teams are constantly evaluating ways to enhance the value proposition of the AI Assistant, and this is a topic of consideration although at this point in time there is no firm commitment to supporting it.
Are skills not what tasks the LLM can perform . Like artifact creation skills are instruction on how LLM can use TOOLS
if AI can generate a DX component for us, where developers will still add the most value – designing the component, integrating it with Pega, or validating what AI generates? All what you mentioned. Writing code is cheaper now, but this is not100% of what needs to happen to ship anything to production
did you used any LLM models for translations, if used which one, is it from opensource huggingface or claude or openAI and is it connected with MCP server ? we used xAI model in Cursor, not connected to any MCP (for this component)
Is this essentially a RAG architecture? If yes, how are you indexing the workspace content and ensuring the vector search retrieves the right context for the AI? This will depend on the agentic development tool you are using. For example, my understanding is that Claude Code is overwhelming based on filesystem search, while Cursor takes a hybrid approach that incorporates some RAG.
But what was explained that skills was for compass and lazy loading

Kamil Janeczek
03:31 PM
skills are instruction on how LLM can use TOOLS
can you elaborate on you questions?
Why can custom DX components only be authored in React, when our production app is Angular-only? Are there plans to let Angular SDK consume custom components without needing a parallel React implementation? dx components are to extend ootb Constellation portal which is React based. As of know I haven’t heard about plans to enable also Angular
skills for each component could be different right ? In theory yes, and this could make sense if you have are embedding a complex library (e.g. Esri ArcGIS for sophisticated geographic maps) and wish to provide supplemental guidance to the agent.
Is there any documentation available on vibe coding for custom DX components, particularly focused on efficient token usage? We will share some Pega Forums posts that run through different vibe coding experiences. We also have some videos running through this end to end.We also have an indepth overview, including token usage in our pipeline for publishing on Pega Forums
You mentioned that the harness constrains the model to prevent hallucinated APIs. How do you handle the opposite problem. like when the AI uses a valid Pega API correctly, but chooses the wrong architectural approach for the business requirement? What we do is adding references which it must follow. It is especially important to design it first, what Constellation constructs and than build
Is this Agent using Pega’s own LLM or we need to use our own Claude or Gemini models? Peter Bessman was using Gemini, Richard was using Claude. You can connect to the LLM of your choice and there many articles on Pega Forums talking about people’s use of different models
Will there be any recording session available after the call? The replay will be on https://community.pega.com/event/extending-constellation-ui-ai we will post to Pega Forums as well
Pega-EngineeringSandbox which Richard has shown is something we can re-use? This is an area for designated Pega employees to host “sandbox” projects to explore ideas without the pressure of an officially published codebase.
Just like we copied the UI gallery into the project folder for the model to get context, can we possibly use the code from the Constellation Pega Static and have it copied into the Project folder? this is Pega propriety code I believe
The custom component created using AI would be future upgrade compliant? How to ensure that? Any constraints or guardrails already part of the Agent Harness for that? As with any piece of software, it is useful to have a regression test suite in place to ensure continued functionality after an upgrade. Anecdotally, my experience has been that custom DX components improve the reliability of customizations across upgrades compared to the baseline established in traditional UI applications.
Yes but its transmitted to the browser and available in th e browser cache. Can be tapped using dev tools? If you are asking about inspecting the contents of the Redux store, I would suggest looking into the Redux DevTools plugin for your browser.
Do we have any single place where all the required information on Pcore , Pconnect , All V2 APIs are present, I mean information which can be used by AI Grab it from Pega Docs + supplement with you “tribal knowledge” collected on previous projects
Can I create multiple skills for the entire application, rather than for a single component—for example, component validation and speaker-based interactions? If you are interested in agentic configuration of Pega applications using external tools, I would suggest looking at the Infinity AI plugins on GitHub: https://github.com/pegasystems/infinity-ai-plugins
how we merge component based and application based skills in one prompt typicall skills are global (specific to user) or project level. LLM will choose specific skill basing on its description
Do we have a academy mission on this? It will be useful to have one. Session is bit faster for me and need to watch the replay We currently do not have an Academy mission on vibe coding. One of the reasons we are havin this webinar! The replay will be available for you to watch at your own pace.
all these skill files available in Github for us/ The github provided ones are: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/skills/pega-dx-component-builder/SKILL.md and https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/agents/pega-dx-component-builder.agent.md ones Yash are showing are his personal implementation, not available on github
could you provide some link between what Richard was showing for building a vibe coded component by just copying skills from the git repo and the details Yash is showing in terms of building all skills and other technical details. When to build all these skills like Yash is showing & when to rely on skills available on the pega git repo We provide a starting point on our github constellation-ui-gallery/.github/agents/pega-dx-component-builder.agent.md at master · pegasystems/constellation-ui-gallery · GitHub and https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/skills/pega-dx-component-builder/SKILL.mdHowever, the model Yash is showing goes beyond this starting point, a far more specialised harness
With this vibe coding approach , all guardrail checks, accessibility checks, etc.. Is pega now recommending much more confidently that ux leads and lsa can ask more confidently to client to go with such custom dx components if it required and future upgrades will be smooth as well because it went through extensive unit tests, guardrail checks, etc.. In my opinion, while vibe coding lowers the TCO of custom components, it will still by definition be higher than sticking with the OOTB experience. So I think the overall value equation has not ultimately changed by much: one still has to weigh the TCO and ROI of OOTB vs. custom and find the balance.
Thanks.. It would be greatly help us if we these skill also available in GitHub. See here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/agents/pega-dx-component-builder.agent.md here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/skills/pega-dx-component-builder/SKILL.md
will these scripts prompts be shared for the sill/md file? See here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/agents/pega-dx-component-builder.agent.md and here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/skills/pega-dx-component-builder/SKILL.md
If we pass more context to the AI then more tokens will consumed right correct, and less quality response as well
Is this webinar is going to available somewhere to watch it again ? https://community.pega.com/event/extending-constellation-ui-ai will have the replay next week
Do we need to create different SKILL.md file each component that we are trying to build. It seems to be lots of work. Or is it one time and we need to make small changes for different component scenario You can start with the skills already available (I will share the links below), tweak them to meet your needs, and reuse them across multiple component development projects.See here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/agents/pega-dx-component-builder.agent.md here: https://github.com/pegasystems/constellation-ui-gallery/blob/master/.github/skills/pega-dx-component-builder/SKILL.md
Can we raise pull request against existing components to contribute? Yes! While there are no guarantees that any given PR will be merged, the Constellation UI gallery is not closed off to contributions.
Does Pega have roadmap to do this vibe coding for component creation inside AI Assistant in infinity studio in future release ? Our product and engineering teams are constantly evaluating ways to enhance the value proposition of the AI Assistant, and this is a topic of consideration although at this point in time there is no firm commitment to supporting it.
Can such SKILL.md or README.md s also be used directly inside pega AI Assistant? with the described “use this skill when” logic without pasting all of the .md files again at the start of every individual new Pega 26 AI Assistant chat that you open? Pega Infinity 26 currently does not offer specific support for vibe coding a custom DX component with its AI Assistant.