使用说明
木偶戏
用于实验的存储库 果馅饼 现场编码音乐模式，由Strudel MCP服务器支持的自动化开发工作流程。
演示
特性
- 🎵 载入：保存时自动更新Strudel
.strudel或.str文件 - 🔄 文件监视：监视所有
.strudel和.str项目中的文件 - 🎹 集成采样器：在开发过程中运行Strudel采样器服务器
- 🚀 MCP集成：利用Strudel MCP服务器实现无缝浏览器控制
- 📝 TypeScript工作流：使用tsx键入安全开发脚本
⚠️ 当前状态
该项目目前依赖于子模块的两个上游拉取请求，这两个请求都是开放的，正在审查中：
变通方案：在审查这些PR的同时，该项目使用了MCP服务器子模块的一个分支，其中已经实施了更改。叉子在 main-fixed 该回购的分支。如果你想在合并两个列出的PR之前获得此应用程序的工作版本，你必须复制/使用 main-fixed 目前。
先决条件
- Node.js（建议使用v18或更高版本）
- Strudel MCP服务器已安装并配置
安装
快速设置（推荐）
- 克隆此存储库：
git clone <your-repo-url>
cd strudelplay
- 运行setup命令安装所有内容：
npm install
npm run setup
这将：
- 初始化MCP服务器的git子模块
- 安装所有依赖项
- 构建MCP服务器
- 创建您的
.env文件
手动设置
如果您更喜欢手动设置：
- 克隆子模块：
git clone --recurse-submodules <your-repo-url>
cd strudelplay
- 安装主要项目依赖项：
npm install
- 设置MCP服务器：
npm run setup:mcp
- 创建环境文件：
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
可用脚本
| 命令 | 描述 |
|---|---|
| 发展 | |
npm run dev |
启动文件监视器（所有文件） |
npm run dev:file <path> |
仅观看特定文件 |
npm run dev:watch |
启动采样器+文件监视器（推荐） |
npm run dev:full |
启动采样器+自定义样本+文件监视器 |
npm run sampler |
启动Strudel采样器服务器（端口从 .env) |
npm run samples:serve |
启动自定义示例服务器（端口/目录从 .env) |
npm run init |
初始化新的Strudel浏览器会话 |
| 公用事业 | |
npm run cleanup |
杀死端口5555和8000上的滞留进程 |
npm run stop |
清理别名 |
| 设置 | |
npm run setup |
运行所有设置步骤（子模块、MCP服务器、环境文件） |
npm run setup:submodule |
初始化git子模块 |
npm run setup:mcp |
安装并构建MCP服务器 |
npm run setup:env |
创建 .env 从 .env.example 如果它不存在 |
工作流程
-
启动开发环境:
npm run dev:all -
创建或编辑
.strudel文件:- 对以下内容的任何更改
.strudel自动检测文件 - 该模式在Strudel浏览器中立即更新
- 对以下内容的任何更改
-
写下你的模式:
// first_notes.strudel or first_notes.str setcpm(90/4) samples('http://localhost:5555') sound("bd bd hh bd rim bd hh bd") -
保存并观看魔术发生:
- 观察者检测到变化
- 将模式发送到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
使用自定义示例
快速开始
-
添加您的样品 到
samples/目录：samples/ ├── drums/ │ ├── kick.wav │ └── snare.wav └── synths/ └── lead.wav -
启动完整的开发环境:
npm run dev:full -
在你的图案中使用:
// 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 有关组织和使用自定义示例的详细信息。
运作原理
- 文件监视器：用途 监视器 监督
.strudel文件 - MCP客户端：通过MCP SDK与Strudel MCP服务器通信
- 自动更新：当文件更改时，模式将通过MCP工具发送到浏览器
- 采样器集成：运行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实验的个人游乐场。
许可证
麻省理工学院
