| Filename | Latest commit message | Latest commit date |
|---|---|---|
* 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> |
||
| .. | ||
| 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())

