Sonicviz

• 

  The WebMCP Inspector completing the example agent request.

• 

  The WebMCP Inspector generating a new lesson from a voice request.

• 

  Harmonica explorer with chord and scale overlays on a 10-hole diatonic harp.

• 

  Practice view with the guitar playing the guide melody.

• 

  Fretboard explorer with chord and scale overlays and interval labels.

• 

  Practice view with the harmonica playing the guide melody.

Inspiration

I play guitar and harmonica (see https://komuso.info/). A lot of practice time is not spent playing, it's spent fiddling with practice tools and setup. Finding an exercise, working out which holes and frets play the same melody, slowing a loop down. These are common music practice issues that waste time and effort that could be better spent playing and learning.

AI tools are good at making a finished song (see my side project https://www.crisiskaraoke.com/) but I did not need a song. I needed short lessons I could play to learn scales and chords in different tunings on both instruments, that I could rapidly configure with a couple of clicks or ultimately hands-free by voice.

What it does

SonicViz is a practice app with three connected views: Fretboard, Harmonica, and Practice. Fretboard and Harmonica views allow you to quickly build mental models of scales and chords in different tunings and keys on both instruments. These mental models are critical to developing creative improvisation skills that help you break out of pattern playing ruts.

Practice keeps one chord progression and one timed melody. The guitar positions, the harmonica holes, the score, and the TAB are all views of that same melody. Change the instrument and the notes stay put. Only the way your hands (or lips in the harmonica's case) reach them changes.

WebMCP makes it hands-free. SonicViz exposes 12 typed tools, so a browser agent reads and writes actual musical state instead of guessing at the screen. I say "loop bars 1 through 2 at 40 BPM and play." The agent makes the call, and I play along with the harmonica still in my hand. Playback only starts after I allow it, and only for that page session. You can use WebMCP to interact with all three tabs.

The video uses typed commands for clarity; the same requests work by voice through a custom WebMCP extension with a mic lock for hands-free practice.

How we built it

From scratch, starting August 27, with just an idea for a new type of app. I leveraged my experience as developer of https://harpninja.com/ to give me a clear direction to address the problem with a workable solution with WebMCP being the key to unlock it. Plain HTML, CSS, and JavaScript. No framework, no backend. KISS to see if the idea works.

AI assistants did most of the coding, mainly GPT-5.6 Sol plus a few other models, while I made the musical and product calls. The core is a pure function. A seed, a key, and a style produce the same lesson every time, and everything else is derived from that.

Challenges we ran into

Taming the agent was the hard part. A model will reorder tool calls, drop an argument, or answer from memory instead of reading the current state. Three bugs shipped and only showed up when I tested with a real model and complex mixed commands. A loop command toggled off on the second call. A mute command could not tell which direction I meant. An agent answered "already set" without checking the app. Each fix went into the tool contract.

Accomplishments that we're proud of

The boundary is deterministic even though the agent is not. The same seed gives the same lesson every time. Consent is real. Agent playback waits for an explicit page-session permission. One melody reprojects across guitar, harmonica, score, and TAB without changing. Twenty-six browser checks pass, plus a long manual QA run.

What we learned

Determinism is something you have to re-establish every time you use the tools. The schema limits what the model can pass, but it doesn’t dictate the model’s decisions. That’s why discipline has to exist at the tool boundary. Idempotency, a single source of truth, and thorough testing with real models, both automated and manual, are essential. I’ve shared more about these lessons in a blog post: https://sonicviz.com/2026/09/03/webmcp-deterministic-hybrid-app-design/

What's next for Sonicviz

Add more instruments, with lesson briefs that guide and coach. Include per-chord scale options so pros can practice the way they improvise. Consider simple performance recognition, letting the app detect if you hit the note using real-time pitch feedback. AI should enhance the process, not replace it.

Nothing exercises the mind, body, and spirit quite like playing music on a real instrument. The tactile connection—the kinesthetic, energetic back-and-forth with the instrument—is a vital part of the experience and the process. It’s all about lips, fingertips, and ears. The hands memorize the shapes, the ears absorb the sounds, and the patience to loop a bar until it’s perfect becomes the skill that truly counts. The tool exists to support that process. The goal remains the same: the output isn't the song; it's a person who can play it.

Built With

• css
• html
• javascript
• web-audio-api
• webmcp