Add sheet-music-server example

Demo MCP App showcasing ABC notation rendering and audio playback with:
- Server-side ABC notation validation
- Built-in audio player with play/pause and loop controls
- Sheet music visualization using abcjs library

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/sheet-music-server/src/global.css

@@ -0,0 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 1rem;
+}
+
+code {
+  font-size: 1em;
+}

examples/sheet-music-server/src/mcp-app.css

@@ -0,0 +1,87 @@
+:root {
+  --color-bg: #ffffff;
+  --color-text: #1f2937;
+  --color-text-muted: #6b7280;
+  --color-primary: #2563eb;
+  --color-success: #10b981;
+  --color-danger: #ef4444;
+  --color-card-bg: #f9fafb;
+  --color-border: #e5e7eb;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #111827;
+    --color-text: #f9fafb;
+    --color-text-muted: #9ca3af;
+    --color-primary: #3b82f6;
+    --color-success: #34d399;
+    --color-danger: #f87171;
+    --color-card-bg: #1f2937;
+    --color-border: #374151;
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.main {
+  width: 100%;
+  margin: 0 auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Header */
+#audio-controls:empty {
+  display: none;
+}
+
+#audio-controls:not(:empty) ~ #status {
+  display: none;
+}
+
+.audio-controls {
+  width: 100%;
+
+  .abcjs-inline-audio {
+    border-radius: 8px;
+
+    /* Make loop button active state more visible */
+    .abcjs-midi-loop.abcjs-pushed {
+      background-color: var(--color-success) !important;
+      border-color: var(--color-success) !important;
+    }
+  }
+}
+
+.status {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.status.error {
+  color: var(--color-danger);
+}
+
+
+/* Sheet Music Section */
+.sheet-section {
+  background: var(--color-card-bg);
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  min-height: 500px;
+
+  .sheet-music-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+}

examples/sheet-music-server/src/mcp-app.ts

@@ -0,0 +1,120 @@
+/**
+ * @file Sheet Music App - renders ABC notation with abcjs and provides audio playback
+ */
+import { App } from "@modelcontextprotocol/ext-apps";
+import ABCJS from "abcjs";
+import "abcjs/abcjs-audio.css";
+import "./global.css";
+import "./mcp-app.css";
+
+const log = {
+  info: console.log.bind(console, "[APP]"),
+  error: console.error.bind(console, "[APP]"),
+};
+
+// State management
+interface AppState {
+  visualObj: ABCJS.TuneObject[] | null;
+  synthControl: ABCJS.SynthObjectController | null;
+}
+
+const state: AppState = {
+  visualObj: null,
+  synthControl: null,
+};
+
+// DOM element references
+const mainEl = document.querySelector(".main") as HTMLElement;
+const statusEl = document.getElementById("status")!;
+const sheetMusicEl = document.getElementById("sheet-music")!;
+const audioControlsEl = document.getElementById("audio-controls")!;
+
+/**
+ * Updates the status display.
+ */
+function setStatus(text: string, isError = false): void {
+  statusEl.textContent = text;
+  statusEl.classList.toggle("error", isError);
+}
+
+/**
+ * Renders ABC notation to sheet music and sets up audio playback
+ */
+async function renderAbc(abcNotation: string): Promise<void> {
+  try {
+    setStatus("Rendering...");
+
+    // Clear previous content
+    sheetMusicEl.innerHTML = "";
+    audioControlsEl.innerHTML = "";
+
+    // Render the sheet music visually
+    state.visualObj = ABCJS.renderAbc(sheetMusicEl, abcNotation, {
+      responsive: "resize",
+      add_classes: true,
+    });
+
+    if (!state.visualObj || state.visualObj.length === 0) {
+      throw new Error("Failed to parse music notation");
+    }
+
+    if (!ABCJS.synth.supportsAudio()) {
+      throw new Error("Audio not supported in this browser");
+    }
+
+    // Create synth controller with UI controls
+    state.synthControl = new ABCJS.synth.SynthController();
+    state.synthControl.load(audioControlsEl, null, {
+      displayLoop: true,
+      // displayRestart: true,
+      displayPlay: true,
+      displayProgress: true,
+      // displayWarp: true,
+    });
+
+    // Connect synth to the rendered tune
+    await state.synthControl.setTune(state.visualObj[0], false, {});
+
+    setStatus("Ready to play!");
+  } catch (error) {
+    log.error("Render error:", error);
+    setStatus(`Error: ${(error as Error).message}`, true);
+    audioControlsEl.innerHTML = "";
+  }
+}
+
+// Create app instance
+const app = new App({ name: "Sheet Music App", version: "1.0.0" });
+
+// Handle tool input - receives ABC notation from the host
+app.ontoolinput = (params) => {
+  log.info("Received tool input:", params);
+
+  const abcNotation = params.arguments?.abcNotation as string | undefined;
+
+  if (abcNotation) {
+    renderAbc(abcNotation);
+  } else {
+    setStatus("No ABC notation provided", true);
+  }
+};
+
+// Error handler
+app.onerror = log.error;
+
+app.onhostcontextchanged = (params) => {
+  if (params.safeAreaInsets) {
+    mainEl.style.paddingTop = `${params.safeAreaInsets.top}px`;
+    mainEl.style.paddingRight = `${params.safeAreaInsets.right}px`;
+    mainEl.style.paddingBottom = `${params.safeAreaInsets.bottom}px`;
+    mainEl.style.paddingLeft = `${params.safeAreaInsets.left}px`;
+  }
+};
+
+// Connect to host
+app.connect().then(() => {
+  const ctx = app.getHostContext();
+  if (ctx) {
+    app.onhostcontextchanged(ctx);
+  }
+});

examples/sheet-music-server/src/server-utils.ts

@@ -0,0 +1,110 @@
+/**
+ * Shared utilities for running MCP servers with various transports.
+ */
+
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import type { Request, Response } from "express";
+
+/**
+ * Starts an MCP server using the appropriate transport based on command-line arguments.
+ *
+ * If `--stdio` is passed, uses stdio transport. Otherwise, uses Streamable HTTP transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  try {
+    if (process.argv.includes("--stdio")) {
+      await startStdioServer(createServer);
+    } else {
+      await startStreamableHttpServer(createServer);
+    }
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+}
+
+/**
+ * Starts an MCP server with stdio transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startStdioServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  await createServer().connect(new StdioServerTransport());
+}
+
+/**
+ * Starts an MCP server with Streamable HTTP transport in stateless mode.
+ *
+ * Each request creates a fresh server and transport instance, which are
+ * closed when the response ends (no session tracking).
+ *
+ * The server listens on the port specified by the PORT environment variable,
+ * defaulting to 3001 if not set.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance per request.
+ */
+export async function startStreamableHttpServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  const port = parseInt(process.env.PORT ?? "3001", 10);
+
+  // Express app - bind to all interfaces for development/testing
+  const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
+  expressApp.use(cors());
+
+  expressApp.all("/mcp", async (req: Request, res: Response) => {
+    // Create fresh server and transport for each request (stateless mode)
+    const server = createServer();
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    // Clean up when response ends
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  const { promise, resolve, reject } = Promise.withResolvers<void>();
+
+  const httpServer = expressApp.listen(port, (err?: Error) => {
+    if (err) return reject(err);
+    console.log(`Server listening on http://localhost:${port}/mcp`);
+    resolve();
+  });
+
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    httpServer.close(() => process.exit(0));
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+
+  return promise;
+}