web perception
webear
让你的 AI 拥有真实感官 — 聆听、观察并感知任何 Web 应用。
一个 MCP 服务器 + 浏览器 SDK,为 AI 编码助手提供对实时 Web 应用的直接感官访问。音频、视觉、性能、网络、安全和控制台 — 从浏览器捕获,实时分析,通过 MCP 交付。
“低音听起来很浑浊” → 你的 AI 捕获 3 秒音频,测得频谱质心为 580 Hz,且 45% 的能量低于 250 Hz,然后准确告诉你原因。

它能做什么
工具 | 描述 |
| 录制一段当前 Web 应用正在输出的短音频(500ms–30s) |
| 信号分析:RMS、峰值 dB、削波、频谱质心、频段、BPM、时序抖动 |
| 通俗易懂的 AI 描述 — “低音很蓬松,80 Hz 附近有大量次低音堆积” |
| 比较两次捕获并指出变化 — 响度、音色、时序、削波 |
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 中间件添加到你的开发服务器
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. 将客户端代码片段添加到你的 Web 应用
选项 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. 启动你的开发服务器,打开应用,播放音频,然后向你的 AI 提问:
“捕获 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(中间件挂载的位置) |
| — | 来自 codedswitch.com 的 API 密钥 — |
|
| 覆盖分析 API 基础地址(高级 / 自托管) |
中间件选项
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 图,你的 AI 现在就能听到它
为什么不直接使用麦克风?
麦克风 MCP 捕获的是房间声音 — 你的风扇噪音、椅子吱嘎声和房间混响都会进入录音。webear 在信号到达 DAC 之前接入 Web Audio API,从而获得没有房间伪影的干净数字信号。
Web Perception — 完整传感器套件
WebEar 最初仅支持音频。Web Perception 将其扩展到 6 种感官:
传感器 | 感知内容 |
WebEar | 音频 — 混音质量、节奏、乐器、削波 |
WebEye | 视觉 — 画布、UI 布局、动画、截图 |
WebSense | 性能 — 帧率、内存、音频延迟 |
WebNerve | 网络 — API 延迟、连接质量、存储 |
WebShield | 安全 — Cookie、存储暴露、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 | AI 自然语言描述 — 乐器、风格、情绪、混音备注 |
Ear |
| 1 | 比较两次捕获 — 响度、音色、时序差异 |
Ear |
| 2 | 网格对齐、摇摆因子、一致性(0–100%) |
Ear |
| 1 | 一次调用完成捕获 + 分析 |
Ear |
| 3 | 结构化混音反馈 |
Eye |
| 免费 | 录制标签页中的 canvas/video |
Eye |
| 2 | AI 视觉描述 — 布局、颜色、缺陷 |
Eye |
| 2 | 比较两次视觉捕获 |
Sense |
| 免费 | FPS、内存、布局偏移、音频延迟 |
Sense |
| 1 | 掉帧、内存压力、音频欠载 |
Nerve |
| 免费 | API 计时、连接质量、存储大小 |
Nerve |
| 1 | 慢 API、连接质量、存储膨胀 |
Shield |
| 免费 | Cookie、CSP、存储暴露、框架嵌入 |
Shield |
| 1 | CORS 问题、非 HttpOnly Cookie、缺少 CSP |
Log |
| 免费 | 控制台输出 + 未捕获异常 |
Log |
| 1 | 错误模式、堆栈跟踪、重复警告 |
获取 API 密钥
在 codedswitch.com 创建一个免费账户。
打开 codedswitch.com/developer — 在账户菜单中也会作为 Developer API 链接到该页面。
点击 Generate API Key 并复制。密钥以
wbr_开头。
免费额度:每天 50 次分析,无需信用卡。
更新日志
2.0.1
修复了 API 密钥的入门路径。 之前的说明(“设置 → WebEar”)是错误的 — “设置”下没有 WebEar 部分。密钥位于 codedswitch.com/developer(在账户菜单中作为 Developer API 链接)。快速开始和 Web Perception 部分现在都指向正确的位置。
SDK 的“缺少 API 密钥”控制台错误现在会直接链接到密钥页面。
贡献
参见 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