Add 8-step beat machine with AI orchestration and Web Audio synthesis

[Copilot]

Implements a complete beat sequencer with 11 tracks (7 active, 4 AI-orchestrated), real-time audio synthesis, and theme customization.

Core Implementation

• Sequencer Component (BeatMachine.tsx): 8-step grid with track management, playback loop, and tempo control (60-200 BPM). Uses useMemo for step duration calculation and requestAnimationFrame for smooth tempo changes.

• Audio Engine (audioEngine.ts): Web Audio API synthesis for all 11 instruments (drums, piano, synth, strings, sax). No external samples required. Type-safe webkit prefix handling via interface declaration merging.

• AI Orchestration (/api/orchestrate): Analyzes active patterns, generates complementary rhythms for disabled tracks (X String, XX String, Tom, Sax) using pattern analysis. Mock implementation ready for real AI service integration.

• Theme System (themes.ts): 6 color schemes (black, gray, white, violet, purple, blue) with consistent styling across all UI elements.

Data Model

// Prisma schema for future persistence
model Pattern {
  trackName     String
  steps         Json        // Array of 8 boolean values
  enabled       Boolean
  aiGenerated   Boolean
}

Key Features

• Real-time playback with visual step indicator
• Metronome on beat 1
• Track editing post-AI generation
• JSON export of patterns and settings
• Fully client-side operation (database optional)

Screenshots

Initial State

With Pattern

After AI Orchestration

Purple Theme

Setup

npm install
cp .env.example .env  # Optional for DB
npm run dev

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/producify/producify/node_modules/.bin/next build 53 -j ACCEPT (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Next.js+prisma Postgres
theme: black,gray,white,violet,purple,blue.
Expandable music studio app 1st module: 8-step beat machine w/ tracks: 1)kick 2)snare 3)hi-hat 4)crash 5)piano 6)heavy synth 7)string. incl. disabled: 8)x string 9) xx string 10)tom 11)sax. Incl. play/stop btn.
Play: loops from start. Tempo control+Metronome btn
"Producify" buttn, when pushed, sends full midi to AI- AI returns orchestral arrangements for tracks 8-11.After response, update tracks 8-11, enable edit 3) export btn

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.