Build Micro:Bit web app with ChatGPT

Built a Micro:Bit Web App with ChatGPT

Micro:Bit uses Bluetooth 4.0, which is different from old-school Bluetooth. Classic Bluetooth is basically just a serial connection—just radio signals moving data between devices. But Bluetooth 4.0? It has something called services. That’s what makes it smarter.

The Micro:Bit actually has built-in services like the accelerometer, buttons, pins, LED matrix, temperature, magnetometer, and even UART (which we’ve used before). These services let other apps talk directly to specific parts of the board. So if you only care about the accelerometer, you can just connect to that—no extra code for the rest.

I uploaded a bit of code to the Micro:Bit to expose just the accelerometer over Bluetooth. That means other apps can pick up data from it directly. And now, here comes the fun part: building a web app that connects to it.

To do that, I used ChatGPT. Yep, just the regular free version.

I gave it this prompt:

“Write me a web app that connects with a button over Web Bluetooth to the Micro:Bit’s accelerometer service, and shows the X and Y rotation using sliders. Give me the HTML, JavaScript, and CSS in one file.”

Boom. ChatGPT gave me a simple web page with a bit of styling, some basic HTML, and a script that connects to the right Bluetooth service on the Micro:Bit. I didn’t even bother figuring out what all the UUIDs meant—I just copied the code.

I opened it up in CodePen, pasted everything into the HTML window, and hit “run.” Clicked to connect to the Micro:Bit, paired the device—and boom. It just worked. The webpage started showing the rotation from the Micro:Bit’s accelerometer right there on the screen.

That’s actually how I built most of the web apps on the Cardboard Robots site. Sometimes it’s this smooth, sometimes not. But if anything breaks? Just pop open the JavaScript console, grab the error, throw it back into ChatGPT, and say, “Hey, fix this.”

Honestly, coding feels more and more like a thing of the past. You don’t even have to know what everything means anymore. As long as you can tell if it works, you’re good.

I pushed it further with a second prompt:

“Now give me a rotating 3D cube instead of sliders, and make it look more fancy.”

I love throwing vague requests at it like “make it look better”—and it somehow gets it. I pasted the new code into CodePen again, and now I’ve got a 3D cube rotating in sync with the Micro:Bit. It’s not perfect—could use some shading—but it works. The background and buttons had some color too, so it definitely looked more polished.

And that’s the beauty of this whole process. You can go on building these kinds of apps with free AI tools and a Micro:Bit. Making physical digital products has never been this easy.