Code Apps are my current favourite thing about the Power Platform, they follow what I think Microsoft's AI strategy should have been all along "Automate the code underneath, not the UI", as that's what LLMS are good at.
But I found a couple of issues with Code Apps:
- The CLI requirements is a barrier for some
- The process is disjointed (e.g. getting connection id from url)
- Require repo like GitHub (another barrier)
- React is good for some use cases but overkill for others
So I wanted to create a way to fix these issues, I wanted
- A way for most makers to build without adding connectors
- To enable Copilot and other Agents to build right first time
- No CLI commands needed and a simple workflow
- Store the editable code in the platform
Callout, although I dabble in TypeScript I'm stuck in my ways and prefer JavaScript, also I like to build things, so anyone who calls out this probably isn't necessary and the LLM will do all the complex stuff is right
So here was my idea, create a fork of code apps built on top of the power app SDK.
This project has rattled on for a while, and it all came together when Microsoft launched a NPM version of the power platform cli, allowing me to build in that inside my solution instead of an external dependency.
1. CodeApp JS
My plan was to build a conversion process for the SDK into a simple JavaScript (removing the build stage) file that I could then build on top of. The idea was to have these files:
- power-apps-data.js - the SDK
- codeapp.js - helper functions, debugger, Dataverse actions, and later date the Flow actions
- connectors/ - folder with all of the most used connectors converted to JavaScript, they would have easy to use wrappers and built it debugger
- Index.js* - where all the project JavaScript is
- Index.html* - where the app UI is
- power.config.json* - the app config details
*These are standard Code App files that are always required
The default connectors I thought of that covered 90%+ of use cases where:
- Dataverse
- Office 365 Outlook
- Office 365 User
- Office 365 Groups
- SharePoint
- SQL
- Teams
The next step was to improve how LLMs build Code Apps, as by default they just want to build normal web apps, so I created 2 main areas, agent and skills.
The agent.md file is like a system prompt that you can set in VS Code, it ensures the LLM knows that this is a Code App and to do things like use the SDK instead of simple fetch() functions. The skill.md files are for each connector, they ensure the LLM updates the power.config.json file and doesn't make any silly mistakes.
They all started from a foundation and were incremented on with learnings from building apps, the more I built the more learnings I could train the LLM with
This means that out of the box a maker could build a Code App, but they would need to add schemas for datasources to help the LLM and still used one cli command to publish to the Power Platform.
2. Build Setup
At this point I have done 1 and 2, but what about 3 and 4, well this is where I needed to build (my favourite bit 😎).
To make the workflow easy I needed to replace the CLI commands, and that meant a new UI. The approach I decided to go with was, in a strange contradiction to my objective, was to build a CLI.
There were 3 reasons why I decided
First because I could batch/improve the commands and add new ones. Examples include if I wanted to add a new connector I got the command to find the first valid connection and use that (no getting connection id from the url).
The second and most important was because the CLI can be the foundation for any UI.
So we have the Code App JS files, which are used by the CLI, which is then used by other Apps. That way when I update the files with new connectors or SDK updates it cascades through, and if I update the CLI with new commands (like when the call flow was added), again it cascades down.
Third I just really really wanted to make a CLI.
3. CAP CLI
The CLI is split into a light and full version. The light covers the CLI commands, the full version builds Copilot SDK into it so it can be a fully standalone agent tool.
Light - the CLI commands
The CLI commands in theory should make the process more streamlined and simplified, these are the commands I created.
CAP auth - signs you into Power Platform
CAP environment - lists all of your environments and lets you select them. After selecting it also updates the power.config.json file
CAP dataverse - inputs dataverse table, adds it to the power.config.json and adds the schema to the config file (deletes or unnecessary files too)
CAP flow - lists all flows for you to select, adds it to the power.config.json and adds the schema to the config file (deletes or unnecessary files too)
CAP deploy - publishes app to environment, it also copies the power.config.json file into the config folder first (you will see why later)
CAP deploy --debugger - turns on debugger so in the app you can see and copy all connector actions (great to passing to LLM to help debugging)
CAP connector - inputs connector, finds first connection id from environment, imports TypeScript code, converts, embeds debugger functionality and moves to the connector folder (deletes or unnecessary files too)
there are more shortcuts to these like CAP environment -- but you get the idea
That's the standard commands from the Power Platform API, but why stop there, so I've added some of my own
CAP setup - copies all of the templated CodeApp JS files into your project folder, asks for name etc to setup power.config.json file
CAP table - allows you (or the LLM) to create Dataverse tables, you input name, publisher and then add as many columns as you need (any type)
CAP import - my favourite, but I need to explain more
CAP import is the key to objective 4. See the best thing about Vanilla JavaScript in CodeApp JS is it does not need a build step (convert from TypeScript to JavaScript), so the code in the Code App is the code you have written. This means in theory you can export the solution, unzip it and see the code you wrote (or Copilot did). The one thing missing is the power.comfig.json file. But if we copy that, and any other import files like the schemas into the dist folder, lets say in a config folder, then we would have everything we need.
And that's what import does, it lists all of our Code Apps in an environment, you select the app, it finds a solution its in and then exports the solution zip. Once it has the solution it unzips it, grabs the code and adds it to your project folder, finally it copies the power.config.json from the dist/config folder to the root.
So now you can use the Power Platform to store your dev code 😎
Full - Copilot
The full version has everything the light version has, but also has the Copilot SDK build in, so you don't need vs code or other agent tools, you can use CAP on its own (and again you can build you own agent tool on top of this).
CAP copilot - sign into your GitHub Copilot account
CAP model - view available models and select the one you want
CAP skills - view list of skills and open to see them
CAP instruction - create your own instruction.md file
CAP - open up interaction session, all inputs are prompts sent to the llm, except when you prefix a /, which the falls back to the CLI for commands like CAP deploy
CAP-p - runs a one off prompt to the llm (like Claude-p)
CAP session - view all saved sessions and select one to continue
As you can see it successfully switched to returning in blocks of 10, though as always there is a small bug with loaded total only showing 10 🤦♂️
4. How I use it
Lets be honest, although the CLI is cool it is not the best way to build (cough sorry Claud Code), so how do I use it.
Well at the moment I use a VS Code Extension I created based on the CLI.
For me its the perfect blend of Low-Code and AI. It has all the buttons I need to complete actions like adding Dataverse table or deploying (see bottom of the screen)
And it delegates all of the code writing to the AI (bit like what we do with Power Apps, we interact with buttons, and delegate most of the code to prebuilt code provided by Microsoft developers).
It also has a couple of added benefits
- Using Copilot in VS code enables additional models like Gemini Pro 3 that are not enabled through Copilot SDK
- For CLI your admin will have to enable Copilot to use SDK and for you to install the CLI, where as VS Code Ext is normally just one click
- I'm use to VS Code so I can use it easily.
Here's a demo video of me building an app using it (Im no Youtuber so expect no production costs, and its a little boring so you may want to fast forward lol)
But I am working on an orchestration app, so that all my Code Apps can be found in one place with a nice UI.
5. Have Ago Yourself
For more information of Code Apps check out https://codeappjs.com/ and more information on CAP CLI check out https://codeappjs.com/cap.html.
Its all open source, so if you want to add connectors/features or fix bugs (I'm sure there are a few), please feel free to submit PRs. Likewise if you don't like the JS side of it, but like the commands you can fork it and use any useful bits.
The interesting thing I found about this is that AI gives us something that we never had before, a world of bespoke solutions to our personal developer ways of working. I found myself constantly spinning up new ways to make me more productive, from new bookmarklets, to entire CLIs and libraries, and that for me is super cool 😎
Top comments (0)