바이브아이즈

벡터화된 캔버스 시각화와 디버그 정보를 통해 LLM이 브라우저 기반 게임과 애플리케이션에서 무슨 일이 일어나는지 "볼" 수 있도록 하는 MCP 서버입니다.

Vibe-Eyes는 가벼운 브라우저 클라이언트가 캔버스 콘텐츠와 디버그 정보를 캡처하고 웹소켓을 통해 Node.js 서버로 전송하는 클라이언트-서버 아키텍처를 사용합니다. 그런 다음 해당 서버에서 이미지를 컴팩트한 SVG 표현으로 벡터화하고 MCP(Model Context Protocol)를 통해 LLM에서 사용할 수 있도록 합니다.

지엑스피1

참고: 이 프로젝트는 실험적이며 시각적 맥락과 풍부한 디버그 정보를 제공하여 LLM과의 "바이브 코딩" 세션을 향상시키도록 설계되었습니다.

비디오 설명

주요 역량

브라우저 게임에서 캔버스 요소를 캡처하고 벡터화합니다.
실시간으로 콘솔 로그 및 오류를 수집합니다.
전체 스택 추적으로 처리되지 않은 예외를 포착합니다.
MCP를 통해 LLM에 시각적 및 디버그 정보를 제공합니다.
LLM을 사용하는 개발자를 위한 원활한 디버깅 환경을 제공합니다.

작동 원리

가벼운 클라이언트는 브라우저 게임/애플리케이션에서 실행됩니다.
클라이언트는 캔버스 스냅샷, 콘솔 로그/오류 및 처리되지 않은 예외를 캡처합니다.
데이터는 WebSocket을 통해 Vibe-Eyes 서버로 전송됩니다(CORS 문제 방지)
서버는 캔버스 이미지를 벡터화하고 디버그 정보와 함께 저장합니다.
LLM은 모델 컨텍스트 프로토콜을 통해 연결하여 최신 데이터에 액세스합니다.
LLM은 무슨 일이 일어나고 있는지 "볼" 수 있으며 전체 맥락을 통해 문제를 디버깅하는 데 도움을 줄 수 있습니다.

구성 요소

1. Vibe-Eyes MCP 서버( `mcp.js` )

핵심 서버는 다음과 같습니다.

Socket.IO를 통해 캔버스 스냅샷을 수신합니다.
이미지를 압축된 SVG 표현으로 벡터화합니다(대략적인 근사치)
디버그 정보(로그, 오류, 예외, 타이밍)를 저장합니다.
MCP(Model Context Protocol)를 통해 데이터를 노출합니다.
직접 액세스를 위한 HTTP 엔드포인트 제공
리소스를 관리하기 위해 이미지를 순차적으로 처리합니다.

2. 브라우저 클라이언트

브라우저 클라이언트는 vibe-eyes-client 저장소 에서 사용할 수 있습니다.

다음과 같은 가벼운 브라우저 통합 기능:

페이지에서 캔버스 요소를 찾습니다
캔버스 콘텐츠를 데이터 URL로 캡처합니다.
콘솔 로그 및 오류를 가로채기
스택 추적을 통해 전역적으로 처리되지 않은 예외를 포착합니다.
WebSockets를 통해 Vibe-Eyes 서버로 데이터를 전송합니다.
게임의 성능에 미치는 영향을 최소화합니다.
캡처 시작 시점을 제어하기 위한 명시적 초기화를 지원합니다.

3. 벡터화 엔진( `vectorizer.js` )

다음과 같은 고품질 SVG 벡터화 라이브러리:

래스터 이미지를 벡터 SVG로 변환합니다
SVG를 크기와 선명도에 맞게 최적화합니다.
데이터 크기를 줄이는 동시에 시각적 정보를 보존합니다.

시작하기

설치

# Clone the repository
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes

# Install dependencies
npm install

LLM 에이전트와 함께 사용

AI 에이전트에 MCP 서버를 등록하세요.

# For Claude Code
claude mcp add

이를 통해 Claude는 MCP를 통해 Vibe-Eyes 기능을 사용할 수 있습니다.

