Vibe coding a Mac app
Vibe coding is an interesting phenomenon. Devised by Slovak-Canadian AI expert Andrej Karpathy, the definition is to lose oneself in the production of a product, without necessarily worrying too much about the code — because AI code production services can take care of much of that for you. I have written code on and off throughout my career so as something of a dabbler, it was a concept that I found interesting.
I know that Electron is a framework that allows web-based content to be displayed within an executable application, and thus figured that using Electron was going to be the quickest way to do something.
So, I asked Watson Code Assistant.
I am making a website viewer using Electron. Generate the code that turns this into a MacOS app.
The response:
To turn your Electron-based website viewer into a MacOS app, you’ll need to package it using Electron Forge. Here’s a simplified guide:
Install Electron Forge: If you haven’t already, install Electron Forge globally using npm (Node Package Manager). Run the following command in your terminal:
npm install --global electron-forgeInitialize your project: Navigate to your project directory in the terminal and initialize your project with Electron Forge. Run the following command:
npx create-electron-app my-appReplace “my-app” with the name of your project.
Configure your project: Electron Forge will guide you through configuring your project. You’ll be asked to choose a template (choose “None” if you’re starting from an existing project), and then you’ll be asked to configure your project’s metadata (like name, product name, etc.).
Build your app: Once your project is configured, you can build your app for MacOS. Run the following command:
npx electron-forge makeFind your app: After the build process is complete, you’ll find your app in the
out/my-app-darwin-x64 directory (replace “my-app” with your project’s name). This is your MacOS app.
Remember, this is a simplified guide. The actual process might involve more steps, depending on your project’s complexity.
Also, note that distributing apps outside of the Mac App Store requires a special entitlement, and Apple has strict guidelines for what can and can’t be distributed this way.
Lastly, always ensure you respect user privacy and comply with Apple’s App Store Review Guidelines.
I went through the instructions and, sure enough, made my first executable Mac app with some pre-installed dummy content:
It works! Cue minor sense of achievement etc etc.
So, if it works, what should I do with it?
I then had the idea of making a little player for IBM Community Radio. Because IBMCR uses a streaming format that is incompatible with Safari, you need to use Edge or Chrome to listen to it on a Mac. Could my Electron app act as as a radio player without the need to install a new browser?
Electron is simply a web browser under the bonnet of an executable file, and thus includes a web browser in itself (if you see what I mean). That browser is Chromium — the open-source variant of Google’s commercialised Chrome. So, by a stroke of luck, I then realised that my app could indeed play IBMCR, because it had Chromium inside it.
From that point on, it became rather easy to get the app to render IBMCR. Electron gives you all of the components necessary to make the web content inside the app. Simply replace the contents inside the src/index.html file to whatever you like. Here, I used the source of the IBMCR player, tweaked the HTML a little (eg absolute paths) for it to render correctly, and it worked.
The vanilla Electron app opens with a set of dev tools pre-enabled — basically the Inspect Element part of Chromium. That can be disabled, and it’s also possible to change the size of the app window. I worked out the player’s dimensions, and made all of those changes in src/index.js.
Building the app is simply a case of running the command in the requisite directory. It’s worth clarifying at this stage that I moved from electron-forge to electron-builder as I had a couple of system issues with electron-forge. Everything is fundamentally the same, however, in terms of building a little app.
There are online instructions to add an app logo of your choice — that’s an Apple standard.
The output is an executable Mac app, published in different ways. You get it as a .dmg (installable application), .app (run-anywhere application) and both as a .zip. You also get a blockmap file, which is a gzipped JSON file used for tracking updates, for incremental build purposes.
Here’s the app playing my show :-)
The app’s footprint is 252MB, which is of course really chunky as a simple app but it does have an entire web browser inside it, and it’s perhaps 10–20% the size of running a “normal” web browser anyway. If I was building a radio player from scratch then of course I wouldn’t do it this way, but as a demonstration of some AI-enabled vibe coding, it has worked out fine.
A huge advantage is that vibe coding writes a lot of the code for you, and a huge disadvantage is that vibe coding writes a lot of the code for you. As a “developer dabbler”, I know enough to produce the above and probably something more advanced. But, AI doesn’t necessarily know the full extent of your organisation’s code standards, security policies, packaging requirements, and so on. There’s a danger that it could do something at best bloated and suboptimal, and at worst, really dangerous and full of security holes. The trick here is to foster an organisational inner source culture which permits — ideally encourages — vibe coding within given guardrails and policies, but places very strong technical and practical limits on what is and what isn’t possible.
