Skip to content

Latest commit

 

History

History

README.md

Example: Sheet Music Server

A demo MCP App that renders ABC notation as sheet music with interactive audio playback using the abcjs library.

Twinkle, Twinkle Little Star Playing on repeat

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "sheet-music": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-sheet-music",
        "--stdio"
      ]
    }
  }
}

Local Development

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "sheet-music": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/sheet-music-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

Features

  • Audio Playback: Built-in audio player with play/pause and loop controls
  • Sheet Music Rendering: Displays ABC notation as properly formatted sheet music

Running

  1. Install dependencies:

    npm install
  2. Build and start the server:

    npm run start:http  # for Streamable HTTP transport
    # OR
    npm run start:stdio  # for stdio transport
  3. View using the basic-host example or another MCP Apps-compatible host.

Tool Input

When calling the play-sheet-music tool, provide ABC notation:

{
  "abcNotation": "X:1
T:C Major Scale
M:4/4
L:1/4
K:C
C D E F | G A B c |"
}

ABC Notation Examples

C Major Scale:

X:1
T:C Major Scale
M:4/4
L:1/4
K:C
C D E F | G A B c |

Twinkle, Twinkle Little Star:

X:1
T:Twinkle, Twinkle Little Star
M:4/4
L:1/4
K:C
C C G G | A A G2 | F F E E | D D C2 |
G G F F | E E D2 | G G F F | E E D2 |
C C G G | A A G2 | F F E E | D D C2 |

Architecture

Server (server.ts)

Exposes a single play-sheet-music tool that accepts:

  • abcNotation: ABC notation string to render

The tool validates the ABC notation server-side using the abcjs parser and returns any parse errors. The actual rendering happens client-side when the UI receives the tool input.

App (src/mcp-app.ts)

  • Receives ABC notation via ontoolinput handler
  • Uses abcjs for audio playback controls and sheet music rendering (in renderAbc())