Create Power Apps Generative Page

A scaffolding tool to quickly create Power Apps Generative Pages with Fluent UI components.

🚀 Usage

npx @otsf/create-power-apps-generative-page my-page-name
cd my-page-name
npm install
npm start

Or run without arguments to be prompted for the project name:

npx @otsf/create-power-apps-generative-page

🎯 What You Get

A complete development environment for building Power Apps Generative Pages:

• ✅ Power Apps Compatible: Fluent UI components that work in Power Apps
• ✅ React 18 + TypeScript: Modern development stack
• ✅ Fluent UI Components: (@fluentui/react-components)
• ✅ Local Development: Webpack dev server with hot reload
• ✅ Production Build: Optimized build setup
• ✅ D3.js Ready: Tree-shaking enabled for data visualization
• ✅ Portable Components: Easy copy-paste to Power Apps
• ✅ AI Assistant Ready: Includes AGENTS.md file for GitHub Copilot context

📁 Project Structure

my-power-apps-generative-page/
├── src/
│   ├── components/
│   │   ├── page.tsx      # Your Power Apps Generative Page
│   │   └── index.ts      # Component exports
│   └── index.tsx         # Development host (local testing only)
├── public/
│   └── index.html
├── AGENTS.md              # AI assistant context file
├── package.json
├── webpack.config.js
└── tsconfig.json

🔄 Development Workflow

1. Develop Locally:

   npm start  # Opens localhost:3000

2. Edit Your Page:

   • Modify src/components/page.tsx
   • Use any Fluent UI components
   • Add D3 visualizations if needed
   • Test with hot reload

3. Deploy to Power Apps:

   • Copy content of src/components/page.tsx
   • Paste into Power Apps Generative Pages editor
   • Your page is ready to use!

🎨 Power Apps Integration

The scaffolded project is specifically designed for seamless Power Apps integration:

1. Develop locally: Use npm start to develop and test your page
2. Copy to Power Apps: Copy the content of src/components/page.tsx
3. Paste in Power Apps: Paste into your Power Apps Generative Pages editor

Integration Features

• Fluent UI Theming: Uses Power Apps compatible themes and tokens
• Portable Architecture: Clean separation between development and production code
• TypeScript Support: Full IntelliSense for Power Apps development
• Tree Shaking: Only bundles what you use for optimal performance
• Modern React: React 18 with hooks and modern patterns

🛠️ Available Scripts

• npm start - Start development server (local testing)
• npm run build - Build for production
• Edit src/components/page.tsx to build your Power Apps Generative Page
• Copy page.tsx content to Power Apps when ready

Start building amazing Power Apps Generative Pages! 🎉