Kapture는 모델 컨텍스트 프로토콜(MCP)을 통한 브라우저 자동화를 가능하게 하는 Chrome DevTools 확장 프로그램입니다. Claude와 같은 AI 애플리케이션이 3계층 아키텍처를 통해 웹 브라우저를 제어할 수 있게 합니다.

** ✨ 주요 기능**: 여러 AI 클라이언트가 동일한 서버에 연결할 수 있습니다! Claude Desktop, Cline 및 기타 MCP 클라이언트는 모두 단일 서버 인스턴스를 통해 브라우저 탭을 제어할 수 있습니다.

크롬 웹 스토어에서 이용 가능

개요

Kapture는 AI 비서와 웹 브라우저를 다음과 같은 방식으로 연결합니다:

• MCP 서버: MCP 프로토콜 통신을 처리함
• Chrome 확장 기능: 백그라운드 서비스 작업자가 브라우저 자동화 명령을 실행함 (DevTools는 열려 있지 않아도 됨)
• WebSocket 브리지: 서버와 확장 프로그램 간의 실시간 통신
• 다중 클라이언트 지원: 여러 AI 클라이언트가 WebSocket을 통해 동시에 연결할 수 있습니다

건축

퀵 스타트

1. 의존성 설치

2. 크롬 확장 프로그램 설치

옵션 A: 크롬 웹 스토어에서 설치하기 (권장)

1. Kapture Chrome 웹 스토어 방문
2. “크롬에 추가”
3. 설치 확인

옵션 B: 압축 해제 불러오기 (개발자 모드)

1. 크롬을 열고 [[T0]로 이동하세요.

Kapture - Browser Automation via Chrome DevTools

Kapture is a Chrome DevTools Extension that enables browser automation through the Model Context Protocol (MCP). It allows AI applications like Claude to control web browsers via a three-layer architecture.

✨ Key Feature: Multiple AI clients can connect to the same server! Claude Desktop, Cline, and other MCP clients can all control browser tabs through a single server instance.

Available in the Chrome Web Store

Overview

Kapture bridges AI assistants with web browsers through:

• MCP Server: Handles MCP protocol communication
• Chrome Extension: Background service worker executes browser automation commands (DevTools does not need to be open)
• WebSocket Bridge: Real-time communication between server and extensions
• Multi-Client Support: Multiple AI clients can connect simultaneously via WebSocket

Architecture

Quick Start

1. Install Dependencies

# Server
cd server
npm install
npm run build

# Test App (optional)
cd test-app
npm install

2. Install Chrome Extension

Option A: Install from Chrome Web Store (Recommended)

1. Visit the Kapture Chrome Web Store page
2. Click “Add to Chrome”
3. Confirm the installation

Option B: Load Unpacked (Developer Mode)

1. Open Chrome and navigate to chrome://extensions/
2. Enable “Developer mode”
3. Click “Load unpacked”
4. Select the extension folder

3. Start MCP Server

Configure your AI client and open it. It will start the MCP server automatically.

OR

Run the Test App:

cd test-app
npm run dev

The server starts on port 61822.

# Server
cd server
npm start

# Test App
cd test-app
npm start

4. Connect a Tab

1. Open any website in Chrome
2. Click the Kapture toolbar icon and flip the connection toggle
3. The extension connects to the server on port 61822 (the badge shows ✓ when connected)

Alternatively, connect from the “Kapture” panel in DevTools, or load a page with ?kapture-connect=true in the URL to auto-connect.

Using with Claude Desktop

Add to your Claude Desktop config:

Option 1: Using the bridge command (Recommended)

This single command starts the server and handles stdio-to-WebSocket translation:

{
  "mcpServers": {
    "kapture": {
      "command": "npx",
      "args": ["-y", "kapture-mcp@latest", "bridge"]
    }
  }
}

Option 2: Direct WebSocket connection (Advanced)

For advanced use cases where you need manual server control:

1. Start the server manually:

npx kapture-mcp

2. Configure Claude Desktop to connect via WebSocket:

{
  "mcpServers": {
    "kapture": {
      "transport": "websocket",