web perception
webear
Дайте вашему ИИ настоящие органы чувств — слышать, видеть и ощущать любое веб-приложение.
MCP сервер + браузерный SDK, который даёт ИИ-ассистентам для программирования прямой сенсорный доступ к живому веб-приложению. Аудио, визуал, производительность, сеть, безопасность и консоль — захватываются из браузера, анализируются в реальном времени и доставляются через MCP.
«Бит звучит мутно» → ваш ИИ захватывает 3 секунды, измеряет спектральный центроид на 580 Гц с 45% энергии ниже 250 Гц и объясняет вам, почему именно.

Что это делает
Инструмент | Описание |
| Записать короткий фрагмент (500 мс – 30 с) того, что ваше веб-приложение выводит прямо сейчас |
| Анализ сигнала: RMS, пиковый дБ, клиппинг, спектральный центроид, частотные полосы, BPM, джиттер тайминга |
| Описание на простом английском от ИИ — «бочка звучит гулко с сильным накоплением саб-баса около 80 Гц» |
| Сравнить два захвата и указать, что изменилось — громкость, тон, тайминг, клиппинг |
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 webear2. Добавьте 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,
он декодирует и анализирует захват на вашей машине и возвращает базовый отчёт:
длительность, громкость, пиковый уровень и наличие клиппинга. Ничего не
загружается. Попробуйте инструмент, прежде чем регистрироваться.
Ключ открывает возможности, требующие больше, чем арифметика:
Без ключа | С ключом | |
| ✓ | ✓ |
| Базовый — длительность, громкость, пик, клиппинг (локально) | Полный — спектральный центроид, энергия полос, пик-фактор, BPM, джиттер тайминга |
| — | ✓ |
| — | ✓ |
| — | ✓ |
Чтобы получить ключ:
Создайте бесплатный аккаунт на codedswitch.com.
Перейдите на codedswitch.com/developer (также доступно в меню аккаунта как Developer API).
Нажмите 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.Конфигурация
Переменные окружения
Переменная | По умолчанию | Описание |
|
| URL вашего dev-сервера (где смонтирован middleware) |
| — | API-ключ с 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 |
| Бесплатно | Запись аудио активной вкладки |
Ear |
| 1 | BPM, громкость, частотные полосы, клиппинг, динамический диапазон |
Ear |
| 2 | Описание от ИИ на простом языке — инструменты, жанр, настроение, заметки о миксе |
Ear |
| 1 | Сравнение двух захватов — дельты громкости, тона, тайминга |
Ear |
| 2 | Выравнивание по сетке, фактор свинга, стабильность (0–100%) |
Ear |
| 1 | Захват + анализ одним вызовом |
Ear |
| 3 | Структурированная обратная связь по микшированию |
Eye |
| Бесплатно | Запись canvas/видео с вкладки |
Eye |
| 2 | Визуальное описание от ИИ — макет, цвета, баги |
Eye |
| 2 | Сравнение двух визуальных захватов |
Sense |
| Бесплатно | FPS, память, сдвиги макета, задержка аудио |
Sense |
| 1 | Пропуски кадров, давление на память, недогрузки аудио |
Nerve |
| Бесплатно | Тайминги API, качество соединения, размер хранилища |
Nerve |
| 1 | Медленные API, качество соединения, раздувание хранилища |
Shield |
| Бесплатно | Cookies, CSP, доступ к хранилищу, фрейминг |
Shield |
| 1 | Проблемы CORS, не-HttpOnly cookies, отсутствие CSP |
Log |
| Бесплатно | Вывод консоли + непойманные исключения |
Log |
| 1 | Паттерны ошибок, стек-трейсы, повторяющиеся предупреждения |
Получите API-ключ
Создайте бесплатный аккаунт на codedswitch.com.
Откройте codedswitch.com/developer — также доступно как Developer API в меню аккаунта.
Нажмите 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
Автор
Создано @asume21 — CodedSwitch
Maintenance
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
- AlicenseAqualityAmaintenanceGive your AI assistant eyes and ears — analyze any video, audio, or image, entirely on your machine.2612Apache 2.0
- AlicenseNot gradedqualityBmaintenanceGives any text-based AI a voice and ears inside a Discord voice channel by transcribing speech, relaying to an LLM/agent, and speaking replies back.MIT
- AlicenseNot gradedqualityAmaintenanceGive your AI agents the ability to listen. Microphone capture and speech-to-text tools for MCP-compatible agents.1357Apache 2.0
- AlicenseNot gradedqualityDmaintenanceEnables AI systems to control the Reachy Mini robot—speak, listen, see, and express emotions through physical movement. Compatible with Claude, GPT, Grok, and other MCP-compatible AIs.MIT
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.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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