DEV Community

Melogen
Melogen

Posted on

# How I Built a Web Editor That Turns AI-Generated Music Into Playable MIDI

TL;DR: I asked ChatGPT to compose a melody. It gave me JSON. I had no way to play it. So I built Melogen — a free web editor that imports music data from any LLM, visualizes it on a piano roll, adds harmony and arrangement, and exports production-ready MIDI.


The Problem

If you ask ChatGPT, Claude, or Gemini to "compose a melody in C major, 120 BPM, output as JSON," you get something like this:

{
  "tempo": 120,
  "key": "C",
  "notes": [
    { "bar": 0, "offset_beats": 0, "dur_beats": 1, "midi": 60 },
    { "bar": 0, "offset_beats": 1, "dur_beats": 0.5, "midi": 64 },
    { "bar": 0, "offset_beats": 1.5, "dur_beats": 0.5, "midi": 67 }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Cool. Now what?

You can't drag this into GarageBand. Audacity won't open it. Your DAW has no idea what to do with it. The music is trapped inside a JSON blob.

I looked for a tool that could bridge this gap — something that takes structured AI music output and turns it into something you can hear, edit, and export. I couldn't find one. So I built it.


What I Built

Melogen is a web-based music editor designed specifically for AI-generated music. The workflow is:

  1. Ask any LLM to compose music (structured JSON output)
  2. Paste it into Melogen
  3. See it on a piano roll, hear it instantly
  4. Add harmony, bass, drums, and arrangement with one click
  5. Export multi-track MIDI for any DAW

It's free at melogen.app.

Here's what the editor looks like in action:

(If you're reading this on Dev.to, imagine a dark-themed piano roll with colored note blocks, a 6-track mixer on the left, and playback controls at the top.)


Tech Stack

Layer Technology
Framework Next.js 14 (App Router)
Language TypeScript
Styling Tailwind CSS
Audio Engine Tone.js + custom synth patches
MIDI Export Custom encoder (no heavy libraries)
Auth Magic Link (Resend + Supabase)
Payments Lemon Squeezy
Hosting Vercel
AI Mixing Multi-LLM with fallback (Grok → Deepseek → Llama via OpenRouter)

Top comments (2)

Collapse
 
embernoglow profile image
EmberNoGlow

This is a great idea. I had a similar idea. I would recommend asking the AI ​​for a melody not in JSON format, but in a more compact format – I used a simple array with tuples containing the note and its duration. Great work, keep up the good work!

Collapse
 
adams_watercolorli_4ad3 profile image
Melogen

Thanks! Great minds think alike 😄

You make a good point about compact formats — tuples are definitely more
token-efficient. Melogen's parser actually handles multiple formats already
(different field names, indexing styles, etc.), so adding tuple support
would be a natural next step.

Would love to check out your project — what format do you use exactly?
Maybe we can find some overlap.