게임/애플리케이션과 통합

필요한 스크립트를 포함하여 브라우저 애플리케이션에 클라이언트를 추가합니다.

<!-- Include Socket.IO client -->
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>

<!-- Include Vibe-Eyes client -->
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>

<!-- Initialize the client -->
<script>
  // Import the initialization function if using as module
  // import { initializeVibeEyes } from 'vibe-eyes-client';
  
  // Initialize with configuration
  const vibeEyes = initializeVibeEyes({
    // WebSocket URL to the Vibe-Eyes server
    serverUrl: 'ws://localhost:8869',
    // Capture interval in milliseconds
    captureDelay: 1000,
    // Start capturing automatically after connection
    autoCapture: true
  });
</script>

Claude 또는 다른 LLM과 함께 사용

MCP 서버는 LLM이 MCP(모델 컨텍스트 프로토콜)를 통해 최신 시각적 정보와 디버그 정보에 액세스할 수 있는 도구를 제공합니다.

getGameDebug({ includeSvg: true/false })

LLM은 다음을 받게 됩니다.

최근 콘솔 로그 및 애플리케이션 오류
전체 스택 추적이 포함된 처리되지 않은 예외(발생한 경우)
캔버스의 벡터화된 SVG 근사치( includeSvg 가 true인 경우)
시각적 상태를 로그와 연결하기 위한 타이밍 및 상관 관계 정보

이를 통해 LLM은 애플리케이션에서 무슨 일이 일어나고 있는지 "보고" 더 나은 지원을 제공할 수 있습니다.

MCP 구성 예(Claude Code용)

Claude에서 Vibe-Eyes에 접속하려면:

{
  "name": "vibe-eyes",
  "url": "http://localhost:8869",
  "tools": [
    {
      "name": "getGameDebug",
      "description": "Retrieves the most recent canvas visualization and debug information from a browser game or application"
    }
  ]
}

Vibe-Eyes가 "바이브 코딩"에 어떻게 도움이 되나요?

기존의 "바이브 코딩" 세션에서는 개발자가 직접 스크린샷을 찍고 애플리케이션에서 어떤 일이 일어나고 있는지 설명해야 했습니다. Vibe-Eyes는 다음과 같은 방법으로 이 프로세스를 자동화합니다.

시각적 컨텍스트 제공 : LLM은 게임/앱의 실제 시각적 상태를 볼 수 있습니다.
시각적 및 코드 문제 상관 관계 : 콘솔 로그는 시각적 상태와 쌍을 이룹니다.
수동 작업 감소 : 스크린샷을 수동으로 캡처하고 업로드할 필요가 없습니다.
실시간 디버깅 활성화 : LLM은 변경 사항을 실시간으로 관찰할 수 있습니다.
데이터 전송 최적화 : 벡터 표현은 스크린샷보다 더 간결합니다.

성능 고려 사항

브라우저 클라이언트는 애플리케이션 성능에 미치는 영향을 최소화하도록 설계되었습니다.
캔버스 데이터 URL을 생성하는 것은 CPU를 많이 소모할 수 있으므로 캡처 빈도를 구성할 수 있습니다.
WebSocket 전송은 크로스 도메인 설정에서 흔히 발생하는 CORS 문제를 방지합니다.
서버는 과부하를 방지하기 위해 이미지를 순차적으로 처리합니다.
SVG 벡터화는 시각적 정확도와 크기 최적화의 균형을 맞춥니다.

직접 SVG 액세스

벡터화된 SVG 출력을 재사용하려는 애플리케이션의 경우:

WebSocket 응답 : 서버는 SVG를 WebSocket 응답에 직접 포함합니다.
socket.on('debugCapture', (data, callback) => { // Capture and process... callback({ success: true, id: "capture_123", svg: "<svg>...</svg>", // Vectorized SVG stats: { /* stats data */ } }); });
HTTP 엔드포인트 : /latest 엔드포인트를 통해 최신 캡처에 액세스합니다.
fetch('http://localhost:8869/latest') .then(res => res.json()) .then(data => { const svg = data.vectorized?.svg; // Use the SVG... });

API 참조

브라우저 클라이언트

// Initialize the client
const vibeEyes = initializeVibeEyes({
  serverUrl: 'ws://localhost:8869',
  captureDelay: 1000, // ms between captures
  maxLogs: 10,        // Max console.log entries to store
  maxErrors: 10,      // Max console.error entries to store
  autoCapture: true   // Start capturing automatically
});

// Manual control
vibeEyes.startCaptureLoop(); // Start auto-capturing
vibeEyes.stopCaptureLoop();  // Stop auto-capturing
vibeEyes.captureAndSend();   // Trigger one capture immediately

// The server responds with:
// {
//   success: true,
//   id: "capture_1234567890",
//   processedAt: 1616161616161,
//   svg: "<svg>...</svg>",  // The vectorized SVG for direct use
//   stats: {
//     vectorizeTime: 120,
//     optimizeTime: 30,
//     originalSize: 50000,
//     finalSize: 15000,
//     sizeReduction: 70
//   }
// }

MCP 도구

// MCP tool available to LLMs
getGameDebug({
  includeSvg: true  // Whether to include SVG visualization
})

// Returns
{
  success: true,
  capture: {
    id: "capture_123456789",
    timestamp: 1616161616161,
    console_logs: [
      { timestamp: 1616161616000, data: ["Player position:", {x: 10, y: 20}] },
      // ...more logs
    ],
    console_errors: [
      // Any errors captured
    ],
    unhandled_exception: {
      timestamp: 1616161616100,
      message: "Uncaught SyntaxError: Unexpected token ';'",
      stack: "SyntaxError: Unexpected token ';'\n    at game.js:42:10\n...",
      type: "SyntaxError",
      source: "game.js",
      line: 42,
      column: 10
    },
    vectorized: {
      svg: "<svg>...</svg>",  // Only if includeSvg is true (rough approximation)
      imageType: "png",
      stats: {
        vectorizeTime: 120,
        optimizeTime: 30,
        originalSize: 50000,
        finalSize: 15000,
        sizeReduction: 70
      }
    }
  }
}

독립형 벡터라이저 CLI

이 프로젝트에는 개별 파일을 벡터화하기 위한 독립 실행형 CLI 도구도 포함되어 있습니다.

# Install CLI globally
npm install -g vibe-eyes

# Use the CLI
vibe-eyes-vectorize input.png output.svg

# With options
vibe-eyes-vectorize photo.jpg --color-precision 10 --max-iterations 100

특허

아이에스씨

Vibe-Eyes

Integrations

바이브아이즈

비디오 설명

주요 역량

작동 원리

구성 요소

1. Vibe-Eyes MCP 서버( `mcp.js` )

2. 브라우저 클라이언트

3. 벡터화 엔진( `vectorizer.js` )

시작하기

설치

LLM 에이전트와 함께 사용

게임/애플리케이션과 통합

Claude 또는 다른 LLM과 함께 사용

MCP 구성 예(Claude Code용)

Vibe-Eyes가 "바이브 코딩"에 어떻게 도움이 되나요?

성능 고려 사항

직접 SVG 액세스

API 참조

브라우저 클라이언트

MCP 도구

독립형 벡터라이저 CLI

특허

Appeared in Searches

Integrations

바이브아이즈

비디오 설명

주요 역량

작동 원리

구성 요소

1. Vibe-Eyes MCP 서버( mcp.js )

2. 브라우저 클라이언트

3. 벡터화 엔진( vectorizer.js )

시작하기

설치

LLM 에이전트와 함께 사용

게임/애플리케이션과 통합

Claude 또는 다른 LLM과 함께 사용

MCP 구성 예(Claude Code용)

Vibe-Eyes가 "바이브 코딩"에 어떻게 도움이 되나요?

성능 고려 사항

직접 SVG 액세스

API 참조

브라우저 클라이언트

MCP 도구

독립형 벡터라이저 CLI

특허

Appeared in Searches

1. Vibe-Eyes MCP 서버( `mcp.js` )

3. 벡터화 엔진( `vectorizer.js` )