Give your AI coding assistant ears — capture, analyze, and describe live audio.
io.github.asume21/webear (MCP Server)
The io.github.asume21/webear MCP server provides an MCP server plus a browser SDK that adds direct sensory access for AI coding assistants to a live web application. It is described as capturing, analyzing, and describing live audio, with claims of broader sensory capabilities for web apps.
🛠️ Key Features
MCP server + browser SDK
Captures, analyzes, and describes live audio
Designed to support “hear, see, and feel” for web apps (as stated in the excerpt)
🚀 Use Cases
Enable AI coding assistants to understand audio from a running web application
Provide context from a live web app’s sensory outputs during development or assistance tasks
⚡ Developer Benefits
Adds “direct sensory access” to a live web application via an SDK
Marked as MCP compatible in the provided excerpt
⚠️ Limitations
Source data only explicitly confirms live audio capture/analysis; other senses are mentioned but not detailed beyond the excerpt.
Give your AI real senses — hear, see, and feel any web app.
An MCP server + browser SDK that gives AI coding assistants direct sensory access to a live web application. Audio, visuals, performance, network, security, and console — captured from the browser, analyzed in real time, delivered via MCP.
"The beat sounds muddy" → your AI captures 3 seconds, measures the spectral centroid at 580 Hz with 45% energy below 250 Hz, and tells you exactly why.
AI Web Perception Demo
What It Does
Tool
Description
capture_audio
Record a short clip (500ms–30s) of what your web app is outputting right now
analyze_audio
Signal analysis: RMS, peak dB, clipping, spectral centroid, frequency bands, BPM, timing jitter
describe_audio
Plain-English AI description — "the kick is boomy with heavy sub buildup around 80 Hz"
diff_audio
Compare two captures and flag what changed — loudness, tone, timing, clipping
How It Works
code
Browser (Web Audio API)
↓ MediaRecorder taps the AudioContext output node
↓ Uploads WebM blob via HTTP POST
Express Middleware (your dev server)
↓ Stores captures in memory, dispatches commands via SSE
MCP Server (stdio — runs inside your IDE)
↓ Retrieves captures, sends to CodedSwitch analysis API
AI Coding Assistant
→ "Your bass band is 42% of the mix (high), spectral centroid
is 580 Hz (muddy), and timing jitter is 23ms — the scheduler
is drifting under load."
The key difference from every other audio MCP: this taps the Web Audio graph directly, bypassing room acoustics, microphone hardware, and the need to export files.
Quick Start
1. Install
bash
npm install webear
2. Add the Express middleware to your dev server
js
import express from'express'import { webearMiddleware } from'webear/middleware'const app = express()
app.use(express.json())
// Mount the audio debug bridge (automatically disabled in production)
app.use('/api/webear', webearMiddleware())
app.listen(5000)
3. Add the client snippet to your web app
Option A — auto-detect everything (Tone.js or raw Web Audio)
analyze_audio works with no key and no account. If ffmpeg is on your PATH,
it decodes and analyzes the capture on your machine and returns a basic report:
duration, loudness, peak level and whether the audio is clipping. Nothing is
uploaded. Try the tool before you sign up for anything.
A key unlocks the parts that need more than arithmetic:
── Audio Diff: a1b2c3d4… → e5f6g7h8… ──
── Loudness ──────────────────────────────────────────
RMS: -14.2 dBFS → -12.4 dBFS (+1.8 dBFS)
⚠ Peak: -3.1 dBFS → -0.2 dBFS (+2.9 dBFS)
⚠ CLIPPING INTRODUCED — gain staging regression
── Tone ──────────────────────────────────────────────
⚠ Spectral centroid: 2847.0 Hz → 1920.0 Hz (-927.0 Hz)
── Interpretation ────────────────────────────────────
A gain bug was introduced that causes clipping.
Tonal character changed noticeably — EQ or filter behaviour may have shifted.
Configuration
Environment Variables
Variable
Default
Description
WEBEAR_BASE_URL
http://localhost:4000
URL of your dev server (where middleware is mounted)
CODEDSWITCH_API_KEY
—
API key from codedswitch.com — required for analyze_audio and describe_audio
MCP_API_URL
https://www.codedswitch.com
Override the analysis API base (advanced / self-hosted)
Middleware Options
js
webearMiddleware({
maxCaptures: 50, // Max captures in memory (default: 50)maxAgeMins: 10, // Auto-evict after N minutes (default: 10)maxUploadBytes: 50e6, // Max upload size (default: 50MB)devOnly: true, // Disable in production (default: true)
})
Client Options
js
WebEar.init({
audioContext: myCtx, // Your AudioContext instanceoutputNode: myGainNode, // The node to tap (defaults to destination)toneJs: true, // Auto-detect Tone.js contextbridgeBase: '/api/webear', // Override API pathdevOnly: true, // Only init outside of production (default: true)
})
Requirements
Node.js >= 18
A browser that supports MediaRecorder (Chrome, Firefox, Edge, Safari 14+)
A CODEDSWITCH_API_KEY for analysis (free at codedswitch.com)
Who Is This For?
Web Audio / Tone.js developers — debug beats, synths, effects, and mixing without leaving your IDE
Game audio developers — verify sound effects, spatial audio, and mixing in real-time
Music app builders — catch regressions between code changes with diff_audio
Anyone whose app makes sound — if it has a Web Audio graph, your AI can now hear it
Why Not Just Use the Microphone?
Microphone MCPs capture room sound — your fan noise, chair creaks, and room reverb are all in the recording. webear taps the Web Audio API before it hits the DAC, giving you a clean digital signal with no room artifacts.
Web Perception — Full Sensor Suite
WebEar started as audio-only. Web Perception expands it to 6 senses:
Click Generate API Key and copy it. Keys start with wbr_.
Free tier: 50 analyses/day, no credit card required.
Changelog
2.0.1
Fixed the getting-started path for API keys. The previous instruction
("Settings → WebEar") was wrong — there is no WebEar section under Settings.
Keys live at codedswitch.com/developer
(linked as Developer API in the account menu). Both the Quick Start and the
Web Perception sections now point to the correct place.
The SDK's "missing API key" console error now links straight to the key page.