| Filename | Latest commit message | Latest commit date |
|---|---|---|
* fix(examples): resolve DIST_DIR path for npm package execution When servers are compiled to dist/server.js and published to npm, `import.meta.dirname` already points to dist/, so joining with "dist" results in dist/dist/ which doesn't exist. This fix detects whether we're running from TypeScript source or compiled JavaScript and adjusts the path accordingly: - From source (server.ts): use dist/ subdirectory - From compiled (dist/server.js): use current directory Fixes ENOENT errors like: "ENOENT: no such file or directory, open '.../dist/dist/mcp-app.html'" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(pdf-server): mark pdfjs-dist as external in bundle The pdf.worker.mjs file wasn't being found when running from npm because bun bundled pdfjs-dist but didn't include the worker file. By marking pdfjs-dist as external, it uses the installed package from node_modules at runtime where the worker is available. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> |
||
| .. | ||
| src | ||
| .gitignore | ||
| grid-cell.png | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| server.ts | ||
| tsconfig.json | ||
| tsconfig.server.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())

