RemixRelay

• 

  Playlist -- where the song's tracks are organized

• 

  Piano Roll with Claude API Integration for Teaching + chatbot window

• 

  Showcase of Claude API highlight feature -- allowing users to interactively engage and build

• 

  Homescreen UI

• 

  AI chatbot assistant helping make melodies and chord progressions

The Core Vision As a team, we were inspired by our passion for music and desire to provide beginner producers a tool to learn and create.

Feature Planning Right away, we knew there were two core principles we wanted to implement for our project. First, we wanted a fully-featured music mixer, with an easy-to-understand interface and user experience compared to a traditional MIDI sound mixer. It was to be done fully in-browser for ease of access, and to allow seamless collaboration. We also wanted to integrate an AI agent into the project, with the goal of providing a personalizable and simple learning process for beginners.

How it was built The project was built by systematically refactoring a monolithic script into a clean, layered FastAPI backend and React-TypeScript frontend architecture. Development followed a bottom-up methodology, progressing through sequential test checkpoints from standalone tool unit tests and Python shell service verification to API Swagger documentation checks and frontend integration. Key architectural decisions included enforcing Pydantic request-response contracts, abstracting server file paths via UUIDs, utilizing sync def routes to match the synchronous Anthropic client, and enabling CORS for the Vite development server. Code migration involved essential fixes such as updating trim parameters, injecting missing note_off messages to prevent hanging notes, and removing module-level startup API calls. Finally, the frontend integrated tightly with the backend through shared TypeScript interfaces mirroring Pydantic schemas and handled extended Claude tool loops with robust loading states

Challenges We ran into problems using Claude’s API and Vercel, specifically figuring out the platform's rules for deployment, which delayed our ability to collaborate efficiently.

What we learned We learned how challenging it is to build a real-time collaborative music studio. Working with Convex taught us how to synchronize changes efficiently.

What's next What would be next for our development is implementing more audio and sound design features, such as reverb, delay, and compression effects. Additionally, more user features would be available, like advanced profile set up, and a way to meet random other producers online.

Built With

• anthropic-api
• api
• claude
• convex
• css
• github
• html
• javascript
• python
• react
• tailwindcss
• tone.js
• typescript
• vercel
• vite