Skip to main content
Glama

webear

npm version npm downloads License: MIT MCP Compatible

AI에게 진짜 감각을 부여하세요 — 모든 웹 앱을 듣고, 보고, 느끼게 하세요.

AI 코딩 어시스턴트에게 라이브 웹 애플리케이션에 대한 직접적인 감각적 접근을 제공하는 MCP 서버 + 브라우저 SDK입니다. 오디오, 시각, 성능, 네트워크, 보안, 콘솔 — 브라우저에서 캡처하고, 실시간으로 분석하며, MCP를 통해 전달합니다.

"비트가 탁하게 들려요" → AI가 3초를 캡처하고, 스펙트럼 중심이 580 Hz이고 250 Hz 이하에 에너지의 45%가 있음을 측정한 다음, 정확히 그 이유를 알려줍니다.


AI Web Perception Demo


기능

도구

설명

capture_audio

웹 앱이 지금 출력하는 소리를 짧은 클립(500ms–30s)으로 녹음합니다

analyze_audio

신호 분석: RMS, 피크 dB, 클리핑, 스펙트럼 중심, 주파수 대역, BPM, 타이밍 지터

describe_audio

평문 영어 AI 설명 — "킥이 80 Hz 부근에서 무거운 서브 축적과 함께 웅웅거립니다"

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 미들웨어 추가

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. 개발 서버를 시작하고, 앱을 열고, 오디오를 재생한 다음 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.

구성

환경 변수

변수

기본값

설명

WEBEAR_BASE_URL

http://localhost:4000

개발 서버의 URL (미들웨어가 마운트된 곳)

CODEDSWITCH_API_KEY

codedswitch.com의 API 키 — analyze_audiodescribe_audio에 필요

MCP_API_URL

https://www.codedswitch.com

분석 API 기본 URL 재정의 (고급 / 자체 호스팅)

미들웨어 옵션

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는 방음(room sound)을 캡처합니다 — 팬 소음, 의자 삐걱임, 방의 잔향이 모두 녹음에 포함됩니다. webearDAC에 도달하기 전에 Web Audio API를 연결하여, 방의 인공물이 없는 깨끗한 디지털 신호를 제공합니다.


Web Perception — 전체 센서 제품군

WebEar는 오디오 전용으로 시작했습니다. Web Perception은 이를 6가지 감각으로 확장합니다:

센서

인지하는 것

WebEar

오디오 — 믹스 품질, 리듬, 악기, 클리핑

WebEye

시각 — 캔버스, UI 레이아웃, 애니메이션, 스크린샷

WebSense

성능 — 프레임 레이트, 메모리, 오디오 지연

WebNerve

네트워크 — API 지연, 연결 품질, 저장소

WebShield

보안 — 쿠키, 저장소 노출, 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

AI 평문 영어 설명 — 악기, 장르, 분위기, 믹스 노트

Ear

diff_audio

1

두 캡처 비교 — 음량, 톤, 타이밍 델타

Ear

groove_score

2

그리드 정렬, 스윙 팩터, 일관성 (0–100%)

Ear

capture_and_analyze

1

캡처 + 분석을 한 번에

Ear

mix_coach

3

구조화된 믹싱 피드백

Eye

capture_video

무료

탭에서 캔버스/비디오 녹화

Eye

describe_video

2

AI 시각 설명 — 레이아웃, 색상, 버그

Eye

diff_visuals

2

두 시각 캡처 비교

Sense

capture_telemetry

무료

FPS, 메모리, 레이아웃 시프트, 오디오 지연

Sense

analyze_telemetry

1

프레임 드롭, 메모리 압박, 오디오 언더런

Nerve

capture_nerve

무료

API 타이밍, 연결 품질, 저장소 크기

Nerve

analyze_nerve

1

느린 API, 연결 품질, 저장소 비대

Shield

capture_shield

무료

쿠키, CSP, 저장소 노출, 프레이밍

Shield

analyze_shield

1

CORS 문제, 비-HttpOnly 쿠키, 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의 "API 키 누락" 콘솔 오류가 이제 키 페이지로 직접 연결됩니다.

기여

CONTRIBUTING.md를 참조하세요.

라이선스

MIT — LICENSE 참조

작성자

@asume21 제작 — CodedSwitch

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