Skip to main content
Glama

webear

npm version npm downloads License: MIT MCP Compatible

Dale a tu IA sentidos reales: escucha, ve y siente cualquier aplicación web.

Un servidor MCP + SDK de navegador que brinda a los asistentes de codificación de IA acceso sensorial directo a una aplicación web en vivo. Audio, visuales, rendimiento, red, seguridad y consola: capturados desde el navegador, analizados en tiempo real y entregados a través de MCP.

"El ritmo suena turbio" → tu IA captura 3 segundos, mide el centroide espectral a 580 Hz con un 45% de energía por debajo de 250 Hz y te dice exactamente por qué.


AI Web Perception Demo


Qué Hace

Tool

Descripción

capture_audio

Graba un clip corto (500 ms–30 s) de lo que tu aplicación web está emitiendo ahora mismo

analyze_audio

Análisis de señal: RMS, pico en dB, recorte, centroide espectral, bandas de frecuencia, BPM, jitter de sincronización

describe_audio

Descripción en lenguaje natural por IA — "el bombo es retumbante con una acumulación de subgraves pesada alrededor de 80 Hz"

diff_audio

Compara dos capturas y señala qué cambió: volumen, tono, sincronización, recorte

Related MCP server: broca-machina

Cómo Funciona

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."

La diferencia clave con cualquier otro MCP de audio: esto accede directamente al grafo de Web Audio, evitando la acústica de la sala, el hardware del micrófono y la necesidad de exportar archivos.


Inicio Rápido

1. Instalación

npm install webear

2. Añade el middleware de Express a tu servidor de desarrollo

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. Añade el fragmento de cliente a tu aplicación web

Opción A: detección automática de todo (Tone.js o Web Audio puro)

import WebEar from 'webear/client'
WebEar.init()

Opción B: AudioContext explícito

const ctx = new AudioContext()
const masterGain = ctx.createGain()
masterGain.connect(ctx.destination)

WebEar.init({ audioContext: ctx, outputNode: masterGain })

Opción C: proyecto Tone.js

import * as Tone from 'tone'
WebEar.init({ toneJs: true })

Opción D: juego Three.js WebGL

import * as THREE from 'three'
const listener = new THREE.AudioListener()
camera.add(listener)
WebEar.init({ tapNode: listener.getInput() })

Opción E: etiqueta de script simple

<script src="node_modules/webear/client-snippet.js"></script>
<script>WebEar.init()</script>

4. Configura tu IDE

Claude Code (.mcp.json en la raíz del proyecto):

{
  "mcpServers": {
    "webear": {
      "command": "npx",
      "args": ["webear"],
      "env": {
        "WEBEAR_BASE_URL": "http://localhost:5000",
        "CODEDSWITCH_API_KEY": "your-key-here"
      }
    }
  }
}

Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "webear": {
      "command": "npx",
      "args": ["webear"],
      "env": {
        "WEBEAR_BASE_URL": "http://localhost:5000",
        "CODEDSWITCH_API_KEY": "your-key-here"
      }
    }
  }
}

Windsurf (mcp_config.json):

{
  "webear": {
    "command": "npx",
    "args": ["webear"],
    "disabled": false,
    "env": {
      "WEBEAR_BASE_URL": "http://localhost:5000",
      "CODEDSWITCH_API_KEY": "your-key-here"
    }
  }
}

5. Obtén una clave de API: opcional, y no para empezar

analyze_audio funciona sin clave y sin cuenta. Si ffmpeg está en tu PATH, decodifica y analiza la captura en tu máquina y devuelve un informe básico: duración, volumen, nivel de pico y si el audio está recortando. No se sube nada. Prueba la herramienta antes de registrarte en nada.

Una clave desbloquea las partes que necesitan más que aritmética:

Sin clave

Con clave

capture_audio

✓

✓

analyze_audio

Básico: duración, volumen, pico, recorte (local)

Completo: centroide espectral, energía de banda, factor de cresta, BPM, jitter de sincronización

describe_audio — cómo SUENA

—

✓

mix_coach — medido + escuchado

—

✓

diff_audio — antes/después

—

✓

Para obtener una:

  1. Crea una cuenta gratuita en codedswitch.com.

  2. Ve a codedswitch.com/developer (también en el menú de la cuenta como Developer API).

  3. Haz clic en Generate API Key — ese valor es tu CODEDSWITCH_API_KEY. Las claves comienzan con wbr_.

Plan gratuito: 50 análisis/día. No se requiere tarjeta de crédito.

