The Technique
A developer used Claude Code to build a web-based music maker where Claude actively participates in creating beats. Instead of relying on complex audio APIs or the limited computer-use feature, they created a simple but powerful bridge: music as JSON data.
The application works like this:
- The frontend is a basic web interface (inspired by Google's Song Maker)
- Claude Code generates musical patterns as structured JSON
- The web app parses this JSON to play corresponding sounds
This approach bypasses the need for Claude to manipulate audio files directly or use computer control features that might be "lacking" for creative tasks.
Why It Works
JSON is Claude's native language. Claude 3.5 Sonnet and Opus 4.6 excel at generating structured data formats, making JSON a perfect intermediary between Claude's creative suggestions and executable code.
When you ask Claude to "create a drum pattern" or "generate a melody," it can output something like:
{
"bpm": 120,
"pattern": [
{"time": 0, "note": "kick", "duration": 0.5},
{"time": 0.5, "note": "snare", "duration": 0.5},
{"time": 1, "note": "hihat", "duration": 0.25}
]
}
This JSON can then be processed by a simple JavaScript audio engine. The developer's implementation shows that even complex creative outputs (music) can be reduced to data structures that Claude handles exceptionally well.
How To Apply It
You can use this JSON-bridge pattern for any interactive application where you want Claude to participate:
- Define a simple schema for your domain:
// For a drawing app
{
"shapes": [
{"type": "circle", "x": 100, "y": 100, "radius": 50, "color": "#ff0000"}
]
}
// For a game level editor
{
"tiles": [[1, 0, 1], [0, 2, 0]],
"entities": [{"type": "player", "x": 1, "y": 1}]
}
- Build a minimal frontend that can parse and render this JSON. Use Claude Code to write the initial version:
Create a simple HTML page with JavaScript that:
1. Has a textarea for JSON input
2. Parses the JSON when I click "Render"
3. Draws circles based on the shapes array in the JSON
- Iterate with Claude by asking it to generate both the JSON data AND the code improvements:
I want to add animation. Generate:
1. Updated JSON schema with velocity properties
2. Updated renderer code to handle animation
3. Example JSON with moving shapes
The developer's music maker is hosted at https://stylish-rugged-duck.instavm.site/ if you want to see the approach in action.
Beyond Music
This JSON-as-bridge technique works for:
- Data visualization tools (Claude generates chart configurations)
- Interactive tutorials (Claude creates step-by-step instructions as JSON)
- Game content generators (levels, characters, items)
- UI mockup tools (Claude designs layouts as component trees)
The key insight: Claude doesn't need to manipulate your application directly. It just needs to speak a language your application understands—and JSON is a language Claude speaks fluently.
