Build Apps with AI

Learn How To Build Apps With AI

https://youtu.be/-H8BO4bbqDA

How to start?

  1. Download template code to your Calliope mini (v3) board (available below)
  2. Open HTML APP template and connect to Calliope mini
  3. Save the HTML page template to disk as file (simply go to Chrome -> File->Save as file)
  4. Open ChatGPT, upload .html template file and start modifying it

Check example apps

Dashboard App
Key Lock App
App Template

REMEMBER – each of this little apps can be saved as file and then uploaded it to ChatGPT to ask it how it works and do modifications for you!

Code template for Calliope mini

Code template for HTML app

In this lesson, we dive into the world of VIBE coding — a modern approach to app development where you don’t write code manually but instead collaborate with an AI chatbot like ChatGPT to bring your ideas to life. Together, we’ll build mobile apps that control an educational IoT smart home powered by the Calliope mini.

What Is VIBE Coding?

VIBE coding is a creative workflow where the human provides vision, intent, and logic, while the AI does the technical implementation. You simply describe what you want, and the AI generates the HTML, JavaScript, and interaction logic. Think of it as working with an incredibly knowledgeable coding assistant.

Use Case: Controlling a Smart Home

In this project, we use Calliope mini to simulate an IoT smart home. We’ll build two simple mobile apps:

  1. Dashboard App – Displays light and temperature readings, controls a fan (air conditioning), door, and lights.
  2. Keypad App – A PIN interface to unlock the door via a key code.

These apps communicate over Bluetooth UART, and the Calliope mini is preloaded with a special template code that:

  • Opens the Bluetooth UART service
  • Sends real-time light and temperature data
  • Listens for command letters like X, Y, C, D, R, G, B, etc., to control various functions
  • Responds to secret codes like 1397 to trigger complex events like blinking lights and melodies

You’ll find this full template code on the project page.

Note: Make sure to use the specific NeoPixel library included in the template. The standard Bluetooth library in MakeCode won’t support concurrent NeoPixel + Bluetooth functionality.

Step-by-Step: Creating a Dashboard App with ChatGPT

1. Start from a Template

We begin with a simple HTML template that lets you:

  • Connect to Calliope mini over Bluetooth
  • Send commands to open/close the door

2. Ask ChatGPT to Add New Features

You can incrementally ask the chatbot to:

  • Add light ON/OFF buttons that send W and OFF
  • Add red, green, and blue light control buttons
  • Display real-time light levels using a slider and emoji 🌞

The code generated by ChatGPT is pasted into CodePen — a free online HTML editor — for live preview and editing.

3. Test Your App

Click “Connect”, choose your Calliope mini, and try all the functions. You’ll see sensor data updating in real-time and lights responding to commands.

4. Debug with AI

If anything doesn’t work, open the JavaScript console in CodePen and copy any error message back to ChatGPT. Ask what’s wrong — and let the chatbot fix it for you.

Going Further: Creating a Keypad Lock App

Want to add a little security to your smart home? Here’s how:

1. Create a New HTML App

Start a new CodePen project. Ask ChatGPT to create a responsive keypad interface that lets users input a 4-digit code.

2. Use Hardcoded Logic in Calliope

In your Calliope mini code:

  • If data received = 1397 → play a melody, open the door
  • If data = 0000 → close the door, turn off lights

3. Test the App on Your Smartphone

  • Save your CodePen project
  • Use the “Create QR Code” function in Chrome
  • Scan it with your phone and open in Chrome, Opera, or Bluify (not Safari)
  • Click connect and control your IoT system from your mobile device

Why This Matters

This project isn’t just about building an app — it’s about:

  • Teaching real-world coding applications
  • Using AI as a creative partner
  • Showing students the power of IoT, Bluetooth, and web technologies
  • Encouraging digital problem-solving and experimentation

Final Thoughts

With just a browser, a CodePen account, and ChatGPT, you can create real, functioning mobile apps that interact with physical devices like Calliope mini. Whether it’s dashboards, smart switches, or security systems — the only limit is your imagination.

So, what will your students build next?

See more:

Educational Smart Home modelEdu Smart Home – Building manual Edu Smart Home Coding with Calliope miniEdu Smart Home – Coding