🎞️ Webinar Replay: Extending Constellation UI with AI

User Experience
1

Hosts & Presenters: @MarcCheong (Host), @RonaldDeLignie (fusionAIx), @peter_bessman (Pega), @Andi_Mutlow (Pega), @RichardMarsot (Pega) and @Yashaswi_Singh (fusionAIx)
Presented by: Pega AI Expert Circle & User Experience Expert Circle

:play_button: Watch the full replay (90 minutes) →

Overview

This joint event brought together experts from Pega’s AI and User Experience Expert Circles to demonstrate how generative AI and “vibe coding” can be applied to build, extend, and convert Constellation DX components and SDK applications.

The session covers real-world case studies, dev vs. non-dev perspectives, agentic harnesses, context window management, and design system discussions.

Section 1: Introduction, Housekeeping & Audience Poll

Key Highlights

  • Joint Community Event: The first joint webinar hosted collaboratively by the AI Expert Circle and the User Experience Expert Circle.
  • Interactive Slido Benchmark:
    • Over 270–300 attendees participated in live polling regarding their experience with DX components, SDK implementations, and vibe coding.
    • Over 70% of attendees indicated they had never attempted building components or vibe coding, demonstrating high demand for practical, hands-on guidance.

Section 2: Real-World Demonstration — AI-Created Translation Module

Presenter: @RonaldDeLignie (fusionAIx)

RONALD THUMB

:play_button: Watch this section (8 minutes) →

Key Highlights

  • Dynamic Translation Component: A vibe-coded utility module built to translate Pega UI content on the fly between English, German, and Dutch.
  • Technical Integration:
    • Uses Google Translate APIs and open-source NPM packages.
    • Interacts with Pega’s PCOR and PConnect APIs to read page elements and update Redux stores directly.
    • Allows live inline overrides by end-users and pushes updated translation packages directly into a backend Pega case type.
  • Design-Time Integration:
    • Configured within the default app shell utils view metadata as a child component with registered dependencies.
  • Efficiency Impact:
    • Reduced component development time from 3–4 days to mere minutes.

Section 3: Developer Perspectives — Experienced Developer vs. Non-Developer Vibe Coding

Presenters: @peter_bessman (Pega), @Andi_Mutlow (Pega)

PETER AND ANDI THUMB

:play_button: Watch this section (6 minutes) →

Key Highlights

  • The Experienced Developer View (Peter Bessman):
    • Created a Conway’s Game of Life component inside Pega using Gemini in 10–15 minutes.
    • Takeaway: Vibe coding acts as a major productivity multiplier for experienced engineers. However, for components that alter business data, strict testing and agentic infrastructure are necessary to keep LLMs on track.
  • The Novice Developer View (Andy Mutlow):
    • Built a fully functional React component in ~20 minutes using Claude, despite having zero prior React, linting, or NPM experience.
    • Encapsulated his learnings into a reusable Claude/GitHub skill for colleagues to save token spend.
    • Takeaway: AI lowers technical barriers, allowing non-traditional developers to prototype UI extensions effectively.

Section 4: Vibe Coding DX Components — Agentic Harness & Best Practices

Presenter: @RichardMarsot (Pega)

RICHARD THUMB

:play_button: Watch this section (27 minutes) →

Key Highlights

  • Constellation DX Architecture:
    • Modern bundling, automated CI/CD pipelines, code scanning, and isolated testing using Storybook outside the Pega platform.
  • The Agentic Harness Concept:
    • Maintains a human-in-the-loop workflow: Planning → Analysis → Code Generation → Automated Review/Testing → Iteration.
    • Integrates guardrails: accessibility testing (axe-core), security/XSS checks, code quality linting, and theme tokens.
  • Managing Context Windows & Tokens:
    • Explains why dumping monolithic guides (guide.md) leads to token waste and degraded LLM accuracy.
    • Recommended approach: Use Skills (lazy-loaded compass files) and Multi-Root Workspaces (indexing reference repositories like the Pega UI Gallery).
  • Live Demo:
    • Triggered an automated GitHub Copilot agent pull request to create an interactive Financial Compound Growth Calculator and a Speech-to-Text input component.
    • Showcased automated accessibility checks catching errors in the pull request before merging.

Section 5: Deep Dive — Smart Vibe Coding & SDK Design System Conversion

Presenter: @Yashaswi_Singh (fusionAIx)

YASH THUMB

:play_button: Watch this section (32 minutes) →

Key Highlights

  • Generic Vibe Coding vs. Smart Vibe Coding:
    • Generic Vibe Coding: Un-grounded prompts lead to hallucinations (e.g., non-existent @pega/pcore packages, invalid event props).
    • Smart Vibe Coding: Combines Generic Knowledge + Pega Architecture Knowledge + Project/Environment Context (Infinity version, API definitions, conventions).
  • The 4 Pillars of a Grounding Harness:

    1. Grounding: Task instructions and clear expectations.

    2. Skills: Specialized, modular .md files loaded on demand.

    3. Guardrails: Standards for code quality, design tokens, and accessibility.

    4. Validation: Automated and manual verification of outputs.

  • SDK Design System Conversion Demo:
    • Demonstrated converting Pega React SDK components built on Material UI (MUI) into GOV.UK Design System compliant components.
    • Preserved Pega SDK data binding, state management, and PConnect contracts while applying GOV.UK visual patterns, helper hints, and accessibility rules.

Section 6: Live Demo Review, Q&A & Community Resources

Key Highlights

  • Demo Review:
    • Verified the generated Speech-to-Text field component live in Storybook and VS Code, demonstrating voice recording capability mapped directly to Pega form fields.
  • Community Q&A & Resources:
    • Addressed questions regarding skill repository access, type definitions, and code minification.
    • Highlighted the Constellation 101 Series on Pega Forums and a 4-part video series on AI-assisted UI development.
  • Upcoming Webinars:
    • Model Context Protocol (MCP) & Pega Infinity 26 (AI Expert Circle — Sept 2)
    • MyPega Cloud Features (As a Service Expert Circle)
    • DevOps, Blueprinting & AI Test Automation

Related References

2 Likes