Waveframe

• Live URL: https://waveframe-webmcp.netlify.app/
• Github URL: https://github.com/amit-ksh/webmcp-audio-studio

What it does

Waveframe is a browser-based audio studio for product videos. Import a video, create narration and background music, arrange the timeline, adjust the mix, and export the finished result—all locally in the browser.

Why WebMCP

Audio editing is iterative: people make creative decisions while agents can handle repetitive production tasks. WebMCP lets an agent inspect the active project, transcribe audio, generate voiceover and music, edit timeline clips, adjust the mix, and export—without relying on fragile screen automation.

People stay in control of the visual timeline and creative direction, while the agent can quickly carry out structured actions. Both use the same project and see the same changes immediately, making it much easier to turn a raw product video into a polished deliverable.

How we built it

Waveframe uses React, TypeScript, IndexedDB, Web Audio, and browser-native media export. Speech transcription, text-to-speech, and music generation run in Web Workers to keep the app responsive and media stays local to the browser.

WebMCP is implemented with document.modelContext.registerTool. The app exposes 13 typed tools, and both the UI and the agent use one shared command bus. This keeps agent actions consistent, validated, and visible in the studio.

Built With

• netlify
• tanstackquery
• tanstackstart
• webmcp