create-powerapp-df ⚡

One command to scaffold any Power Apps project — ready to vibe-code with GitHub Copilot or Claude Code.

npx create-powerapp-df

No config files to write. No folder structure to figure out. Just answer four questions and your project is ready to open in VS Code with your AI assistant.

📘 New here? Read the User Manual — setup, every command, user guides with screenshots, updates, demo videos, CI/CD and troubleshooting, in one page.

npm: create-powerapp-df · Source: Platform/create-powerapp-df (Azure DevOps) · What's new: CHANGELOG · Maintained by de facto infotech

Commands at a glance

| Command | Run it in | What it does | |---|---|---| | npx create-powerapp-df@latest | The folder where your projects live | Creates a new project (asks four questions) | | npx create-powerapp-df@latest --provision | The folder where you keep projects | Sets up one FO project inside your customer's Azure DevOps project (the FO sync puts it there as an area path, a team and a Project work item) for ALM - its own repo, pipelines, environments with approval, branch policies, service connections - then clones it and opens the workspace in VS Code. Never creates a project | | npx create-powerapp-df@latest --update | An existing project's root | Brings its AI instructions, scripts and pipelines up to the latest version — your code and docs are kept | | npx create-powerapp-df@latest --video | Any product workspace | Adds the demo-video pipeline; then type /demo-video in Claude Code or Copilot | | node scripts/docs/capture-screenshots.mjs | A project's root | Captures real screenshots of the app for the user guide (--check verifies the docs) | | npx create-powerapp-df --version | A project's root | Shows which version the project was built with, the version running and the latest release | | npx create-powerapp-df --help | Anywhere | All options (--name, --type, --ai, --yes) |

Every project checks for a newer release when it is opened and tells you the exact update command (see New release? Your workspace tells you).

What it does

Running npx create-powerapp-df asks you four questions:

▶ Project name:  employee-leave-app

▶ App type:
  1. Canvas App        — Design every screen. Best for custom employee tools & mobile apps
  2. Model-Driven App  — Database-first. Great for CRM / record management
  3. PCF Component     — A reusable custom control to embed inside other Power Apps
  4. Power Pages       — A public-facing website connected to Dataverse
  5. Code App          — A full custom web app (React/TypeScript) on Power Platform

▶ AI assistant:
  1. GitHub Copilot
  2. Claude Code

▶ Power Platform environment URL (optional):  https://yourorg.crm.dynamics.com

Then it automatically creates everything in under 10 seconds:

| What gets created | Why | |---|---| | Project folder with correct structure | Right layout for your app type from day one | | .gitignore | Passwords and generated files never get uploaded by accident | | .env | Safe place for your environment URL and secrets | | README.md | Project overview with useful PAC CLI commands | | .claude/skills/ | AI context files that teach your AI how this app type works (verified against current Microsoft docs) | | prompts/starter.md | Copy-paste first prompts to build your first screens immediately | | docs/user-guide.md + scripts/docs/capture-screenshots.mjs | User guide template and a tool that captures real screenshots of the app for the guide and overview — the AI is required to use them, and --check fails a guide without screenshots | | CLAUDE.md or .github/copilot-instructions.md | Your AI reads this to understand the project | | .github/workflows/ + pipelines/ | Standard CI/CD for GitHub Actions and Azure DevOps: nightly sync from Dev into Git, validation on every pull request, deploy to Test/Prod only for a release pull request that says so (/release; Prod needs every started story done in Dev and verified in Test, plus an approval) — plus docs/cicd-setup.md for the one-time setup | | Git initialised + first commit | Version control ready immediately | | pac auth create (if URL given) | Signs you into your Power Platform environment | | VS Code opened automatically | Jump straight into building |

Prerequisites

You need these installed once on your machine. The VS Code Setup Guide walks through every step in plain English.

