This project was built using pre.dev, an AI Solutions Architect.
Create music with AI in real-time. Combine the power of Strudel (live coding music environment) with advanced AI for collaborative, instant music generation.
- 🎹 Split Interface — Strudel REPL on the left, AI chat on the right
- 🤖 AI-Powered Code Generation — AI generates Strudel code from your prompts
- ⚡ One-Click Apply — Apply AI-generated code directly to the REPL
- 💾 Persistent Storage — Your API key and chat history stay in your browser
- 🎨 Terminal Aesthetic — Clean, minimal black/white theme with monospace typography
- 🚀 Real-Time Streaming — Watch AI responses appear live
- 🔐 User Authentication — Secure sign-in with Clerk
- Node.js v18 or higher
- Anthropic API Key — Get one free
- Clerk Account — Sign up at clerk.com
Create a .env.local file in the project root with the following variables:
# Clerk (REQUIRED) - Used for user authentication and session management
CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key_hereHow to get these keys:
- Clerk Publishable Key (Required)
- Go to clerk.com and sign up or log in
- Create a new application
- Navigate to the API Keys section in your dashboard
- Copy your Publishable Key (starts with
pk_) - Set as either
CLERK_PUBLISHABLE_KEY
npm installnpm run devOpen your browser to http://localhost:5173
npm run build
npm run preview- Sign In — Create or sign in with your Clerk account
- Add Your API Key — Paste your Anthropic API key at the top of the app (if not set in environment)
- Chat with AI — Describe the music you want (e.g., "Create a drum pattern in C minor")
- Apply Code — Click "Apply to Strudel" to load the generated code
- Play — Press play or Ctrl+Enter in the Strudel REPL to hear your creation
| Layer | Technology |
|---|---|
| Framework | React Router 7 |
| Language | TypeScript |
| UI Library | React 19 |
| Styling | Tailwind CSS v4 |
| State | Zustand |
| Authentication | Clerk |
| AI | Anthropic Claude API |
| Music | Strudel (CDN) |
- Your API key is stored only in your browser's localStorage and is never sent anywhere except directly to Anthropic's API
- User authentication is handled securely by Clerk
- No server storage, no tracking—just you and your music
This project was inspired by TidalCycles, a live coding language for algorithmic music and pattern creation developed by Alex McLean. TidalCycles pioneered the live coding music paradigm and has been a major influence on music technology.
This project would not be possible without Strudel, an incredible live coding environment for algorithmic music and pattern creation that brings TidalCycles to the web. Strudel is developed and maintained by Felix Roos and the broader Strudel community.
Strudel brings the joy of live coding to the web, making music creation accessible and fun. We're grateful for the amazing work the Strudel team has done to make creative music coding available to everyone.
Learn more about Strudel:
- 🌐 Website: strudel.cc
- 📚 Documentation: strudel.cc/learn
- 💻 Codeberg: codeberg.org/uzu/strudel
This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).
- Strudel — AGPL-3.0
- Strudel is a live coding music environment that powers the REPL in this application.
- The Strudel REPL runs as an embedded iframe from
strudel.ccand is not bundled with this project.
Under AGPL-3.0, you are free to:
- ✅ Use, modify, and distribute this software
- ✅ Use it for any purpose (commercial or otherwise)
With the following obligations:
- 📋 Provide a copy of this license with any distribution
- 🔄 Disclose all modifications and when they were made
- 🔗 Distribute source code along with any web-based application
- 🏷️ License derivative works under the same AGPL-3.0 license
For the complete license text, see LICENSE or visit GNU AGPL v3.0.
- Strudel — Live coding music environment
- React — UI library
- Anthropic Claude — AI model