POWER PAGES

Plugin for Claude Code

A Complete Step-by-Step Guide for Power Platform Consultants

★ Preview Feature • Updated March 2026 • muzairsuleman.blogspot.com

What Is the Power Pages Plugin for Claude Code?

If you've ever built a Power Pages site from scratch, you know the drill — scaffolding the project, writing repetitive boilerplate API code, manually configuring Dataverse permissions, and wiring up authentication. It can eat up hours, even for experienced Power Platform consultants.

The Power Pages Plugin for Claude Code flips that experience entirely. Instead of writing code line by line, you describe what you want in plain English inside Claude Code, and the plugin handles the rest — from scaffolding a full single-page application (SPA), setting up Dataverse tables, integrating the Web API, all the way through deploying the site live on Power Pages.

⚠️ PREVIEW FEATURE

This is currently a preview feature and is not recommended for production environments. Functionality may change before official release. Always review every agent proposal before approving.

Prerequisites — All 7 Requirements

This section is the one most guides skip, but getting these right upfront saves you from mid-process failures. You need everything below before running a single command.

Subscriptions & Accounts (Commonly Missed)

🔑 REQUIREMENT 1 — Claude AI Pro or Max Subscription

You must have an active Claude Pro or Max subscription at claude.ai. Claude Code is not available on the free tier. Sign up or upgrade at claude.ai before proceeding.

🌐 REQUIREMENT 2 — Power Platform Environment with Power Pages Enabled

You need a Power Platform environment that has Power Pages provisioned. This can be a developer, sandbox, or production environment — but Power Pages must be turned on in that environment.

Software Requirements

Component	Requirement	Notes
Claude AI Pro or Max	Required subscription	Sign up at claude.ai. Claude Code is not available on the free plan.
Node.js	v18.0 or later	Download from nodejs.org. Required for Claude Code and all SPA frameworks.
Power Platform CLI (PAC)	Latest	Install via npm or winget. Used to deploy, activate, and manage your site.
Azure CLI	Latest	Required for Entra ID authentication. Run az login after install.
Claude Code CLI	Globally installed	Install with: npm install -g @anthropic-ai/claude-code
Power Platform Environment	With Power Pages enabled	Must have Power Pages provisioned. Can be developer, sandbox, or production.
VS Code + Power Platform Tools	Optional (recommended)	Gives you visual editing, YAML syntax support, and debugging tools.

Authentication Setup

Both PAC CLI and Azure CLI must be authenticated and pointing to the same tenant before running any plugin commands.

Step 1 — Install Claude Code globally:

# Install Claude Code globally via npm

npm install -g @anthropic-ai/claude-code

# Verify it's installed correctly

claude --version

Step 2 — Verify or create PAC CLI authentication:

# Check if already authenticated

pac auth list

# If not authenticated, create a session:

pac auth create --environment https://yourorg.crm.dynamics.com

💡 TIP — How to Find Your Instance URL

Go to make.powerpages.microsoft.com → click the Settings icon (top-right corner) → select Session details. Your instance URL is displayed there.

Step 3 — Authenticate Azure CLI:

# Sign into Azure — a browser window will open

az login

# Must be the same tenant as your Power Platform environment

Installing the Power Pages Plugin

Once all prerequisites are in place, installing the plugin is just two commands inside a Claude Code session.

Step 1 — Open Claude Code in your terminal:

claude

Step 2 — Add the Microsoft Power Platform marketplace:

/plugin marketplace add microsoft/power-platform-skills

Step 3 — Install the Power Pages plugin:

/plugin install power-pages@power-platform-skills

✅ Success Indicator

After installation, commands like /create-site, /deploy-site, and /setup-datamodel will appear when you type / in Claude Code. If you see these, the plugin is active and ready.

Plugin Skills — What Each Command Does

The plugin provides 9 skills covering the full Power Pages site development lifecycle. You can invoke them as slash commands or simply describe your intent in natural language — the plugin recognizes it.

Skill	Command	What It Does
Create Site	/create-site	Scaffolds the full SPA project. Applies colors, fonts, builds pages & components, installs deps, opens a live preview.
Deploy Site	/deploy-site	Verifies PAC CLI auth, confirms target env, runs production build, uploads compiled site to Power Pages.
Activate Site	/activate-site	Provisions a website record, lets you customize subdomain, polls until live, returns the public URL.
Set Up Data Model	/setup-datamodel	Analyzes site code, queries existing Dataverse tables, proposes ER diagram with tables/columns/relationships.
Add Sample Data	/add-sample-data (optional)	Reads data model manifest, generates contextual test records, inserts in dependency order.
Integrate Web API	/integrate-webapi	Replaces mock data with typed Dataverse API calls, generates CRUD services and framework-specific hooks.
Set Up Auth	/setup-auth	Adds Entra ID sign-in/out, anti-forgery token handling, role-based UI visibility.
Create Web Roles	/create-webroles	Generates web role YAML files. Enforces one anonymous + one authenticated role per site.
Add SEO	/add-seo	Discovers routes, generates robots.txt, sitemap.xml, injects Open Graph & Twitter Card meta tags.

The Complete 10-Step Workflow

Here is the recommended end-to-end sequence. You don't have to follow it exactly — each skill checks its own prerequisites — but this order avoids backtracking.

1. /create-site — Scaffold, design, and build pages

2. /deploy-site — Upload to your Power Pages environment

3. /activate-site — Provision a public URL

4. /setup-datamodel — Create Dataverse tables and columns

5. /add-sample-data — Populate tables with test records (Optional)

6. /integrate-webapi — Generate API client code and configure permissions

7. /create-webroles — Define user access roles

8. /setup-auth — Add sign-in/sign-out and role-based UI

9. /add-seo — Search engine optimization (Optional)

10. /deploy-site — Push all final changes live

Detailed Step-by-Step Walkthrough

Step 1 — Create Your Site

Tell the plugin what kind of site you want in plain English. Be specific — mention the purpose, pages, color scheme, and layout preferences. The more detail you give, the better the output.

/create-site

# Or describe naturally:

"Create a job listings portal with a home page, a listings page

with search and department filters, and a job detail page.

Dark navy color scheme with teal accents. React framework."

What happens: The plugin picks a framework (React, Vue, Angular, or Astro) — or uses yours — scaffolds the project, applies your design tokens, installs all dependencies, starts a dev server, and opens a live browser preview. Git commits are created at major milestones, giving you built-in rollback points.

💡 TIP — Iterate in Small Steps

After the site is scaffolded, review the live preview before moving on. Build page by page rather than describing everything upfront. It's far easier to fix one component at a time.

Step 2 — Deploy Your Site

Once you're happy with the local preview, push it to Power Pages. The plugin verifies your auth session first — if your PAC CLI session has expired, it will alert you before doing anything.

/deploy-site

What happens: The plugin checks PAC CLI is installed and your session is active, confirms the target environment with you (so you don't accidentally deploy to production), runs a production build, and uploads the compiled output.

⚠️ File Attachment Restrictions

If your environment blocks certain file types, the plugin detects this and gives you specific instructions to resolve it. Read these messages carefully — they are actionable.

Step 3 — Activate Your Site

Deployment uploads files, but activation is what makes your site publicly accessible. This step provisions a website record and assigns it a live subdomain.

/activate-site

What happens: The plugin suggests a subdomain based on your site name (you can customize it), provisions the website record via the Power Platform API, then polls until the site is live and returns your public URL.

Step 4 — Set Up Your Dataverse Data Model

Now that you have a live site, it's time to back it with real data. This skill analyzes your site code to understand what data each page needs, then proposes a Dataverse schema.

/setup-datamodel

# If you already have a schema, paste it directly, if not then ignore it:

"Set up this data model: [paste your table list here]"

What happens: A Data Model Architect sub-agent is spawned. It scans your codebase, queries your Dataverse environment for existing tables to avoid duplicates, then presents a full proposal — tables, columns, data types, and relationships — visualized as an ER diagram.

🛑 IMPORTANT — Always Review Before Approving

Nothing gets created in Dataverse until you explicitly approve. Review table names, column types, and relationships carefully. Renaming columns after data has been inserted is far more painful than adjusting the proposal now.

Step 5 — Add Sample Data (Optional)

If you want to test your site with realistic data before connecting to real records, this skill populates your Dataverse tables with contextually appropriate test data.

# Be specific for best results:

"Add 20 sample job postings across 4 departments (Engineering,

Marketing, Sales, HR) with realistic salaries between $60k-$180k

and posted dates in the last 30 days"

What happens: The plugin reads the data model manifest from Step 4, generates contextually appropriate values (realistic emails, plausible dates, formatted currency), and inserts records in the correct dependency order — parent tables before child tables.

Step 6 — Integrate the Dataverse Web API

This is where mock data gets replaced with live Dataverse queries. The plugin scans your codebase for hardcoded arrays or placeholder fetch calls and replaces them with a properly typed API integration.

/integrate-webapi

# Or target a specific component:

"Connect the JobListings component to the cr_jobposting table.

Replace the hardcoded array with a real API call."

What happens: A Web API Integration agent is spawned per table. Each generates a shared API client (with anti-forgery token handling and retry logic), TypeScript entity types, domain mappers, a CRUD service layer, and framework-specific hooks (React), composables (Vue), or services (Angular).

A Permissions Architect agent then proposes table permissions and site settings — nothing is created until you approve.

🔒 Security Reminder

Verify that each role has the correct CRUD access per table. Overly permissive table permissions are one of the most common security vulnerabilities in Power Pages deployments.

Step 7 — Create Web Roles

Web roles control what authenticated vs. anonymous users can see and do. This skill generates the YAML definitions for those roles.

/create-webroles