| Tool | What it is | Install | |---|---|---| | Node.js 22 LTS (20+ works for the tool; Code Apps need 22+) | Required to run this tool | nodejs.org → download LTS | | Git | Version control | git-scm.com | | PAC CLI | Connects to Power Apps | dotnet tool install --global Microsoft.PowerApps.CLI.Tool | | Azure CLI | Dataverse Web API auth (Model-Driven Apps) | aka.ms/azcli | | VS Code | Your coding editor | code.visualstudio.com | | GitHub Copilot or Claude Code | Your AI assistant | See setup guide | | Python 3.10+ (optional) | Only for demo videos (--video) | python.org |

Quick start

# Run directly — no install needed, always uses latest version
npx create-powerapp-df

# Or install globally so you can run it anytime
npm install -g create-powerapp-df
create-powerapp-df

After the command finishes:

1. VS Code opens automatically with your project
2. Open prompts/starter.md — copy-paste prompts for your first screens
3. Open your AI assistant (Copilot Chat icon, or claude in the terminal)
4. Paste a prompt and start building

Claude Code: trust the folder once. The project's permission rules (.claude/settings.json: az boards, az repos pr, pac ...) apply only after you trust the folder, and the VS Code extension never asks. Either add the rules to your user settings (Claude Code panel → Customize → Permissions, or ~/.claude/settings.json), or trust the folder once (claude in a terminal inside the project, or "hasTrustDialogAccepted": true for the folder in ~/.claude.json). Until then every Azure DevOps write is judged by the auto-mode check, which refuses creating work items. The session-start check tells you while this is still missing.

Already have a project? Update it in place

Started the app before adopting this tool, or scaffolded it with an older version? Run the tool inside the project folder — it refreshes the AI instructions without touching your work:

cd my-existing-app
npx create-powerapp-df --update            # detects app type + AI tool, asks to confirm
npx create-powerapp-df --update --type=mda --ai=claude --yes   # non-interactive

