| Filename | Latest commit message | Latest commit date |
|---|---|---|
Update all example servers to use the new recommended metadata format for associating UI resources with tools. The old `RESOURCE_URI_META_KEY` constant is deprecated in favor of the nested `_meta.ui.resourceUri` structure. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server-utils.ts | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Example: Sheet Music Server
A demo MCP App that renders ABC notation as sheet music with interactive audio playback using the abcjs library.
![]() |
![]() |
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
-
Install dependencies:
npm install -
Build and start the server:
npm run start:http # for Streamable HTTP transport # OR npm run start:stdio # for stdio transport -
View using the
basic-hostexample 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
ontoolinputhandler - Uses abcjs for audio playback controls and sheet music rendering (in
renderAbc())