6. Inicia tu servidor de desarrollo, abre tu aplicación, reproduce audio y luego pregúntale a tu IA:

"Captura 3 segundos y dime por qué el bajo suena turbio."

"Compara el audio antes y después de mi último commit."

"¿Hay algún recorte en el rango de alta frecuencia?"


Ejemplo de Salida

analyze_audio

── Audio Analysis Report ──────────────────────────────
Duration:          3.02s

── Loudness ─────────────────────────────────────────
RMS:               -12.4 dBFS
Peak:              -1.2 dBFS
Dynamic range:     11.2 dB
Crest factor:      3.63
Clipping:          none

── Tone ──────────────────────────────────────────────
Spectral centroid: 2847 Hz
DC offset:         0.00012 (ok)

── Frequency Bands ───────────────────────────────────
Sub  (20-80 Hz):   8.2%
Bass (80-250 Hz):  22.1%
Mid  (250-2k Hz):  38.4%
Hi-mid (2-6k Hz):  21.8%
High (6k+ Hz):     9.5%

── Rhythm ────────────────────────────────────────────
Estimated BPM:     92
Onset count:       12
Timing jitter:     4.2 ms std dev

── Summary ───────────────────────────────────────────
Loudness: -12.4 dBFS RMS, peak -1.2 dBFS. Tone: balanced (centroid 2847 Hz).
Band mix — sub: 8% | bass: 22% | mid: 38% | hi-mid: 22% | high: 10%.
Rhythm: estimated 92 BPM, 12 onsets detected. Timing: very tight (< 5 ms jitter).

diff_audio

── 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.

Configuración

Variables de Entorno

Variable

Default

Descripción

WEBEAR_BASE_URL

http://localhost:4000

URL de tu servidor de desarrollo (donde está montado el middleware)

CODEDSWITCH_API_KEY

—

Clave de API de codedswitch.com — requerida para analyze_audio y describe_audio

MCP_API_URL

https://www.codedswitch.com

Anula la base de la API de análisis (avanzado / autoalojado)

Opciones de Middleware

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)
})

Opciones de Cliente

WebEar.init({
  audioContext: myCtx,             // Your AudioContext instance
  outputNode: myGainNode,          // The node to tap (defaults to destination)
  toneJs: true,                    // Auto-detect Tone.js context
  bridgeBase: '/api/webear',  // Override API path
  devOnly: true,                   // Only init outside of production (default: true)
})

Requisitos

  • Node.js >= 18

  • Un navegador que admita MediaRecorder (Chrome, Firefox, Edge, Safari 14+)

  • Una CODEDSWITCH_API_KEY para el análisis (gratis en codedswitch.com)


¿Para Quién Es Esto?

  • Desarrolladores de Web Audio / Tone.js — depura ritmos, sintetizadores, efectos y mezclas sin salir de tu IDE

  • Desarrolladores de audio para juegos — verifica efectos de sonido, audio espacial y mezclas en tiempo real

  • Creadores de aplicaciones de música — detecta regresiones entre cambios de código con diff_audio

  • Aplicaciones de podcast / streaming — valida calidad de audio, niveles y codificación

  • Cualquiera cuya aplicación haga sonido — si tiene un grafo de Web Audio, tu IA ahora puede oírlo


¿Por Qué No Usar Simplemente el Micrófono?

Los MCP de micrófono capturan el sonido de la sala: el ruido de tu ventilador, los crujidos de la silla y la reverberación de la habitación están todos en la grabación. webear accede a la API de Web Audio antes de que llegue al DAC, dándote una señal digital limpia sin artefactos de la sala.


Percepción Web — Suite Completa de Sensores

WebEar comenzó solo con audio. Web Perception lo expande a 6 sentidos:

Sensor

Lo que percibe

WebEar

Audio: calidad de mezcla, ritmo, instrumentos, recorte

WebEye

Visual: canvas, diseño de UI, animaciones, capturas de pantalla

WebSense

Rendimiento: tasa de fotogramas, memoria, latencia de audio

WebNerve

Red: latencias de API, calidad de conexión, almacenamiento

WebShield

Seguridad: cookies, exposición de almacenamiento, CSP, framing

WebLog

Consola: registros, advertencias, errores, excepciones no capturadas

Instala el SDK completo del navegador

import { WebPerception } from 'webear/perception'

WebPerception.init({
  apiKey: 'wbr_YOUR_API_KEY',
  relayUrl: 'https://www.codedswitch.com',
  sensors: ['ear', 'eye', 'sense', 'nerve', 'shield', 'log'],
})