| What happens | Files | |---|---| | Refreshed (previous copy saved to .scaffold-backup/<timestamp>/) | .claude/skills/*, scripts/mda/*, deploy + backlog scripts, .github/workflows/*, pipelines/* (your deployment-settings/*.json are kept), docs/cicd-setup.md | | Merged — yours is kept, ours is added | .claude/settings.json, .vscode/* (union), CLAUDE.md / copilot-instructions.md (only the block between <!-- create-powerapp-df:begin/end --> markers is replaced), .gitignore, .env (missing keys appended) | | Never overwritten | README.md, docs/, your app code (code-apps/, canvas-apps/, pages/, pcf/, src/) — prompts/starter.md is kept and the latest prompts land in prompts/starter.updated.md |

No git init, npm install, pac auth or VS Code launch in update mode — review with git diff, then commit. Running the tool with no flags inside an existing project offers update mode automatically.

New release? Your workspace tells you

Every workspace records the package version that last wrote it in .create-powerapp-df.json (commit it). When the workspace is opened, a small check compares that with the latest release on npm:

| Where | How you see it | |---|---| | Claude Code | A session-start hook shows a notice, and Claude tells you what is new and offers to run the update for you | | VS Code (Copilot) | A folder-open task puts a warning in the Problems panel with the exact command (VS Code asks once to allow automatic tasks) |

Choose the behaviour per workspace with "updates" in .create-powerapp-df.json: "notify" (default), "auto" (apply the update by itself; previous copies go to .scaffold-backup/) or "off". The check runs at most twice a day, needs no account, and stays silent when offline. Workspaces created before 2.10.0 get the check the first time they run npx create-powerapp-df@latest --update.

Make a product demo video of any app

Working on a product in your workspace — a Power App or anything else with a UI? Add the demo-video pipeline to it and let your AI assistant produce a narrated walkthrough video:

cd my-product
npx create-powerapp-df --video          # asks for the product name shown in the video

Then open the folder in Claude Code or VS Code + GitHub Copilot Chat (agent mode) and type:

/demo-video
/demo-video the approval workflow, for managers      # optional focus / audience

The assistant follows the de facto infotech playbook (ProductDemoVideoInstruction.md): it reads the code to list only shipped features, drafts demo-video/STORYBOARD.md and waits for your approval, records the real app with Playwright (local build with fake data, or a demo environment you sign in to), then composes a 1080p MP4 with neural voice-over, camera punch-ins, step callouts and music, designs a poster, and runs a measured QA (narration/click sync, first-word level, stream lengths).

| What gets added | Purpose | |---|---| | .claude/skills/demo-video/ | /demo-video for Claude Code + the playbook | | .github/prompts/demo-video.prompt.md | /demo-video for GitHub Copilot Chat | | demo-video/ | Starter kit: capture (Playwright), composition, poster, QA — see its README | | Block in CLAUDE.md / .github/copilot-instructions.md | Rules the assistant follows (approval, privacy, done = QA passes) |

Needs Python 3.10+ and Node.js 20+; all tools are free (edge-tts neural voices, ffmpeg via imageio-ffmpeg, Playwright). Re-run --video any time for engine fixes — your storyboard, config, flows and mock backend are never overwritten.

Full setup guide

New to VS Code, Power Apps, or vibe coding entirely? Read the full step-by-step guide:

📖 VS Code Setup Guide for Vibe Coding

It covers everything from installing VS Code for the first time to writing your first AI prompt — with plain-English explanations and a glossary of every technical term.

Supported app types

| App type | Best for | Key files created | |---|---|---| | Canvas App | Custom employee tools, mobile apps, branded interfaces | canvas-apps/<App>/ (read-only .pa.yaml mirror + drafts/ for paste-ready YAML), canvas instructions (Studio-owns-the-app workflow, Microsoft naming/delegation standards), starter prompts | | Model-Driven App | CRM tools, record management, data-heavy apps | scripts/mda/ verified Web API build pipeline, solutions/, MDA instructions (forms/views designed by purpose, OOB feature catalogue), genpage instructions, starter prompts | | PCF Component | Custom interactive controls embedded in other Power Apps | pcf/ folder, PCF instructions (React platform libraries, lifecycle, packaging, versioning), starter prompts with the pac pcf init command | | Power Pages | External customer/partner websites | pages/ folder, Power Pages instructions (standard vs code/SPA site, --modelVersion, table permissions), design system, starter prompts | | Code App | Full custom React/TypeScript web apps on Power Platform | code-apps/<name>/ — Microsoft's Vite template + @microsoft/power-apps SDK + Fluent UI 9 design system, Code App instructions (pa CLI workflow), starter prompts |

Repository structure

create-powerapp-df/
├── index.js              ← CLI entry point (the tool itself)
├── package.json          ← npm package config
├── LICENSE               ← MIT licence
├── README.md             ← This file
├── CONTRIBUTING.md       ← How to contribute
├── CHANGELOG.md          ← Version history
├── docs/
│   ├── setup-guide.md            ← Full beginner VS Code + vibe coding guide
│   ├── ui-ux-instructions.md     ← Shared design system (copied into every project)
│   ├── ProjectPlanInstruction.md ← Project-plan document format (copied into every project)
│   ├── genpage-instructions.md   ← Generative pages workflow (Model-Driven Apps)
│   ├── WEBSITE_DESIGN_SYSTEM.md  ← Website design standard (Power Pages)
│   └── ProductDemoVideoInstruction.md ← Demo-video playbook (installed by --video)
├── templates/
│   ├── devops/new-backlog.ps1    ← Azure DevOps backlog generator (copied into every project)
│   ├── pipelines/                ← CI/CD templates per app kind (solution, pcf, pages, codeapp)
│   │   └── <kind>/github/*.yml, <kind>/azure/*.yml   ← nightly-sync, validate, deploy
│   ├── docs/                     ← capture-screenshots.mjs (real app screenshots for the user guide)
│   ├── update/                   ← open-time "new release" check (Claude Code hook / VS Code task)
│   └── video/                    ← --video: /demo-video workflow + demo-video/ starter kit (capture + compose + QA)
└── .github/
    ├── workflows/
    │   └── ci.yml        ← Automated tests on every pull request
    └── ISSUE_TEMPLATE/
        ├── bug_report.md
        └── feature_request.md

Contributing

Contributions are welcome — whether that's fixing a bug, adding a new app type template, or improving the beginner docs. See CONTRIBUTING.md for guidelines.

Licence

MIT — see LICENSE.