ext-apps/examples/transcript-server
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Olivier Chafik 50eb30ec8d Bump to 2.0.0 and widen SDK peer ranges to ^2.0.0
The client, core and server packages become ^2.0.0 peers and client is
now a required peer (App and AppBridge extend its Protocol class);
server stays optional for View-only consumers. Examples move to
zod ^4.2.0 to match the library peer range.

The root package is not yet published at 2.0.0, so the lockfile now
links the examples' @modelcontextprotocol/ext-apps dependency to the
repository root instead of a registry copy. This drops the stale 1.x
tarball (and its sdk 1.x peer) from the lockfile and makes
scripts/link-self.mjs a no-op.
2026-09-08 13:58:22 +01:00
..
src Fix onhostcontextchanged handler invocation in examples 2026-01-25 13:38:33 -06:00
grid-cell.png fix(e2e): improve test stability and developer experience (#337) 2026-01-25 22:18:38 +02:00
main.ts refactor: finish MCP SDK v2 migration 2026-07-14 17:07:30 -07:00
mcp-app.html examples: add transcript-server example with live speech transcription (#240) 2026-01-12 21:27:31 +00:00
package.json Bump to 2.0.0 and widen SDK peer ranges to ^2.0.0 2026-09-08 13:58:22 +01:00
README.md chore: stable spec release 2026-01-26 and SDK v1.0.0 (#362) 2026-01-26 17:31:33 +00:00
screenshot.png feat(basic-host): URL params, fullscreen mode, unified layout (#266) 2026-01-14 22:09:41 +00:00
server.ts refactor: finish MCP SDK v2 migration 2026-07-14 17:07:30 -07:00
tsconfig.json examples: add transcript-server example with live speech transcription (#240) 2026-01-12 21:27:31 +00: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 examples: add transcript-server example with live speech transcription (#240) 2026-01-12 21:27:31 +00:00

Transcript Server

Screenshot

An MCP App Server for live speech transcription using the Web Speech API.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "transcript": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-transcript",
        "--stdio"
      ]
    }
  }
}

Local Development

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "transcript": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/transcript-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

Features

  • Live Transcription: Real-time speech-to-text using browser's Web Speech API
  • Transitional Model Context: Streams interim transcriptions to the model via ui/update-model-context, allowing the model to see what the user is saying as they speak
  • Audio Level Indicator: Visual feedback showing microphone input levels
  • Send to Host: Button to send completed transcriptions as a ui/message to the MCP host
  • Start/Stop Control: Toggle listening on and off
  • Clear Transcript: Reset the transcript area

Setup

Prerequisites

  • Node.js 18+
  • Chrome, Edge, or Safari (Web Speech API support)

Installation

npm install

Running

# Development mode (with hot reload)
npm run dev

# Production build and serve
npm run start

Usage

The server exposes a single tool:

transcribe

Opens a live speech transcription interface.

Parameters: None

Example:

{
  "name": "transcribe",
  "arguments": {}
}

How It Works

  1. Click Start to begin listening
  2. Speak into your microphone
  3. Watch your speech appear as text in real-time (interim text is streamed to model context via ui/update-model-context)
  4. Click Send to send the transcript as a ui/message to the host (clears the model context)
  5. Click Clear to reset the transcript

Architecture

transcript-server/
├── server.ts          # MCP server with transcribe tool
├── server-utils.ts    # HTTP transport utilities
├── mcp-app.html       # Transcript UI entry point
├── src/
│   ├── mcp-app.ts     # App logic, Web Speech API integration
│   ├── mcp-app.css    # Transcript UI styles
│   └── global.css     # Base styles
└── dist/              # Built output (single HTML file)

Notes

  • Microphone Permission: Requires allow="microphone" on the sandbox iframe (configured via permissions: { microphone: {} } in the resource _meta.ui)
  • Browser Support: Web Speech API is well-supported in Chrome/Edge, with Safari support. Firefox has limited support.
  • Continuous Mode: Recognition automatically restarts when it ends, for seamless transcription

Future Enhancements

  • Language selection dropdown
  • Whisper-based offline transcription (see TRANSCRIPTION.md)
  • Export transcript to file
  • Timestamps toggle