I’m excited to share an AI-powered automation that guides developers through the complete lifecycle of building custom Pega Constellation DX components — from machine setup through publishing to Pega and pushing to GitHub
Watch the video (11 minutes) →
The Problem
Building a custom Constellation DX component manually requires deep expertise — setting up the DX Component Builder, writing TypeScript following Pega’s specific conventions, configuring Storybook, authenticating, and publishing.
The Solution — How It Works
The automation uses Claude Code — Anthropic’s AI coding assistant — guided by a set of structured markdown files called CLAUDE.md guide files. These files encode every step of the DX component lifecycle so that any developer, regardless of their Pega DX expertise, can build and publish a component by simply describing what they want.
The CLAUDE.md Approach
A single CLAUDE.md entry point is read by Claude Code at the start of every session. It auto-detects whether the project needs full setup or is ready for daily use — loading only the relevant guide files for that session. This keeps AI token usage low and responses fast.
The docs/ folder contains eight specialized guide files — one for each phase of the workflow:
| File | Purpose |
|---|---|
| setup-machine.md | Checks and installs Node.js, Git, Claude Code automatically |
| init.md | Project initialization and Pega environment configuration |
| build-component.md | Component creation from description, image, or Figma design |
| test.md | Storybook mocking and live preview |
| publish.md | Lint fixing, build, authenticate, and publish to Pega |
| github.md | Push component to GitHub with documentation |
| component-checklist.md | Official Pega delivery checklist verified before every publish |
| upgrade.md | Safely upgrade the DX Component Builder version |
Figma Integration
When a developer shares a Figma frame URL the automation:
- Calls the Figma Images API using a temporary Personal Access Token provided by the designer
- Renders the specific frame as a PNG
- Reads it visually — exactly like reading a screenshot
- Generates component code that faithfully reflects the design
No manual design-to-code translation. No Figma license required for developers. The designer revokes the token after the build — no permanent access needed.
Component Generation
Every component is scaffolded using npm run create — never created manually — ensuring the correct folder structure and config.json schema every time. The automation generates all required files following the official Pega Constellation UI Gallery delivery standards:
index.tsx— component logic with correct getPConnect typing and CSP-safe create-nonce importconfig.json— updated with label, description, and propsmock.ts— realistic sample data for Storybookdemo.stories.tsx— stories for all visual statesdemo.test.tsx— Jest unit tests covering key behaviordocs.mdx— documentation rendered as Docs tab in StorybookREADME.md— component documentation visible on GitHub
Automated Quality Gate
Before any publish commands are given, the automation runs a full quality cycle silently:
npm run fix— auto-fixes all lint and formatting issuesnpm run lint— verifies zero errors remainnpm run test— runs Jest tests and fixes failures- Component delivery checklist — verifies all Pega standards are met
Only after all checks pass does the developer get the publish commands.
GitHub Integration
After publishing to Pega the automation optionally pushes the component to a configured GitHub repository:
- Verifies GitHub login via VS Code’s built-in authentication — no Personal Access Token needed
- Creates a branch following the
dx/ComponentNameconvention - Commits only the component folder with full documentation
- Updates the main repo README with the new component entry
- Prints a PR link for the designated reviewer to approve and merge
Requirements: VS Code installed on your machine, a Pega Infinity environment with an unlocked ruleset, and an Anthropic Claude account.
Get Started
The guide files and full documentation are available on GitHub:
Watch the full demo video here:
Watch the video (11 minutes) →
Watch the demo video, explore the guide files on GitHub, and let me know what components you build with this. I’d love to hear your feedback.