Welcome to Constellation 101! If you have been looking for ways to streamline your custom component development and embrace modern AI tools without sacrificing code quality or governance, you are in the right place.
In this four-part video series, @oveni explores how to take an “AI-first” approach to extending the Constellation UI. Using the Gov UK Design System (GDS) as our visual foundation, we demonstrate how AI agents can help you build, test, review, and consume custom DX override components using the Pega React SDK.
What You Will Learn Overall
By the end of this series, you will understand how to set up an end-to-end development pipeline supercharged by AI. You will learn how to:
- Establish Agentic Governance: Put guardrails in place so AI writes accessible, compliant, and performant code.
- Rapidly Generate Components: Use simple natural language prompts to create complex override components, complete with unit tests and Storybook integrations.
- Automate the Review Process: Leverage AI to write Pull Request (PR) descriptions and use visual regression testing tools to ensure quality.
- Consume Local Packages: Easily publish your new component library and integrate it directly into your Pega applications.
Let’s break down exactly what is covered in each step of the journey.
Video 1: Building a Foundation with Agentic Governance
It is easy to open a code editor and ask an AI to “build a component.” But without the right structures in place, how do you guarantee the output is accessible, performant, and aligned with modern web standards?
Watch the video (13 minutes) →
In the first video, we tackle Agentic Governance. You will learn how to ensure quality via a framework that uses three key elements:
-
Core Principles: A “global constitution” directs the AI agent, establishing that accessibility is a fundamental precondition for any code it generates.
-
Modern Web Guidance: An agent from the Google Chrome dev team provides up-to-date best practices, ensuring the use of modern, performant web technologies.
-
Custom Skills: Project-specific skills guide the AI in performing complex tasks, such as overriding an out-of-the-box Pega component with a new design system style.
By setting up this structure, developers can confidently use AI to build high-quality, accessible, and efficient custom DX components from the start.
Video 2: Creating Override Components in Seconds
With our safety nets and governance in place, it is time to build! In video two, we put the framework to the test by creating a custom GDS email component override.
Watch the video (12 minutes) →
In this video, you will see how:
-
Use a simple, one-line prompt to command an AI agent to override an out-of-the-box email component.
-
Watch the AI generate all necessary code, including component logic, Storybook stories for isolated testing, and unit tests.
-
Rely on pre-configured “skills” and a “constitution” to ensure the AI builds fully accessible and performant components that adhere to specific design standards.
-
Verify the newly created component visually in Storybook and confirm that all automated tests have passed.
Video 3: Review, Merge, and Publish
Writing the code is only half the battle; the other half is getting it reviewed and merged. Video three shows how we can automate the administrative and quality assurance sides of the development lifecycle.
Watch the video (16 minutes) →
You will learn how to:
-
Using an AI agent to automatically generate detailed and formatted pull request (PR) descriptions, saving time and standardizing documentation.
-
Leveraging automated GitHub actions to run unit tests and publish the component to Chromatic for visual and accessibility validation.
-
Conducting a collaborative review process where stakeholders can visually inspect the new component in Storybook and approve changes.
-
Merging the approved component into the main branch and publishing the updated library for consumption in other applications.
Video 4: Updating the Consuming Application
In the final stretch, we take the component we just built, merged, and published, and we actually use it inside a live Constellation application.
Watch the video (7 minutes) →
This video covers how to:
- Using an AI agent to automatically generate detailed and formatted pull request (PR) descriptions, saving time and standardizing documentation.
- Leveraging automated GitHub actions to run unit tests and publish the component to Chromatic for visual and accessibility validation.
- Conducting a collaborative review process where stakeholders can visually inspect the new component in Storybook and approve changes.
- Merging the approved component into the main branch and publishing the updated library for consumption in other applications.
Ready to get started? Dive into the videos to see these concepts in action, and start supercharging your Constellation UI development with AI!