How to Vibe code yourself a Power App on vibe.powerapps.com

Recently Microsoft released a new way of developing apps within the Power Platform on vibe.powerapps.com. In this post, I will look at different approaches to vibe coding, the challenges and how to resolve them.

How to get started on vibe.powerapps.com?

Looking at the URL, you might think that we are creating a canvas app, but the app generated will be a code app.

In this example I’m going to create a Chess app through vibe coding.

First of all visit make.powerapps.com and select your environment ( in case you have multiple environments). take a copy of your environment guid from the URL, which you can then use once we go to the vibe coding site.

Create a solution and set this solution to you.

Then select the Preferred solution as described in Set the publisher on your Vibe coded Power Apps.

We now have a solution ready to receive our vibe coded app.

Various vibe code approaches

There are a few strategies to get your vibe coded app right.

• Approach 1 – Get that initial prompt 100% right (like Waterfall approach)
• Approach 2 – Evolve the solution (like Agile approach)

This is where we see that even though Vibe coding is changing the way we develop software, a lot of the approaches work in a similar way. In my examples below, we will even see that if we submit the same prompt multiple times we will get different results every time.

I’m using the example of creating a chess game as it is a clear scope without having to describe the full scope. The rules of Chess are simple set.

Attempt 1 – Creating the app

Now visit vibe.powerapps.com and select a US based Preview environment. My first prompt that I enter gives us a good starting point for the app.

Create a chess game that I can use to play against. Make all position notations use the FEN notation so that AI agents using ChatGPT can supply the next move. Every time I supply a move the visual board is updated with the new position. Then the app automatically makes the best move.

And now the base app will be generated. It will most likely take a couple of minutes to get the base app created.

You should get something like this. Please note that every attempt may result in a different app. With Vibe coding there is a bit of a luck factor involved.

I can now enter my moves however there are a number of issues with the app.

Editing the code app

When we look at the source code of the app then we will find out quite quickly that we cannot edit the app’s code. There is of course always the option to send the source code to your source control system and use pipelines to manage the code but that’s quite a pain.

So we’ll do it the vibe code way.

I’m adding my next prompt to the conversation allowing us to click on the pieces.

Allow clicking on the chess pieces to enter the move to be made.

Then the Vibe code agent will work on the changes required

And before we know it we can click on the pieces to play our game of chess.

The next issue is that the Move History doesn’t clear when we restart the game.

Clear the move history when the restart game option is selected

Then the next issue is that the app is accepting moves and the history is updated however the game board doesn’t reflect our moves.

Attempt 2 – Create the app

I’m going to start again. I’m opening a new environment on vibe.powerapps.com as I don’t want my previous solution to affect my new version.

I’ve adjusted my starting prompt slightly

Create a chess game that I can use to play against with an on screen clickable board. Make all position notations use the FEN notation so that AI agents using ChatGPT can supply the next move. Every time I supply a move the board is updated with the new current position. Then the app automatically move for the opponent.

Whereas earlier we were given a board with proper chess pieces this time we are playing with a board with letters representing the pieces only. But the app is working straight away.

Fixing the pieces

So my first step is to replace the piece with images rather than the letters. I’m trying the following prompt to see if this can be done.

Replace the letters on the board with proper chess pieces

That was easy. The board is updated as we want it to be.

Now we might have something that looks like a chess board. But does it actually play chess. No!

Pieces can move in a chess like manner ( other than that my pawn could just step on top of an opponent’s piece). Also The app’s AI moves are more like find the first move possible.

Teaching the system Chess

Make sure that all moves follow the international chess rules standard

And we can now see that as I attempt to step forwards with my pawn, I’m being told that that is an illegal move.

Now that we know the rules we need to get a bit cleverer with our moves.

Make sure that the app always picks either a known opening move or the best move possible.

With the latest change, the app is finally starting to play a proper game. Not a great game but ok.

Thoughts on Vibe coding

I very much approached this from the point of view where, I don’t have a clue about the language that the generated app is written in. By using only natural language I managed to slowly improve the app towards how I wanted the app to work.

This is very much in a way like we work in Agile methodologies with continuous improvements made. I would almost see each prompt like a separate task in sprint.

The challenge of course is that the platform still has a long way to go in:

• Application Life Cycle Management
• Allowing us to edit the generated code
• Consistency in the results
• So many other architecture improvements

But, My second example was developed in just about 10 minutes development time. Now if I continue the vibe code way to fix any issues, then I might be able to get things done.

However there it might be easier to build an understanding of the underlying code. Would you bother? Or do you wait for the disaster to happen first. Are we going to see more organisations doing their own development and use external support teams to cover them for when things go wrong?