298e884ec3* chore: add stable spec release 2026-01-26 - Use git mv to copy specification from draft to specification/2026-01-26/apps.mdx (preserves history) - Update status from 'Draft' to 'Stable (2026-01-26)' - Add specification version table to README - Update Resources section with links to both stable and draft specs * chore: bump version to 1.0.0 - Update main package version from 0.4.2 to 1.0.0 - Update all example package versions to 1.0.0 - Regenerate package-lock.json * prettier * chore: align protocol version with spec release 2026-01-26 - Add 'Protocol Version: 2026-01-26' to spec header - Update LATEST_PROTOCOL_VERSION from '2025-11-21' to '2026-01-26' - Update spec examples to use '2026-01-26' protocol version - Add '2025-11-21' to SUPPORTED_PROTOCOL_VERSIONS for backwards compatibility * chore: update spec references to stable 2026-01-26 - Update typedoc.config.mjs navigation link - Update docs/overview.md spec links (10 occurrences) - Update plugins/mcp-apps/skills/create-mcp-app/SKILL.md spec link - Update src/spec.types.ts @see links - Update AGENTS.md spec path - Regenerate src/generated/schema.ts with updated links * chore: simplify versioning - first stable release - Remove backwards compatibility version (2025-11-21) - this is the first stable release - Remove redundant 'Protocol Version' header - spec version IS the protocol version * chore: add history reference comment to stable spec
128 lines
3.1 KiB
Markdown
128 lines
3.1 KiB
Markdown
# Example: Sheet Music Server
|
|
|
|
A demo MCP App that renders [ABC notation](https://en.wikipedia.org/wiki/ABC_notation) as sheet music with interactive audio playback using the [abcjs](https://www.abcjs.net/) library.
|
|
|
|
<table>
|
|
<tr>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png" alt="Twinkle, Twinkle Little Star" width="100%"></a></td>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/02-playing-on-repeat.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/02-playing-on-repeat.png" alt="Playing on repeat" width="100%"></a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
## MCP Client Configuration
|
|
|
|
Add to your MCP client configuration (stdio transport):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"sheet-music": {
|
|
"command": "npx",
|
|
"args": [
|
|
"-y",
|
|
"--silent",
|
|
"--registry=https://registry.npmjs.org/",
|
|
"@modelcontextprotocol/server-sheet-music",
|
|
"--stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Local Development
|
|
|
|
To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"sheet-music": {
|
|
"command": "bash",
|
|
"args": [
|
|
"-c",
|
|
"cd ~/code/ext-apps/examples/sheet-music-server && npm run build >&2 && node dist/index.js --stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## 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:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Build and start the server:
|
|
|
|
```bash
|
|
npm run start:http # for Streamable HTTP transport
|
|
# OR
|
|
npm run start:stdio # for stdio transport
|
|
```
|
|
|
|
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
|
|
### Tool Input
|
|
|
|
When calling the `play-sheet-music` tool, provide ABC notation:
|
|
|
|
```json
|
|
{
|
|
"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:**
|
|
|
|
```abc
|
|
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:**
|
|
|
|
```abc
|
|
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()`)
|