BeatMCP

BeatMCP is a collaborative beat-making canvas built for the WebMCP Challenge.

Inspiration

Making music with AI often feels disconnected: you describe a beat, wait for a result, then try to explain what feels wrong. I wanted a more natural workflow where a person keeps creative control while an agent can contribute directly inside the same music workspace.

The core question was: what if an agent could use a music-making web app through structured controls instead of guessing how to click through the interface?

What it does

BeatMCP is a four-bar, 64-step beat canvas where a person and an agent can build an instrumental together.

The studio includes drums, bass, piano, guitar, bell, keys, pad, and lead lanes. Users can set tempo and key, program steps manually, and shape a beat in a shared timeline.

Agents can use WebMCP tools to:

• read the current pattern and musical state
• set tempo, key, and scale
• write drum, bass, melody, and chord patterns
• create chords on Piano, Keys, and Pad lanes
• humanize timing and velocity
• reset a beat, start playback, and begin a live composition session
• list playable instruments and save/reuse patterns

A key feature is live composition. When an agent writes a new layer, BeatMCP auditions the first new sound in sequence—such as kick, bass, chords, then melody—while the changed steps flash on the grid. This makes the agent's creative process visible and audible instead of hiding everything until the end.

How we built it

BeatMCP is built with Next.js, React, TypeScript, Zustand, Tone.js, and the @mcp-b WebMCP libraries.

• Next.js and React power the browser experience.
• Zustand keeps the beat, tracks, tempo, key, and pattern state synchronized.
• Tone.js synthesizes drums and instrument voices in the browser.
• WebMCP exposes structured tools directly from the page so agents can work with the same musical controls as users.
• The studio uses a 64-step master timeline so a beat can develop across four bars rather than being limited to one short loop.

Challenges we ran into

The hardest part was making the human-agent collaboration feel trustworthy in real time.

Browser audio needs an initial user gesture, so we designed the flow around one Start click before an agent can begin live composition. We also had to prevent overlapping transport loops, keep WebMCP tool discovery fresh after page reloads, and make agent edits understandable through visual flashes and queued sound auditions.

Another challenge was avoiding a traditional “AI generates everything” interaction. We wanted the agent to be musically useful without replacing the producer's judgment.

What we learned

We learned that WebMCP is most compelling when the agent has precise, meaningful controls and the person can immediately understand the consequences of each action.

For music, that means an agent should not just return text or a finished file. It should be able to set a key, place a kick, write a chord, audition a sound, and respond to human feedback in the same live workspace.

Why WebMCP

BeatMCP becomes meaningfully better because agents can use the web app directly through structured tools. The agent reads the real state of the beat and changes the same instrument lanes the person sees and hears.

That creates a collaborative workflow: the agent handles musical structure and repetitive programming, while the person decides what feels right.

Built With

• agents
• ai
• api
• audio
• generative
• mcp-b
• music
• next.js
• react
• tech
• tone.js
• typescript
• vercel
• web
• webmcp
• zustand