ext-apps/examples/sheet-music-server
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Olivier Chafik ecc593bcec
chore: release 0.3.0 (#204)
* chore: bump version to 0.3.0

Breaking changes:
- `viewport` replaced with `containerDimensions` in host context

New examples:
- video-resource-server
- sheet-music-server

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(video-resource-server): add missing server-utils and fix import path

The video-resource-server was importing from a non-existent
../shared/server-utils.js path. Added the server-utils.ts file
and fixed the import to use ./src/server-utils.js like other examples.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: update ext-apps version refs to 0.3.0

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-09 00:55:45 +00:00
..
src feat: publish example servers to npm (#184) 2026-01-08 20:08:50 +00:00
mcp-app.html Add sheet-music-server example 2026-01-05 16:06:09 -06:00
package.json chore: release 0.3.0 (#204) 2026-01-09 00:55:45 +00:00
README.md Add sheet-music-server example 2026-01-05 16:06:09 -06:00
server-utils.ts feat: publish example servers to npm (#184) 2026-01-08 20:08:50 +00:00
server.ts feat: publish example servers to npm (#184) 2026-01-08 20:08:50 +00:00
tsconfig.json Add sheet-music-server example 2026-01-05 16:06:09 -06:00
vite.config.ts Add sheet-music-server example 2026-01-05 16:06:09 -06:00

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

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\nT:C Major Scale\nM:4/4\nL:1/4\nK:C\nC 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())