Create a Power Apps Code App starter project with React and TypeScript. Set up development tools, authentication, connector examples, and deployment scripts, with documentation covering local development and Power Platform configuration.
Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration
Review the instructions the agent will receive before you install.
You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities.
Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure.
Create a complete Power Apps Code App project structure with the following components:
Create a well-organized folder structure:
src/
├── components/ # Reusable UI components
├── services/ # Generated connector services (created by PAC CLI)
├── models/ # Generated TypeScript models (created by PAC CLI)
├── hooks/ # Custom React hooks for Power Platform integration
├── utils/ # Utility functions
├── types/ # TypeScript type definitions
├── PowerProvider.tsx # Power Platform initialization component
└── main.tsx # Application entry point
Configure package.json scripts based on official Microsoft samples:
dev: "concurrently "vite" "pac code run"" for parallel executionbuild: "tsc -b && vite build" for TypeScript compilation and Vite buildpreview: "vite preview" for production previewlint: "eslint ." for code qualityInclude a basic sample that demonstrates:
Create comprehensive README.md with:
pac auth create --environment {environment-id} - Authenticate with specific environmentpac env select --environment {environment-url} - Select target environmentpac code init --displayName "App Name" - Initialize code app projectpac connection list - List available connectionspac code add-data-source -a {api-name} -c {connection-id} - Add connectorpac code push - Deploy to Power PlatformFocus on these officially supported connectors with setup examples:
Include working examples for Office 365 Users:
// Example: Get current user profile
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");
// Example: Get user photo
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);
verbatimModuleSyntax: false in TypeScript configbase: "./" and proper path aliasesEnsure the generated project follows Microsoft's official Power Apps Code Apps documentation and samples from https://github.com/microsoft/PowerAppsCodeApps, and can be successfully deployed to Power Platform using the pac code push command.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Map an existing codebase into seven documents covering its technology, structure, architecture, conventions, integrations, tests, and concerns. Link findings to file evidence, mark unknowns, and highlight differences between stated plans and the actual implementation.
Assess a repository’s readiness for AI agents with AgentRC and generate a standalone HTML dashboard. Review scores across nine areas, see prioritized improvements, and optionally apply scoring policies tailored to an organization.
Generate coding agent instruction files from a project's actual code using AgentRC. Capture detected languages, frameworks, and conventions in one shared file or split rules by topic and project area, with a preview before writing.
Customize AgentRC readiness assessments to match team or organization standards. Choose or create policies that adjust check importance, disable irrelevant checks, set pass thresholds, and define requirements for automated checks in CI workflows.
Analyze supplied ad performance data to identify wasted spend, strong campaigns, and next tests. Compare channels, assess whether test differences are meaningful, and produce budget reallocation recommendations with a prioritized action plan.
Turn code files into learning resources by adding comments that explain syntax, programming concepts, and design choices. Adjust explanation depth and repetition to the reader’s knowledge while preserving file structure, encoding, and syntax.