Skip to main content
Glama

webear

npm version npm downloads License: MIT MCP Compatible

Дайте вашему ИИ настоящие органы чувств — слышать, видеть и ощущать любое веб-приложение.

MCP сервер + браузерный SDK, который даёт ИИ-ассистентам для программирования прямой сенсорный доступ к живому веб-приложению. Аудио, визуал, производительность, сеть, безопасность и консоль — захватываются из браузера, анализируются в реальном времени и доставляются через MCP.

«Бит звучит мутно» → ваш ИИ захватывает 3 секунды, измеряет спектральный центроид на 580 Гц с 45% энергии ниже 250 Гц и объясняет вам, почему именно.


Демо Web AI Perception


Что это делает

Инструмент

Описание

capture_audio

Записать короткий фрагмент (500 мс – 30 с) того, что ваше веб-приложение выводит прямо сейчас

analyze_audio

Анализ сигнала: RMS, пиковый дБ, клиппинг, спектральный центроид, частотные полосы, BPM, джиттер тайминга

describe_audio

Описание на простом английском от ИИ — «бочка звучит гулко с сильным накоплением саб-баса около 80 Гц»

diff_audio

Сравнить два захвата и указать, что изменилось — громкость, тон, тайминг, клиппинг

Related MCP server: broca-machina

Как это работает

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

Ключевое отличие от всех остальных аудио-MCP: это обращается напрямую к графу Web Audio, минуя акустику помещения, микрофонное оборудование и необходимость экспортировать файлы.


Быстрый старт

1. Установка

npm install webear

2. Добавьте Express middleware на ваш dev-сервер

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 — автоопределение всего (Tone.js или чистый Web Audio)

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

Вариант B — явный AudioContext

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

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

Вариант C — проект на Tone.js

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

Вариант D — Three.js WebGL игра

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

Вариант E — обычный тег script

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

4. Настройте вашу IDE

Claude Code (.mcp.json в корне проекта):

{
  "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. Получите API-ключ — необязательно, и не для начала

analyze_audio работает без ключа и без аккаунта. Если ffmpeg есть в вашем PATH, он декодирует и анализирует захват на вашей машине и возвращает базовый отчёт: длительность, громкость, пиковый уровень и наличие клиппинга. Ничего не загружается. Попробуйте инструмент, прежде чем регистрироваться.

Ключ открывает возможности, требующие больше, чем арифметика:

Без ключа

С ключом

capture_audio

analyze_audio

Базовый — длительность, громкость, пик, клиппинг (локально)

Полный — спектральный центроид, энергия полос, пик-фактор, BPM, джиттер тайминга

describe_audio — как это ЗВУЧИТ

mix_coach — измеренное + услышанное

diff_audio — до/после

Чтобы получить ключ:

  1. Создайте бесплатный аккаунт на codedswitch.com.

  2. Перейдите на codedswitch.com/developer (также доступно в меню аккаунта как Developer API).

  3. Нажмите Generate API Key — это значение и есть ваш CODEDSWITCH_API_KEY. Ключи начинаются с wbr_.

Бесплатный тариф: 50 анализов в день. Кредитная карта не требуется.

6. Запустите dev-сервер, откройте приложение, включите аудио, затем спросите вашего ИИ:

«Захвати 3 секунды и скажи, почему бас звучит мутно.»

«Сравни аудио до и после моего последнего коммита.»

«Есть ли клиппинг в высокочастотном диапазоне?»


Пример вывода

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.

Конфигурация

Переменные окружения

Переменная

По умолчанию

Описание

WEBEAR_BASE_URL

http://localhost:4000

URL вашего dev-сервера (где смонтирован middleware)

CODEDSWITCH_API_KEY

API-ключ с codedswitch.com — требуется для analyze_audio и describe_audio

MCP_API_URL

https://www.codedswitch.com

Переопределить базовый URL API анализа (продвинутый / self-hosted)

Параметры 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)
})

Параметры клиента

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

Требования

  • Node.js >= 18

  • Браузер, поддерживающий MediaRecorder (Chrome, Firefox, Edge, Safari 14+)

  • CODEDSWITCH_API_KEY для анализа (бесплатно на codedswitch.com)


Для кого это?

  • Разработчики Web Audio / Tone.js — отлаживайте биты, синтезаторы, эффекты и микширование, не выходя из IDE

  • Разработчики игрового аудио — проверяйте звуковые эффекты, пространственный звук и микширование в реальном времени

  • Создатели музыкальных приложений — ловите регрессии между изменениями кода с помощью diff_audio

  • Подкаст / стриминговые приложения — проверяйте качество звука, уровни и кодирование

  • Все, чьё приложение издаёт звук — если у него есть граф Web Audio, ваш ИИ теперь может его слышать


Почему не просто использовать микрофон?

Микрофонные MCP захватывают звук помещения — шум вентилятора, скрип стула и реверберация комнаты попадают в запись. webear обращается к Web Audio API до того, как сигнал достигает ЦАП, давая чистый цифровой сигнал без артефактов помещения.


Web Perception — полный набор сенсоров

WebEar начинался как аудио-инструмент. Web Perception расширяет его до 6 чувств:

Сенсор

Что он воспринимает

WebEar

Аудио — качество микса, ритм, инструменты, клиппинг

WebEye

Визуал — canvas, макет UI, анимации, скриншоты

WebSense

Производительность — частота кадров, память, задержка аудио

WebNerve

Сеть — задержки API, качество соединения, хранилище

WebShield

Безопасность — cookies, доступ к хранилищу, CSP, фрейминг

WebLog

Консоль — логи, предупреждения, ошибки, непойманные исключения

Установите полный браузерный SDK

import { WebPerception } from 'webear/perception'

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

Или используйте один сенсор:

import { WebEar } from 'webear/perception'

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

Подключение через MCP (хостируемый ретранслятор — локальный сервер не требуется)

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

Доступные MCP-инструменты

Сенсор

Инструмент

Кредиты

Описание

Ear

capture_audio

Бесплатно

Запись аудио активной вкладки

Ear

analyze_audio

1

BPM, громкость, частотные полосы, клиппинг, динамический диапазон

Ear

describe_audio

2

Описание от ИИ на простом языке — инструменты, жанр, настроение, заметки о миксе

Ear

diff_audio

1

Сравнение двух захватов — дельты громкости, тона, тайминга

Ear

groove_score

2

Выравнивание по сетке, фактор свинга, стабильность (0–100%)

Ear

capture_and_analyze

1

Захват + анализ одним вызовом

Ear

mix_coach

3

Структурированная обратная связь по микшированию

Eye

capture_video

Бесплатно

Запись canvas/видео с вкладки

Eye

describe_video

2

Визуальное описание от ИИ — макет, цвета, баги

Eye

diff_visuals

2

Сравнение двух визуальных захватов

Sense

capture_telemetry

Бесплатно

FPS, память, сдвиги макета, задержка аудио

Sense

analyze_telemetry

1

Пропуски кадров, давление на память, недогрузки аудио

Nerve

capture_nerve

Бесплатно

Тайминги API, качество соединения, размер хранилища

Nerve

analyze_nerve

1

Медленные API, качество соединения, раздувание хранилища

Shield

capture_shield

Бесплатно

Cookies, CSP, доступ к хранилищу, фрейминг

Shield

analyze_shield

1

Проблемы CORS, не-HttpOnly cookies, отсутствие CSP

Log

capture_logs

Бесплатно

Вывод консоли + непойманные исключения

Log

analyze_logs

1

Паттерны ошибок, стек-трейсы, повторяющиеся предупреждения

Получите API-ключ

  1. Создайте бесплатный аккаунт на codedswitch.com.

  2. Откройте codedswitch.com/developer — также доступно как Developer API в меню аккаунта.

  3. Нажмите Generate API Key и скопируйте его. Ключи начинаются с wbr_.

Бесплатный тариф: 50 анализов в день, кредитная карта не требуется.


Журнал изменений

2.0.1

  • Исправлен путь к API-ключам для начала работы. Предыдущая инструкция («Settings → WebEar») была неверной — в Settings нет раздела WebEar. Ключи находятся на codedswitch.com/developer (доступно как Developer API в меню аккаунта). И раздел «Быстрый старт», и раздел «Web Perception» теперь указывают на правильное место.

  • Ошибка консоли SDK «missing API key» теперь ведёт прямо на страницу ключей.

Вклад в проект

См. CONTRIBUTING.md.

Лицензия

MIT — см. LICENSE

Автор

Создано @asume21CodedSwitch

Install Server
A
license - permissive license
A
quality
B
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • OCR, transcription, file extraction, and image generation for AI agents via MCP.

  • Voice and chat for AI agents — Discord, Teams, Meet, Slack, Zoom, Telegram, WhatsApp, NC Talk, SIP

  • Your memory, everywhere AI goes. Build knowledge once, access it via MCP anywhere.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/asume21/webear'

If you have feedback or need assistance with the MCP directory API, please join our Discord server