Playable

For as long as instruments have been taught, beginners have started with the same generic exercises and the same simplified songs — not because those songs are motivating, but because adapting real music to a real beginner was too much work for any teacher to do per student. Now life moves faster than ever, attention is the scarcest resource, and the music people actually love is the best motivation they have. Playable closes that gap: tell your AI agent which song you want to learn, and it researches the song on the public web and submits what it finds through WebMCP. Playable verifies the evidence against music theory, compiles a version that fits your hands, and you practice it in the browser with real chord diagrams and a synthesized preview of exactly what you'll play.

Why WebMCP is the right architecture

A cover song can't be ingested: streaming links expose no analyzable audio, and downloading is off the table. But the musical facts exist everywhere in public — chord sites, BPM databases, music encyclopedias. Reading them is a research problem, and research is what LLM agents are exceptional at. Turning facts into a beginner-proof arrangement is a compilation problem, and that needs deterministic software: difficulty scoring, fingering search, audio synthesis. No single system has both.

WebMCP is the first protocol that composes them without merging them. Playable exposes 24 real capabilities as tools; the agent orchestrates them and supplies the one thing the app lacks — live web research. Critically, the agent is a researcher, not an oracle: it submits compact facts with source URLs (never tabs, lyrics, or page dumps), and a deterministic resolver adjudicates them. The model proposes; the page verifies. That boundary is what makes the result trustworthy — and demoable — because every claim on screen traces to an accepted independent source.

From facts to playable: the theory pipeline

The resolver does what a trained arranger would do before trusting a source. Keys normalize enharmonically (G♯ ≡ A♭); chord symbols parse into root + quality family, so "Db" and "Dbmaj7" agree without erasing extensions. Guitar-shaped evidence becomes sounding harmony through the capo invariant — capo 1 "G Em C D" and "Ab Fm Db Eb" reconcile as the same progression. Metrical tempo claims cluster instead of averaging (63, 126 and 189 BPM are one pulse at different levels), transposition look-alikes become hypotheses rather than truths, and confidence is noisy-OR over independent source families — five pages from one database count once. Per-field confidence and conflicts stay visible; structure claimed by no source is labeled approximate.

The verified blueprint becomes a SongGraph, then a compiler searches transformation chains — capo placement, chord-shape substitution, rhythm and tempo simplification, fingering optimization — re-scored against the player's profile (known chords, barre comfort, practice time) and Pareto-filtered over difficulty vs fidelity. Every accepted transformation is explainable: "why 27% easier for you" comes from real diagnostics, and if no capo and open chords are genuinely optimal, the system honestly says so. The same selected arrangement drives the diagrams, the capo mapping, and the Karplus–Strong synthesis you hear.

The experience

One sentence: "I want to learn Perfect by Ed Sheeran. I'm a complete beginner." No link, no upload. The agent follows a live research brief — what's missing, with search queries — submits evidence per independent source, resolves, sets the profile, compiles, and prepares a 20-minute practice session. The user watches confidence fill in field by field, conflicts resolve visibly, and the chord diagrams land front and center. The tool layer itself keeps agents honest: next-step suggestions with priorities, state-aware errors, and reporting guardrails. Agent and human share one state — every agent action is visible, every slider moves the controls the agent sees, and audio never autoplays. A human presses Play.

Implementation

Deliberately thin and native: tools registered via document.modelContext.registerTool in plain TypeScript — no framework, no backend agent, no internal LLM. UI buttons and agent calls execute one shared action layer over one state object, so the page is a live, truthful mirror of the agent's work. Research fusion and compilation are fully deterministic; the agent is the only model in the loop. We didn't put a chatbot inside a guitar website — we made the guitar website agent-native.

Built With

Share this project:

Updates

Submission history