Building a Browser Drum Machine with AI

Test Octapad

Inspiration

This one started with a YouTube video. Someone had taken a real synthesizer manual and used it as a reference to build a working digital synth with AI. That idea stuck with me — using something physical and real as a blueprint for something you build in code. I grew up playing drums so a drum machine felt like the natural equivalent for me.

I was also deep in reference images of early 808s and the Behringer RD-8 MKII. That hardware aesthetic was the visual target from the start.

Why I Built It

This one was purely for fun. I wanted to explore something more creative with AI and build something I'd love to play with.

That last part ended up being more true than I expected. If I have five minutes before a meeting I'll open Octapad and mess around with the sequencer. It scratches an itch in a way I didn't anticipate when I started building it.

How I Made It

I started in Warp using Claude Code but moved to Cursor partway through — I just prefer that interface. The workflow was similar to my last project: be specific with the agent upfront, use natural language to describe behavior, and iterate from there.

For the visual direction I fed Cursor reference images of the 808 and the RD-8 MKII alongside links for context. It got the hardware aesthetic down surprisingly well. I was happy with the dark version for a while until I prompted a light version almost on a whim — and ended up preferring it. That's the one that exists now.

The sequencer is my favorite part of the whole thing and a friend helped me brainstorm some of the enhancements to it. The pads can also be triggered with your 1 through 8 keys which makes it feel surprisingly playful to use.

This dark version was the first version I was happy with. Cursor did a great job interpreting the references. From there I kept pushing it with more prompts to make the buttons and knobs feel more skeuomorphic and tactile.