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

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

웹 앱의 내부 함수를 Claude Code와 직접 연결하여 DOM 스크래핑 없이 상태를 제어할 수 있게 해주는 MCP 기반 도구 Tesseron이 공개됐다.

배경

웹 기반 비디오 에디터를 개발하던 작성자가 AI 에이전트가 브라우저 내 앱 상태를 직접 조작하지 못하고 DOM 스크래핑에 의존하여 상태를 망가뜨리는 문제를 해결하기 위해 Tesseron을 개발했다.

의미 / 영향

이 토론은 AI 에이전트가 웹 애플리케이션을 제어하는 방식이 단순한 UI 자동화에서 내부 API 연동(MCP)으로 진화하고 있음을 보여준다. 특히 브라우저 내 격리된 상태에 접근하기 위한 WebSocket 기반의 게이트웨이 전략은 향후 웹 기반 AI 도구 설계의 중요한 패턴이 될 것이다.

커뮤니티 반응

작성자가 직접 개발한 도구를 공유한 게시물로, 복잡한 웹 앱 제어 문제를 해결하려는 시도에 대해 긍정적인 관심이 예상된다.

주요 논점

01찬성다수

DOM 조작 방식보다 앱 내부 API를 직접 호출하는 방식이 상태 관리 측면에서 훨씬 안정적이고 효율적이다.

합의점 vs 논쟁점

합의점

기존의 클릭 시뮬레이션 방식은 복잡한 웹 애플리케이션의 상태를 유지하는 데 부적합하다.
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 등 다양한 도구와도 호환되어 범용적인 에이전트 제어 인터페이스로 활용 가능하다.

실무 Takeaway

Tesseron은 웹 앱의 내부 함수를 MCP 액션으로 노출하여 Claude Code가 브라우저 앱의 상태를 직접 안전하게 제어할 수 있게 한다.
WebSocket 기반의 동적 등록 방식을 통해 기존 stdio MCP 서버가 브라우저 탭 내의 실시간 상태에 접근하지 못하던 한계를 극복했다.
Zod 스키마를 통한 타입 안전성 확보와 ctx API를 활용한 Claude UI 내 상호작용으로 개발자 경험과 에이전트 신뢰도를 동시에 높였다.

언급된 도구

Tesseron추천링크

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

Claude Code중립

Anthropic의 CLI 기반 코딩 에이전트

언급된 리소스

GitHubTesseron GitHub Repository

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 Code와 직접 연결하는 MCP 게이트웨이

핵심 요약

배경

의미 / 영향

커뮤니티 반응

주요 논점

합의점 vs 논쟁점

합의점

실용적 조언

섹션별 상세

실무 Takeaway

언급된 도구

언급된 리소스

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

핵심 요약

배경

의미 / 영향

커뮤니티 반응

주요 논점

합의점 vs 논쟁점

합의점

실용적 조언

섹션별 상세

실무 Takeaway

언급된 도구

언급된 리소스

관련 토론

댓글

관련 피드

관련 토론

댓글

관련 피드