O usa un solo sensor:

import { WebEar } from 'webear/perception'

WebEar.init({
  apiKey: 'wbr_YOUR_API_KEY',
  ear: { audioContext: myCtx, audioNode: masterGain },
})

Conéctate vía MCP (relé alojado: no se requiere servidor local)

{
  "mcpServers": {
    "webear": {
      "url": "https://www.codedswitch.com/api/webear/mcp/sse",
      "headers": {
        "Authorization": "Bearer wbr_YOUR_API_KEY"
      }
    }
  }
}

Herramientas MCP Disponibles

Sensor

Tool

Créditos

Descripción

Ear

capture_audio

Gratis

Graba audio en vivo de la pestaña

Ear

analyze_audio

1

BPM, volumen, bandas de frecuencia, recorte, rango dinámico

Ear

describe_audio

2

Descripción en lenguaje natural por IA: instrumentos, género, estado de ánimo, notas de mezcla

Ear

diff_audio

1

Compara dos capturas: diferencias de volumen, tono, sincronización

Ear

groove_score

2

Alineación de rejilla, factor de swing, consistencia (0–100%)

Ear

capture_and_analyze

1

Captura + análisis en una sola llamada

Ear

mix_coach

3

Retroalimentación estructurada de mezcla

Eye

capture_video

Gratis

Graba canvas/video de la pestaña

Eye

describe_video

2

Descripción visual por IA: diseño, colores, errores

Eye

diff_visuals

2

Compara dos capturas visuales

Sense

capture_telemetry

Gratis

FPS, memoria, cambios de diseño, latencia de audio

Sense

analyze_telemetry

1

Caídas de fotogramas, presión de memoria, subejecuciones de audio

Nerve

capture_nerve

Gratis

Tiempos de API, calidad de conexión, tamaño de almacenamiento

Nerve

analyze_nerve

1

APIs lentas, calidad de conexión, almacenamiento inflado

Shield

capture_shield

Gratis

Cookies, CSP, exposición de almacenamiento, framing

Shield

analyze_shield

1

Problemas de CORS, cookies no HttpOnly, CSP faltante

Log

capture_logs

Gratis

Salida de consola + excepciones no capturadas

Log

analyze_logs

1

Patrones de error, trazas de pila, advertencias repetidas

Obtén una Clave de API

  1. Crea una cuenta gratuita en codedswitch.com.

  2. Abre codedswitch.com/developer — también enlazado como Developer API en el menú de la cuenta.

  3. Haz clic en Generate API Key y cópiala. Las claves comienzan con wbr_.

Plan gratuito: 50 análisis/día, sin tarjeta de crédito.


Registro de Cambios

2.0.1

  • Se corrigió la ruta de inicio para las claves de API. La instrucción anterior ("Settings → WebEar") era incorrecta: no hay una sección WebEar en Settings. Las claves están en codedswitch.com/developer (enlazado como Developer API en el menú de la cuenta). Tanto el Inicio Rápido como las secciones de Percepción Web ahora apuntan al lugar correcto.

  • El error de consola "missing API key" del SDK ahora enlaza directamente a la página de claves.

Contribuciones

Consulta CONTRIBUTING.md.

Licencia

MIT — consulta LICENSE

Autor

Construido por @asume21 — CodedSwitch

Available Tools

4 tools
analyze_audioA

Run signal analysis on a captured audio clip. Returns RMS, peak dB, clipping, spectral centroid, frequency band energy, estimated BPM, and timing jitter.

ParametersJSON Schema
NameRequiredDescriptionDefault
capture_idYesThe capture ID returned by capture_audio

TDQS

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description fully carries the burden of behavioral disclosure. It lists the analysis outputs and implies a non-destructive, read-only operation, which is appropriate for a signal analysis tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise at one sentence, front-loaded with the action ('Run signal analysis'), and efficiently enumerates outputs without extraneous content.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given only one parameter and no output schema, the description adequately lists the return values, providing enough context for an agent to understand what the tool produces.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% for the single parameter (capture_id), which already has a description. The tool description adds that the parameter should come from capture_audio, but this is marginal value beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly specifies the verb ('Run signal analysis'), resource ('captured audio clip'), and lists specific metrics returned (RMS, peak dB, clipping, etc.), distinguishing it from sibling tools like capture_audio or describe_audio.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the tool requires a prior captured audio clip (via capture_id), but does not explicitly state when to prefer this tool over alternatives like describe_audio or diff_audio, leaving room for ambiguity.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

