strudelplay (Therebelrobot)

木偶戏

用于实验的存储库 果馅饼 现场编码音乐模式，由Strudel MCP服务器支持的自动化开发工作流程。

演示

Demo

特性

• 🎵 载入：保存时自动更新Strudel .strudel 或 .str 文件
• 🔄 文件监视：监视所有 .strudel 和 .str 项目中的文件
• 🎹 集成采样器：在开发过程中运行Strudel采样器服务器
• 🚀 MCP集成：利用Strudel MCP服务器实现无缝浏览器控制
• 📝 TypeScript工作流：使用tsx键入安全开发脚本

⚠️ 当前状态

该项目目前依赖于子模块的两个上游拉取请求，这两个请求都是开放的，正在审查中：

• PR#8：修复：将keyboard.type（）替换为insertText（），以防止自动配对损坏
• PR#9：添加实时模式更新的更新按钮支持

变通方案：在审查这些PR的同时，该项目使用了MCP服务器子模块的一个分支，其中已经实施了更改。叉子在 main-fixed 该回购的分支。如果你想在合并两个列出的PR之前获得此应用程序的工作版本，你必须复制/使用 main-fixed 目前。

先决条件

• Node.js（建议使用v18或更高版本）
• Strudel MCP服务器已安装并配置

安装

快速设置（推荐）

1. 克隆此存储库：

git clone 
cd strudelplay

1. 运行setup命令安装所有内容：

npm install
npm run setup

这将：

• 初始化MCP服务器的git子模块
• 安装所有依赖项
• 构建MCP服务器
• 创建您的 .env 文件

手动设置

如果您更喜欢手动设置：

1. 克隆子模块：

git clone --recurse-submodules 
cd strudelplay

1. 安装主要项目依赖项：

npm install

1. 设置MCP服务器：

npm run setup:mcp

1. 创建环境文件：

npm run setup:env

用法

快速开始

新加入此工作流程？ 看 QUICKSTART.md 获取包含示例文件的分步教程！

初始化Strudel并启动开发工作流程：

# 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. 启动开发环境:

   npm run dev:all

1. 创建或编辑 .strudel 文件:

- 对以下内容的任何更改 .strudel 自动检测文件 - 该模式在Strudel浏览器中立即更新

1. 写下你的模式:

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

1. 保存并观看魔术发生:

- 观察者检测到变化 - 将模式发送到Strudel MCP服务器 - 您的图案会在浏览器中自动更新

文件组织

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)

配置

这 .env 文件支持以下选项：

# 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. 添加您的样品 到 samples/ 目录：

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

1. 启动完整的开发环境:

   npm run dev:full

1. 在你的图案中使用:

   // 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")

看 samples/README.md 有关组织和使用自定义示例的详细信息。

运作原理

1. 文件监视器：用途 监视器 监督 .strudel 文件
2. MCP客户端：通过MCP SDK与Strudel MCP服务器通信
3. 自动更新：当文件更改时，模式将通过MCP工具发送到浏览器
4. 采样器集成：运行Strudel音频样本采样器

建筑

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

故障排除

监视器无法启动

• 确保Strudel MCP服务器安装正确
• 检查Node.js是否在您的PATH中
• 验证 .env 配置

模式未更新

• 检查终端是否有错误消息
• 确保Strudel浏览器窗口已打开
• 验证 .strudel 文件语法有效

TypeScript错误

• 跑 npm install 确保所有依赖项都已安装
• TypeScript错误 @types/node 应在安装后解决

贡献

您可以随意尝试、添加模式和改进工作流程！这是Strudel实验的个人游乐场。

许可证

麻省理工学院

资源

• Strudel文件
• Strudel教程
• 模型上下文协议