PCF Workbench

A local development harness + AI build loop for Power Apps Component Framework (PCF) controls.

PCF Workbench replaces pcf-scripts start with a richer dev loop. Build your PCF, run it locally against shimmed ComponentFramework.Context APIs, and iterate without a Dataverse round-trip — or hand the whole thing to an AI agent that drives build → render → report until your control passes.

Two commands

# Interactive — boot the harness UI in your browser
npx @pcfworkbench/cli start --path ./MyControl

# Headless — run one build → render → report cycle and exit
npx @pcfworkbench/cli loop  --path ./MyControl

No install step required — npx fetches and caches the package automatically. If you'd rather pin it in your project's package.json (recommended for CI / reproducible builds), run npm i -D @pcfworkbench/cli once.

start opens the harness at http://127.0.0.1:8181. Add --workspace ./samples instead of --path for gallery mode (multiple controls in one folder). loop is the CI / AI gate — exits 0 with a deterministic JSON report on success.

Two commands

# Interactive — boot the harness UI in your browser
npx pcfworkbench start --path ./MyControl

# Headless — run one build → render → report cycle and exit
npx pcfworkbench loop  --path ./MyControl --out ./reports

start opens the harness at http://127.0.0.1:8181 with your control loaded. Add --workspace ./samples instead of --path for gallery mode (multiple controls in a directory).

loop is the AI / CI gate: builds the control if needed, runs it through the harness in headless Chromium, and writes a deterministic JSON report (report.json + screenshot.png) — agents and PR comments read this report.

What you get

• Full ComponentFramework.Context shim — webAPI (with OData), navigation, device, formatting, mode, parameters, resources, userSettings, utils.
• Modern formContext + legacy Xrm.Page — getAttribute, getControl, data, ui.tabs/ui.sections, addOnSave/addOnChange/addOnLoad, plus executionContext on every handler.
• Test scenarios — capture harness state (network mode, device preset, mock entity records, page context, scenario data) into test-scenarios.json and replay them on demand or via URL deep-link (?scenario=<name>).
• Network conditioning — online / offline / fast-3G / slow-3G / custom latency.
• Device emulation — Desktop (fluid, reactive), Tablet, iPhone 14 Pro, Pixel 7 — your control's @media rules auto-rewrite to @container pcf-viewport so they fire at the emulated size.
• Live Dataverse bridge (optional) — connect to a real org via pac auth, capture live records into a scenario for offline replay, on-disk response cache so the second run is offline-fast.
• Lifecycle + leak detection — diffs listeners / timers / observers across init → destroy.
• Auto build watcher — edit your PCF .ts source, harness HMRs the new bundle.js automatically.

AI build loop

Two GitHub Copilot CLI skills ship in the PCF Workbench repo: pcf-engineer (writes / reviews PCF code) and pcf-workbench (runs the harness loop and reports back). They turn npx pcfworkbench loop into the gate of an end-to-end requirement → code → render → verify → ship loop on your laptop.

See BUILDING.md for the full plan-first workflow.

Requirements

• Node.js 18+ (required by Vite 6)
• A built PCF — out/controls/<Name>/bundle.js must exist before pcfworkbench can load it. Run npm run build in your PCF project.

Contributing

Source, tests, samples, and full docs live at https://github.com/jaduplesms/PCF-Workbench. Issues, ideas, and PRs welcome.

License

MIT © jaduplesms