capture_audioA

Record a short clip of what the running web app is currently outputting. Returns a capture ID you can pass to analyze_audio or describe_audio.

ParametersJSON Schema
NameRequiredDescriptionDefault
duration_msNoHow many milliseconds to record (default 3000, max 30000)

TDQS

A4.1/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It states 'short clip' and mentions the duration parameter, but does not disclose what audio source is captured (e.g., system output, microphone), potential failure modes, or any destructive effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the verb and resource, no redundant information. Every sentence adds value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with one optional parameter and no output schema, the description fully covers the purpose, return value, and relationship to sibling tools. Nothing critical is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% (duration_ms fully documented). The main description provides no additional parameter semantics beyond what the schema already states (default 3000, max 30000). Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states the tool records a short clip of the running web app's audio output and returns a capture ID. Distinguishes itself from sibling tools (analyze_audio, describe_audio, diff_audio) by specifying that the ID can be passed to them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly says to use the capture ID with analyze_audio or describe_audio, implying a workflow. However, it does not provide explicit when-not-to-use scenarios or alternatives beyond the mentioned siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

describe_audioA

Send a captured audio clip to Gemini or GPT-4o to get a plain-English description of what it sounds like — useful when something sounds wrong but you cannot describe it.

ParametersJSON Schema
NameRequiredDescriptionDefault
capture_idYesThe capture ID returned by capture_audio to describe

TDQS

A3.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must fully disclose behavior. It mentions the AI models but omits side effects like cost, latency, or external dependencies. This is insufficient for a tool that sends audio to external APIs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that conveys purpose, usage context, and outcome without any wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (one parameter, no output schema), the description covers the essential information. Minor gaps exist regarding output format or latency, but overall it is complete enough for the complexity level.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already describes the single parameter with 100% coverage. The description adds minimal value beyond restating the purpose, but no further semantic information is needed given the schema's completeness.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('send'), resource ('captured audio clip'), and outcome ('plain-English description'). It differentiates from sibling tools like analyze_audio, capture_audio, and diff_audio by focusing on description generation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides a usage context ('useful when something sounds wrong but you cannot describe it') but does not explicitly mention when not to use it or compare to alternatives like analyze_audio.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

diff_audioA

Compare two audio captures and flag what changed — loudness, tone, timing, clipping. Use this before and after a code change to verify the audio impact.

ParametersJSON Schema
NameRequiredDescriptionDefault
capture_id_aYesFirst capture ID (the "before")
capture_id_bYesSecond capture ID (the "after")

TDQS

A3.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It states the tool 'flags what changed,' implying a read-only operation, but does not explicitly disclose whether it is safe, destructive, or requires permissions. Given the simple nature of a diff tool, the lack of explicit behavioral disclosure is a minor gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences: the first clearly states the purpose and what is flagged, the second gives a concise use case. No unnecessary words. Well-structured and efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers the purpose and usage but lacks information about return values or potential errors. Given the tool's simplicity and the absence of an output schema, a hint at the output format would improve completeness. Sibling tools are explained in their own descriptions, so differentiation is adequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with each parameter described as the 'before' and 'after' capture ID. The tool description adds context about comparing captures and the aspects examined, but does not significantly enhance the semantic meaning beyond the schema. With high schema coverage, baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool compares two audio captures and lists specific aspects (loudness, tone, timing, clipping). It distinguishes itself from siblings (capture_audio, analyze_audio, describe_audio) by focusing on comparative analysis and providing a concrete use case ('before and after a code change').

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says when to use this tool: 'before and after a code change to verify the audio impact.' It provides clear context but does not explicitly state when not to use it or mention alternative tools, though the use case implies a comparison scenario.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updatesv2.0.0
    • First observedanalyze_audio
    • First observedcapture_audio
    • First observeddescribe_audio
    • First observeddiff_audio

TDQS

A4.2/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: capture records audio, analyze does signal analysis, describe provides a language description, and diff compares two captures. No overlap.

Naming Consistency5/5

All tool names follow the consistent verb_noun pattern (capture_audio, analyze_audio, describe_audio, diff_audio), making them predictable and easy to understand.

Tool Count5/5

Four tools cover the essential operations for audio perception without being too few or too many, perfectly scoped for the server's purpose.

Completeness5/5

The tool set covers capture, analysis, description, and comparison, providing a complete workflow for assessing audio output. No obvious missing operations.

Maintenance

ActivitySlowing
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers