CodeApps Toolkit

Comprehensive toolkit for Power Apps Code Apps development with specialized agents, agent skills and sub-agents, and code generation tools.

---

Overview

The CodeApps Toolkit is a Claude Code plugin that provides specialized agents, sub-agents for workflow automation, and code generation tools for building Power Apps Code Apps—custom web applications built with React + TypeScript that run within Power Apps using the Power Platform SDK.

Prerequisites

Before installing the CodeApps Toolkit, ensure you have the following:

Required

• Node.js (LTS version 18.x or higher)
• Power Platform CLI (PAC CLI) (latest version)
  • Download: https://aka.ms/PowerPlatformCLI
  • Verify with: pac
• Git (for cloning the plugin)
• Power Platform Environment with Code Apps feature enabled
  • Enable Code Apps on your environment
• Power Apps Premium License (required for Code Apps)

Recommended

• Visual Studio Code with Power Platform Tools extension
• Microsoft 365 Developer Account (for testing)
• Basic knowledge of React and TypeScript

Verify Prerequisites

# Check Node.js version
node --version  # Should be v18.x or higher

# Check PAC CLI installation
pac             # Should show version info and available commands

# Check Git installation
git --version

# Authenticate with Power Platform
pac auth list

Features

Templates & Scripts

Code generation skills include production-ready TypeScript templates with:

• Service Layer Templates: Dataverse and connector patterns with best practices built-in
• React Query Templates: Complete hooks with proper cache management
• Component Templates: Fluent UI v9 list views and forms
• Validation Scripts: Automated checks for common issues
• Working Examples: Complete reference implementations (1,600+ lines)

Specialized Agents

• codeapps-expert: Coordinator agent for orchestrating workflows
• codeapps-init: Project initialization specialist
• codeapps-dataverse: Dataverse integration specialist
• codeapps-connector: Power Platform connector specialist
• codeapps-deploy: Deployment and ALM specialist

Agent Skills

• init-codeapp: Initialize new projects with proper configuration
• add-datasource: Add Dataverse tables or connectors
• deploy-codeapp: Deploy to Power Platform with validation

Code Generation Skills

• gen-service: Generate service layer wrappers
• gen-hook: Generate React Query hooks
• gen-component: Generate Fluent UI v9 components

Troubleshooting & Validation

• fix-codeapp-issue: Diagnose and fix common issues
• codeapps-validator: Comprehensive project validation
• build-lint-validator: TypeScript and ESLint validation

Installation

CodeApps Toolkit is a Claude Code plugin. Install it once and use it across all your projects.

Quick Install (Git)

# Windows
git clone https://github.com/ramakrishnan24689/codeapps-toolkit.git "%USERPROFILE%\.claude\plugins\codeapps-toolkit"

# macOS/Linux
git clone https://github.com/ramakrishnan24689/codeapps-toolkit.git ~/.claude/plugins/codeapps-toolkit

Restart Claude Code to load the plugin.

Verify Installation

/plugin

You should see codeapps-toolkit listed with status information.

Local Development Testing

If you're developing or testing the plugin locally:

# Test plugin from a local directory
claude --plugin-dir ./codeapps-toolkit

# Or test multiple plugins
claude --plugin-dir ./codeapps-toolkit --plugin-dir ./another-plugin

Quick Start

Create a New Code App

/init-codeapp my-todo-app

Or simply ask:

Initialize a new Code App called todo-app

What happens:

1. Creates project from official Microsoft template
2. Configures package.json for dual-server development
3. Sets up vite.config.ts with base: './' (critical for deployment)
4. Runs pac code init to register with Power Platform
5. Validates entire setup

Add a Data Source

Add Dataverse Table:

/add-datasource dataverse account

Add Power Platform Connector:

/add-datasource connector shared_office365users <connection-id>

Or ask naturally:

Add the Contacts Dataverse table
Connect to Office 365 Users

What happens:

1. Runs pac code add-data-source
2. Generates service layer wrapper (avoiding common pitfalls)
3. Creates React Query hooks
4. Provides usage examples

Deploy Your App

/deploy-codeapp

Or:

Deploy my app to Power Platform

What happens:

1. Pre-deployment validation (codeapps-validator)
2. Build quality check (build-lint-validator)
3. Build application
4. Deploy to Power Platform (pac code push)
5. Post-deployment verification

Usage Examples

Example 1: Dataverse Contacts App (Full Autonomous Execution)

Single Prompt:

Build me a Power Apps Code App for contacts management using the standard Dataverse contact table.
Show contact full names, email addresses, and phone numbers.
Include a list view to display all contacts and a form view to add or edit contacts.

What the agent does automatically:

1. ✅ Creates project: ContactsManager
2. ✅ Adds Dataverse contact datasource
3. ✅ Generates ContactService with CRUD operations
4. ✅ Generates React Query hooks (useContacts, useCreateContact, etc.)
5. ✅ Generates ContactsList and ContactForm components
6. ✅ Validates project structure and build
7. ✅ Delivers working app in ~20-30 minutes

Result: Complete working app ready to run with npm run dev

---

Example 2: SharePoint Document Management App

Single Prompt:

Build me a Power Apps Code App for document management that connects to SharePoint.
Connect to the Shared Documents library at
https://contoso.sharepoint.com/teams/rrdev/Shared%20Documents
and allow users to list files, view file details, and upload new documents.
Library ID 18bcc28c-1d2c-42c8-a13e-e5e2fb6d9bb4

What the agent does automatically:

1. ✅ Creates project: DocumentManager
2. ✅ Adds SharePoint connector datasource
3. ✅ Generates SharePoint connector service
4. ✅ Generates React Query hooks for file operations
5. ✅ Generates file list and upload components
6. ✅ Validates and builds
7. ✅ Delivers working SharePoint integration

Result: Complete SharePoint document management app

Deployment:

---

Key Benefits

• One Prompt → Complete App: No manual skill invocation needed
• Autonomous Execution: Agent handles the entire workflow
• Multi-Source Support: Works with Dataverse AND connectors (SharePoint, SQL, Office 365, etc.)
• Production Ready: Generated code follows best practices

---

Workflows

Complete Development Workflow

graph LR
    A[Initialize] --> B[Add Data Sources]
    B --> C[Generate Code]
    C --> D[Develop Features]
    D --> E[Validate]
    E --> F[Deploy]

Loading

1. Initialize Project (/init-codeapp)
2. Add Data Sources (/add-datasource)
3. Generate Code (/gen-service, /gen-hook, /gen-component)
4. Develop Features (write your code)
5. Validate (automatic with codeapps-validator)
6. Deploy (/deploy-codeapp)

Let Claude Coordinate

You can also let the codeapps-expert agent coordinate everything:

I want to build a Power Apps Code App for todos that uses Dataverse

The expert agent will:

1. Initialize the project
2. Add Dataverse table
3. Generate service layers and hooks
4. Guide you through development
5. Help with deployment

Agent Delegation

The plugin uses specialized agents for focused tasks:

When to Use Each Agent

Agent	Use When	Example
codeapps-expert	Need guidance or complex workflows	"Help me build a Power Apps Code App"
codeapps-init	Creating new projects	"Initialize a new Power Apps Code App"
codeapps-dataverse	Working with Dataverse	"Add the Accounts table"
codeapps-connector	Adding connectors	"Connect to SQL Server"
codeapps-deploy	Deploying apps	"Deploy to production"

Automatic Delegation

Claude automatically delegates to the right agent based on your request. You don't need to know which agent handles what—just ask naturally!

Skills Reference

Agent Skills and Sub-Agents

/init-codeapp <app-name>

Initialize a new Code Apps project with:

• Official Microsoft template
• Dual-server development setup (Vite + pac code run)
• vite.config.ts with base: './'
• Comprehensive validation

Example:

/init-codeapp employee-directory

/add-datasource <type> <name> [options]

Add Dataverse table or Power Platform connector:

• Generates service layer wrapper
• Creates React Query hooks
• Handles CodeApps-specific issues

Examples:

/add-datasource dataverse account
/add-datasource connector shared_sql <connection-id> dbo.Users myDatabase

/deploy-codeapp [solution-name]

Deploy to Power Platform with validation:

• Pre-deployment validation
• Build quality check
• Asset path verification
• Post-deployment verification

Examples:

/deploy-codeapp
/deploy-codeapp "Marketing Apps"

Code Generation Skills

/gen-service <type> <name>

Generate service layer wrapper with:

• Proper error handling
• System-managed field exclusion (Dataverse)
• Boolean field handling
• Data transformations

/gen-hook <feature-name>

Generate React Query hooks:

• Query hooks (fetching data)
• Mutation hooks (create, update, delete)
• Proper cache invalidation
• TypeScript types

/gen-component <feature-name> <type>

Generate Fluent UI v9 components:

• List views
• Detail views
• Forms (create/edit)

Types: list, detail, form

Troubleshooting Skills

/fix-codeapp-issue

Diagnose and fix common issues:

• 404 asset errors (missing base: './')
• Dataverse OData errors (system-managed fields)
• Boolean field type mismatches
• Authentication failures
• Build errors

Common Patterns

Pattern 1: New Dataverse-Based App

# Step 1: Initialize
/init-codeapp my-app

# Step 2: Add Dataverse tables
/add-datasource dataverse todos
/add-datasource dataverse contacts

# Step 3: Generate UI components
/gen-component todos list
/gen-component todos form

# Step 4: Develop features
# (Write your custom React code)

# Step 5: Deploy
/deploy-codeapp

Pattern 2: Connector-Based App

# Step 1: Initialize
/init-codeapp employee-lookup

# Step 2: Add connectors
/add-datasource connector shared_office365users <connection-id>
/add-datasource connector shared_sharepointonline <connection-id> Employees <site-url>

# Step 3: Generate code
/gen-service connector office365users
/gen-hook userprofile

# Step 4: Deploy
/deploy-codeapp

Pattern 3: Fix Deployment Issue

# Deployed app shows blank screen

/fix-codeapp-issue

# The skill will:
# 1. Diagnose the issue (missing base: './')
# 2. Fix vite.config.ts
# 3. Rebuild the app
# 4. Guide you to redeploy

Best Practices

✅ DO

• Always validate before deploying (automatic with /deploy-codeapp)
• Use service layer wrappers (never call generated services directly)
• Use connection references for better ALM
• Test locally before deploying (npm run dev)
• Follow feature-first structure (src/features/<feature>/)

❌ DON'T

• Modify files in src/generated/ (they're auto-regenerated)
• Send system-managed fields to Dataverse (ownerid, statecode, timestamps)
• Use absolute paths in vite.config.ts (always use base: './')
• Skip validation before deployment
• Use generated services directly in components

Critical Configuration

vite.config.ts MUST Have base: './'

export default defineConfig({
  plugins: [react()],
  base: './',  // ✅ CRITICAL for deployment
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

Without this: Deployed app shows blank screen with 404 errors for assets.

Dataverse: Never Send System-Managed Fields

// ❌ WRONG
const payload = {
  name: dto.name,
  ownerid: '',      // ❌ Never send
  statecode: 0,     // ❌ Never send
};

// ✅ CORRECT
const payload = {
  name: dto.name,
  // Dataverse sets ownerid, statecode automatically
};

Boolean Fields: Use as any

// ❌ WRONG
updates.isCompleted = value ? 1 : 0;

// ✅ CORRECT
updates.isCompleted = value as any;

Troubleshooting

Issue: Blank Screen After Deployment

Symptom: App works locally but shows blank screen when deployed

Cause: Missing base: './' in vite.config.ts

Fix:

/fix-codeapp-issue

Or manually add base: './' and redeploy.

Issue: Dataverse Create Fails

Symptom: PrimitiveValue node with non-null value... 'ownerid'

Cause: Sending system-managed fields

Fix:

/fix-codeapp-issue

Or review your service layer and remove system-managed fields.

Issue: Boolean Field Error

Symptom: Cannot convert literal '1' to expected type 'Edm.Boolean'

Cause: Sending numeric value instead of boolean

Fix: Use as any type assertion:

updates.booleanField = value as any;

Memory & Learning

Agents in this plugin use persistent memory to learn and improve:

• User-level memory: Patterns across all your projects
• Project-level memory: Project-specific conventions
• Cross-session learning: Agents remember common issues and solutions

Version History

See CHANGELOG.md for detailed version history and release notes.

Current version: 1.0.0

Documentation

• Official Docs: https://learn.microsoft.com/power-apps/developer/code-apps/
• GitHub Template: https://github.com/microsoft/PowerAppsCodeApps
• PAC CLI Reference: https://learn.microsoft.com/power-platform/developer/cli/reference/code
• React Query: https://tanstack.com/query/latest
• Fluent UI v9: https://react.fluentui.dev/

Contributing

This plugin is designed to be extended. To add new:

• Agents: Add to agents/
• Skills: Add to skills/
• Templates: Add to templates/
• Scripts: Add to scripts/

License

MIT

Support

For issues or questions:

• Open an issue in the repository
• Refer to official Power Apps Code Apps documentation
• Use /fix-codeapp-issue skill for common problems

---

Built by Ramakrishnan Raman

Powered by Claude Code - https://code.claude.com