What happens: The plugin queries your environment for existing web roles to avoid duplicates, generates role definitions with unique identifiers, and enforces the Power Pages constraint that each site has at most one anonymous role and one authenticated role.

Step 8 — Set Up Authentication

Add sign-in and sign-out functionality backed by Microsoft Entra ID. This also wires up role-based UI — showing or hiding elements based on the current user's web role.

/setup-auth

What happens: The plugin generates an Entra ID authentication service with anti-forgery token management, creates a sign-in/sign-out UI component integrated with your site's layout, and adds role-based utilities that conditionally render UI elements. Everything uses your chosen framework's patterns (React hooks, Vue composables, Angular services).

Step 9 — Add SEO (Optional)

Make sure your site is discoverable by search engines with proper meta tags and standard SEO files.

/add-seo

What happens: The plugin discovers all routes from your framework's router config, generates robots.txt and sitemap.xml, and injects meta tags including viewport, charset, description, Open Graph, Twitter Card, and favicon references into all page templates.

Step 10 — Final Deployment & Verification

Run a final deployment to push everything live — including table permissions, site settings, web role YAML files, and any SEO files.

# Final deploy — pushes all artifacts including permissions,

# site settings, web roles, and SEO files

/deploy-site

Verify Your Site in Power Pages

1. Go to make.powerpages.microsoft.com

2. Find your site in the Active Sites list

3. Click Preview to open the site on desktop

4. Test all pages, the authentication flow, and data loading

Tips & Best Practices

Be Specific in Your Prompts

Vague requests produce vague results. The more context you give, the better Claude Code performs.

❌ Instead of this (vague)	✅ Try this (specific)
Make a page for jobs	Create a job listings page with search bar, filter chips for location and department, and a card grid showing title, salary range, and posted date
Fix the styling	The job cards are stacking vertically on desktop. Make them display in a 3-column grid with 16px gap on screens wider than 768px
Add some data	Add 20 sample job postings across 4 departments with realistic salaries $60k-$180k and posted dates within the last 30 days
Set up the API	Connect the JobListings component to the cr_jobposting Dataverse table, fetching title, department, salary, and posted date

Paste Full Errors with Context

When something fails — build error, deployment failure, runtime exception — copy the complete error output and describe what you were doing. The plugin uses this to target a fix precisely rather than guessing.

"I ran npm run build and got this error. Fix it.

error TS2339: Property 'jobTitle' does not exist on type 'JobPosting'.

src/components/JobCard.tsx:24:31

24 <Text>{posting.jobTitle}</Text>"

Use Screenshots for Visual Problems

When the site doesn't look right, paste a screenshot directly into Claude Code or provide the file path. Visual context identifies layout and spacing issues far faster than text descriptions.

"The header overlaps the hero section on mobile. Here's a screenshot:

[paste screenshot or provide path]

Fix the header so it doesn't overlap — use a fixed header

with content starting below it."

Ask for an Explanation Before Approving

For security-sensitive proposals (permissions, data model changes, authentication), ask the plugin to explain what it plans to do and why before you approve.

"Before you create the table permissions, explain what access each

role will have and why. I want to understand the security implications

before approving."

Re-run Skills to Recover from Partial Failures

Skills are designed to be re-run. If one fails partway through, the plugin detects what was already completed and resumes from where it stopped — no need to start over.

"/integrate-webapi failed while processing the cr_applications table.

Here's the error: [paste error]

Resume the integration from where it stopped."

Common Errors & How to Fix Them

403 — AttributePermissionIsMissing

This is the most common error after deploying. It means a column in your Web API query hasn't been granted access in the table permission configuration.

{

"error": {

"code": "90040101",

"message": "Attribute _crd50_propertyid_value in table

crd50_document is not enabled for Web Api.",

"innererror": {

"type": "AttributePermissionIsMissing"

}

✅ Fix — Add the Column to Table Permissions

Paste the full API URL and error response into Claude Code. The plugin adds the missing column to the table permission YAML in .powerpages-site/table-permissions/ and redeploys. Never change the API query itself — the fix is always on the permissions side. Watch for lookup columns (prefixed with _ and suffixed with _value) — their API names differ from their logical names in Dataverse.

PAC CLI Not Authenticated

pac auth create --environment https://yourorg.crm.dynamics.com

command not found — Missing Tools

Install the missing tool, then re-run the skill. Common missing tools:

• pac — install Power Platform CLI

• az — install Azure CLI

• node — install Node.js v18 or later

• claude — run: npm install -g @anthropic-ai/claude-code

Subdomain Already Taken

When running /activate-site, if the suggested subdomain is already taken, the plugin will prompt you to choose an alternative. Simply provide a different name and the activation continues.

Official Microsoft Documentation: Power Pages Plugin for Claude Code — Microsoft Learn

Blog by: muzairsuleman.blogspot.com | Feature in Preview as of February 2026

Search This Blog

Muhammad Uzair

AI-Powered Power Pages Development with Claude Code Plugin