VibeForge

What is VibeForge?

VibeForge is a fully browser-based music production studio powered by AI. Open it, describe the vibe you want, and in seconds you have a beat — complete with drum patterns, chord progressions, a bassline, and a creative direction to guide your session. No downloads, no account, no music theory required.

Inspiration

Most people have musical ideas but no way to express them. DAWs like Ableton and FL Studio are powerful but take months to learn. I wanted to build something that met people where they are — a studio that feels like a sketchpad, not a cockpit.

The idea clicked when I asked: what if you could describe a mood and instantly hear it? That question became VibeForge.

How I Built It

VibeForge is built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no build step. Every sound you hear is synthesized in real time using the Web Audio API: oscillators, noise buffers, biquad filters, convolution reverb, delay lines, a dynamics compressor, and a MediaRecorder for export.

The AI layer calls Groq's LLama 3.3 70B model via a Vercel serverless proxy, which returns a structured JSON object — BPM, chord names, drum patterns, scale notes, and a creative direction — that gets applied directly to the sequencer and chord pads.

Key systems built from scratch:

• Step Sequencer — 16-step grid with swing timing, per-row note assignment, and a piano roll editor
• Chord Pads — 8 pads with frequency calculation from chord names and arpeggiator sync
• Drum Machine — 16 velocity-sensitive pads with keyboard shortcuts
• Effects Rack — reverb, delay, distortion, and compressor with real-time parameter control
• Visualizer — 3-mode canvas animation (particles, waveform, frequency bars) driven by an AnalyserNode
• Mixer — per-channel volume, mute, solo, and live VU metering
• Project System — save/load up to 10 projects in localStorage

Challenges

API key security — Exposing the Groq key client-side is a non-starter. I solved this with a Vercel serverless function that reads process.env.GROQ_API_KEY server-side and proxies requests, so no key ever reaches the browser.

Timing precision — JavaScript's setTimeout drifts. The sequencer uses

Built With

• canvas-api
• css3
• groq
• html5
• javascript
• llama-3.3-70b
• mediarecorder-api
• vercel
• vercel-serverless-functions
• web-audio-api