🎥 I Built Music You Can Talk To
An interactive web application that combines AI language models with Strudel (a live coding music platform) to enable users to generate music through natural language prompts.
Toaster allows users to describe the music they want in plain English, and AI generates Strudel code that immediately transforms into playable audio compositions.
This monorepo contains:
/ui- Frontend React application/server- Backend Cloudflare Workers API/docs- Project documentation
- Node.js 18 or higher
- pnpm package manager (
npm install -g pnpm) - Cloudflare account (for deploying the API)
- Clone the repository
git clone <repository-url>
cd toaster- Set up the frontend
cd ui
pnpm install- Set up the backend
cd ../server
pnpm install
cp .dev.vars.example .dev.vars
# Edit .dev.vars with your configuration- Start the backend API (in one terminal):
cd server
pnpm devThis starts the API at http://localhost:8787
- Start the frontend (in another terminal):
cd ui
pnpm devThis starts the UI at http://localhost:5173
- Open
http://localhost:5173in your browser
(Optional) Create ui/.env with:
VITE_API_URL=http://localhost:8787
If not specified, the API URL defaults to http://localhost:8787.
Create server/.dev.vars with your API keys for LLM providers when ready to integrate.
Frontend:
- React 18 + TypeScript
- Vite
- Tailwind CSS + ShadCN UI
- Strudel (music synthesis)
Backend:
- Cloudflare Workers
- Hono API framework
- TypeScript
- Use
pnpmfor all package management - The frontend runs on port 5173 (Vite default)
- The backend runs on port 8787 (Wrangler default)
- Functional programming style preferred
- No classes/OOP
Build and deploy the frontend to your preferred hosting service:
cd ui
pnpm build
# Deploy the dist/ folderDeploy to Cloudflare Workers:
cd server
pnpm deploySee individual README files in /ui and /server for more detailed information about each part of the application.
Additional documentation can be found in the /docs folder:
PRODUCT_BRIEF.md- Product overview and requirements