ext-apps/examples/sheet-music-server
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Olivier Chafik 89a684546b
fix(examples): resolve DIST_DIR path for npm package execution (#277)
* 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>
2026-01-15 12:23:13 +00:00
..
src Improve consistency and organization of examples for AI learning 2026-01-13 20:48:02 -06:00
.gitignore Improve consistency and organization of examples for AI learning 2026-01-13 20:48:02 -06:00
grid-cell.png feat: add example gallery with auto-generated screenshots (#253) 2026-01-13 15:12:18 +00:00
main.ts feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
mcp-app.html Add sheet-music-server example 2026-01-05 16:06:09 -06:00
package.json feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
README.md feat: add example gallery with auto-generated screenshots (#253) 2026-01-13 15:12:18 +00:00
screenshot.png feat: add example gallery with auto-generated screenshots (#253) 2026-01-13 15:12:18 +00:00
server.ts fix(examples): resolve DIST_DIR path for npm package execution (#277) 2026-01-15 12:23:13 +00:00
tsconfig.json Add sheet-music-server example 2026-01-05 16:06:09 -06:00
tsconfig.server.json feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00: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
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 ontoolinput handler
  • Uses abcjs for audio playback controls and sheet music rendering (in renderAbc())