Tesseron: 웹 앱 내부 상태를 Claude Code와 직접 연결하는 MCP 게이트웨이

실용적 조언

브라우저 기반 앱에서 Claude Code를 연동하고 싶다면 @tesseron/web 라이브러리를 사용하여 주요 기능을 액션으로 등록하라.
사용자 확인이 필요한 민감한 작업에는 핸들러 내의 ctx.confirm 기능을 활용하여 안전성을 확보하라.

섹션별 상세

기존 AI 에이전트의 브라우저 제어 방식은 DOM 스크래핑이나 Playwright를 통한 클릭 시뮬레이션에 의존하여 복잡한 앱 상태를 망가뜨리는 한계가 있었다. Tesseron은 앱 내부에 직접 액션을 등록하여 AI가 버튼을 클릭하는 대신 버튼이 수행하는 함수를 직접 실행하도록 설계됐다. 이를 통해 에이전트가 JS를 직접 주입하여 앱 상태를 훼손하는 문제를 원천적으로 차단했다.

표준적인 stdio 기반 MCP 서버는 npx를 통해 실행되므로 실제 상태가 존재하는 브라우저 탭에 접근할 수 없는 구조적 문제가 있다. Tesseron은 로컬 WebSocket 게이트웨이를 사용하여 실행 중인 앱과 Claude를 연결함으로써 동적인 도구 등록과 실시간 상태 동기화를 가능하게 했다. 6자리의 클레임 코드를 통해 Claude와 실행 중인 앱을 간편하게 페어링할 수 있는 편의성을 제공한다.

import { tesseron } from '@tesseron/web';
import { z } from 'zod';

tesseron.app({ id: 'video_editor', name: 'Video Editor' });

tesseron
  .action('insertClipAt')
  .describe('Insert a clip into the timeline at a given position.')
  .input(z.object({
    clipId: z.string(),
    trackIndex: z.number(),
    startSeconds: z.number(),
  }))
  .handler(({ clipId, trackIndex, startSeconds }) => 
    editor.insertClip(clipId, trackIndex, startSeconds),
  );

await tesseron.connect();

Tesseron 라이브러리를 사용하여 웹 앱 내의 특정 기능을 Claude가 호출할 수 있는 액션으로 등록하는 예시

Zod와 같은 표준 스키마 검증기를 지원하여 AI가 전달하는 입력값의 타입을 엄격하게 관리한다. 핸들러 내부에서는 ctx.confirm, ctx.elicit, ctx.progress 등의 컨텍스트를 활용하여 Claude의 UI 내에서 사용자 확인이나 추가 정보 요청을 처리할 수 있다. 이는 별도의 모델 턴을 소모하지 않고도 에이전트와 사용자 간의 상호작용을 매끄럽게 연결하는 효과를 준다.

Tesseron은 별도의 백엔드 서버나 영구적인 데몬 프로세스 없이 로컬 게이트웨이가 필요 시 자동 실행되는 구조를 채택했다. 계정 생성이나 텔레메트리 수집이 없어 개인정보 보호에 유리하며, 하나의 게이트웨이로 여러 실행 중인 앱을 동시에 서비스할 수 있다. Claude Code뿐만 아니라 Cursor, VS Code Copilot 등 다양한 도구와도 호환되어 범용적인 에이전트 제어 인터페이스로 활용 가능하다.

용어 해설

모델 컨텍스트 프로토콜(Model Context Protocol): — AI 모델이 외부 도구, 데이터 소스 및 서비스와 표준화된 방식으로 상호작용할 수 있도록 Anthropic에서 제안한 개방형 프로토콜이다. 이를 통해 개발자는 모델이 로컬 파일이나 API에 접근할 수 있는 범용 인터페이스를 구축할 수 있다.
DOM 스크래핑(DOM Scraping): — 웹 페이지의 HTML 구조(Document Object Model)를 직접 분석하여 데이터를 추출하거나 요소를 조작하는 기술이다. AI 에이전트가 웹 앱을 제어할 때 자주 쓰이지만, 복잡한 상태 변화가 잦은 앱에서는 오류가 발생하기 쉽다.
조드(Zod): — TypeScript 우선의 스키마 선언 및 데이터 검증 라이브러리이다. 런타임에서 입력 데이터의 타입을 보장하여 AI 에이전트가 전달하는 인자값이 애플리케이션의 기대 형식과 일치하는지 확인하는 데 사용된다.

언급된 도구

Tesseron추천링크

웹 앱과 Claude Code를 연결하는 MCP 게이트웨이 및 라이브러리

Claude Code중립

Anthropic의 CLI 기반 코딩 에이전트

언급된 리소스

GitHubTesseron GitHub Repository