Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik e479497371 fix(e2e): improve test stability and developer experience (#337 ) * fix(e2e): add masks for dynamic content and increase timeouts for slow servers - Add HOST_MASKS for Tool Input/Result panels with dynamic timestamps - Add say-server to SLOW_SERVERS (10s) for TTS model download - Add say-server to EXTRA_WAIT_MS (30s) in generate-grid-screenshots * feat: add update-lock:docker script to regenerate lockfile with public registry * pin package versions for dev compatibility * feat(basic-host): add ?theme=hide query param to hide theme toggle in screenshots - Add hideThemeToggle param to getQueryParams() - Conditionally render ThemeToggle based on ?theme=hide - Update e2e tests to use ?theme=hide for consistent screenshots * update screenshots * update screenshots * fix(husky): load Node.js environment for GUI apps like GitHub Desktop * fix(e2e): increase map-server wait time to 15s for tile loading * fix(e2e): increase waitForAppLoad timeout to 30s for nested iframe loading * ci: add workflow to update e2e snapshots * ci: trigger snapshot update on push to this branch * chore: update e2e snapshots [skip ci] * ci: trigger CI after snapshot update * style: fix prettier formatting in update-snapshots workflow * fix: pin seroval, seroval-plugins, and solid-js for artifactory compatibility --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>		2026-01-25 22:18:38 +02: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 server startup functions	2026-01-24 09:27:54 -06:00
mcp-app.html	examples: add transcript-server example with live speech transcription (#240 )	2026-01-12 21:27:31 +00:00
package.json	chore: bump version to 0.4.1 (#282 )	2026-01-15 16:11:53 +00:00
README.md	docs: add MCP client configuration to example READMEs	2026-01-16 14:00:57 +00:00
screenshot.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +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	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

README.md

Transcript Server

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"
      ]
    }
  }
}

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

Click Start to begin listening
Speak into your microphone
Watch your speech appear as text in real-time (interim text is streamed to model context via ui/update-model-context)
Click Send to send the transcript as a ui/message to the host (clears the model context)
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