| Filename | Latest commit message | Latest commit date |
|---|---|---|
- Add `.gitignore` files to all 19 examples (`node_modules/`, `dist/`) - Replace custom `log` objects with standard `console` methods - Add `ontoolcancelled` handler to all `basic-server-*` examples - Add host styling integration (`applyDocumentTheme`, `applyHostFonts`, `applyHostStyleVariables`) to non-React `basic-server-*` examples - Add section headers for better code organization in feature examples - Update READMEs with Build System section explaining single-file bundling These changes make examples more consistent and easier to adapt. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
| .. | ||
| src | ||
| .gitignore | ||
| grid-cell.png | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| 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
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
ontoolinputhandler - Uses abcjs for audio playback controls and sheet music rendering (in
renderAbc())

