A repository for experimenting with Strudel live coding music patterns, with an automated development workflow powered by the Strudel MCP server.

• 🎵 Auto-reload: Automatically updates Strudel when you save .strudel or .str files
• 🔄 File watching: Monitors all .strudel and .str files in your project
• 🎹 Integrated sampler: Run the Strudel sampler server alongside your development
• 🚀 MCP Integration: Leverages the Strudel MCP server for seamless browser control
• 📝 TypeScript workflow: Type-safe development scripts with tsx

This project currently depends on two upstream pull requests of the submodule that are open and under review:

• PR #8: Fix: Replace keyboard.type() with insertText() to prevent auto-pairing corruption
• PR #9: Add Update Button Support for Live Pattern Updates

Workaround: While these PRs are in review, this project uses a fork of the MCP server submodule with the changes already implemented. The forked is available in the main-fixed branch of this repo. If you want a working version of this application prior to the merge of the two listed PRs, you'll have to copy/use main-fixed for now.

• Node.js (v18 or higher recommended)
• The Strudel MCP server installed and configured

1. Clone this repository:

git clone <your-repo-url>
cd strudelplay

2. Run the setup command to install everything:

npm install
npm run setup

This will:

• Initialize the git submodule for the MCP server
• Install all dependencies
• Build the MCP server
• Create your .env file

If you prefer to set up manually:

1. Clone with submodules:

git clone --recurse-submodules <your-repo-url>
cd strudelplay

2. Install main project dependencies:

npm install

3. Set up the MCP server:

npm run setup:mcp

4. Create environment file:

npm run setup:env

New to this workflow? See QUICKSTART.md for a step-by-step tutorial with example files!

Initialize Strudel and start the development workflow:

# Initialize Strudel browser instance
npm run init

# Start the file watcher (all .strudel and .str files)
npm run dev

# Watch a specific file only
npm run dev:file patterns/my-song.strudel

# Start sampler + file watcher (recommended)
npm run dev:watch

# Start sampler + custom samples + file watcher (with custom samples)
npm run dev:full

1. Start the development environment:

   npm run dev:all

2. Create or edit a .strudel file:

   • Any changes to .strudel files are automatically detected
   • The pattern is instantly updated in the Strudel browser

3. Write your patterns:

   // first_notes.strudel or first_notes.str
   setcpm(90/4)
   samples('http://localhost:5555')
   sound("bd bd hh bd rim bd hh bd")

4. Save and watch the magic happen:

   • The watcher detects the change
   • Sends the pattern to the Strudel MCP server
   • Your pattern updates in the browser automatically

strudelplay/
├── patterns/           # Store your .strudel pattern files here
├── scripts/           # Development workflow scripts
│   ├── mcp-client.ts  # MCP server communication
│   ├── watcher.ts     # File watcher implementation
│   └── init-strudel.ts # Initialization script
├── .env               # Environment configuration
└── *.strudel          # Your pattern files (anywhere in project)

The .env file supports the following options:

# Port for the Strudel sampler server (@strudel/sampler)
PORT=5555

# Custom samples server configuration
SAMPLES_PORT=8000      # Port for serving your custom samples
SAMPLES_DIR=samples    # Directory containing your samples

# Path to the Strudel MCP server (uses submodule by default)
STRUDEL_MCP_PATH=./mcp-server/dist/index.js

# Optional: Node executable path
# NODE_PATH=/usr/local/bin/node

1. Add your samples to the samples/ directory:

   samples/
   ├── drums/
   │   ├── kick.wav
   │   └── snare.wav
   └── synths/
       └── lead.wav
   

2. Start the full dev environment:

   npm run dev:full

3. Use in your patterns:

   // Load both Strudel's samples and your custom ones
   samples('http://localhost:5555', 'http://localhost:8000')
   
   // Use your custom samples
   sound("drums/kick drums/snare")

See samples/README.md for detailed information about organizing and using custom samples.

1. File Watcher: Uses chokidar to monitor .strudel files
2. MCP Client: Communicates with the Strudel MCP server via the MCP SDK
3. Auto-update: When files change, the pattern is sent to the browser through MCP tools
4. Sampler Integration: Runs the Strudel sampler for audio samples

┌─────────────────┐
│  .strudel files │
└────────┬────────┘
         │ (file change detected)
         ↓
┌─────────────────┐
│  File Watcher   │
│  (chokidar)     │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│   MCP Client    │
│  (SDK stdio)    │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│  Strudel MCP    │
│     Server      │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│ Strudel Browser │
│   (Puppeteer)   │
└─────────────────┘

• Ensure the Strudel MCP server is properly installed
• Check that Node.js is in your PATH
• Verify .env configuration

• Check the terminal for error messages
• Ensure the Strudel browser window is open
• Verify the .strudel file syntax is valid

• Run npm install to ensure all dependencies are installed
• The TypeScript errors about @types/node should resolve after installation

Feel free to experiment, add patterns, and improve the workflow! This is a personal playground for Strudel experimentation.

MIT

• Strudel Documentation
• Strudel Tutorial
• Model Context Protocol