WebMCP: LLM 상호작용을 웹사이트에 직접 통합하기

WebMCP란 무엇인가요?

WebMCP는 고급 대규모 언어 모델(LLM) 또는 AI 에이전트와 모델 컨텍스트 프로토콜(MCP)을 통해 웹 애플리케이션을 연결하는 혁신적인 오픈 소스 JavaScript 라이브러리입니다. 스크립트 태그 하나만 포함하면 개발자는 웹페이지 오른쪽 하단에 작고 눈에 띄지 않는 파란색 위젯을 삽입할 수 있습니다. 이 위젯은 최종 사용자가 구성된 MCP 클라이언트(예: Claude Desktop)를 웹사이트의 실시간 컨텍스트에 직접 연결하는 게이트웨이 역할을 하여 정교하고 컨텍스트를 인식하는 상호작용을 가능하게 합니다.

WebMCP의 핵심 가치는 LLM이 페이지의 실시간 상태를 기반으로 작업을 수행하고, 특정 페이지 데이터에 액세스하며, 구조화된 대화에 참여할 수 있도록 지원하는 데 있습니다. 이는 정적 콘텐츠 소비를 동적이고 에이전트 지원을 받는 경험으로 전환하며, 클라이언트 측 토큰 인증을 통해 사용자가 연결을 제어할 수 있도록 보장합니다. 웹 속성에 차세대 AI 기능을 주입하려는 개발자에게 필수적인 도구입니다.

주요 기능

WebMCP는 MCP 클라이언트와의 깊은 통합을 위한 강력한 API를 제공하며 다음과 같은 여러 강력한 기능을 제공합니다:

• LLM 도구 등록: 개발자는 사용자 지정 JavaScript 함수를 호출 가능한 도구로 등록할 수 있습니다. 그러면 LLM 클라이언트는 구조화된 인수를 전달하여 이러한 도구(예: weather, calculate)를 호출하여 에이전트가 사이트를 대신하여 작업을 직접 실행할 수 있도록 합니다.
• 사전 정의된 프롬프트 템플릿: 등록된 프롬프트를 통해 일반적인 사용자 상호작용을 표준화합니다. 이러한 템플릿을 사용하면 클라이언트가 사전 정의된 구조와 동적 인수를 사용하여 복잡한 쿼리(예: Git 커밋 메시지 생성 또는 텍스트 요약)를 시작할 수 있습니다.
• 상황별 리소스 노출: 동적이거나 정적인 웹사이트 데이터를 URI로 식별되는 읽기 가능한 리소스로 노출합니다. 이를 통해 LLM은 응답을 위한 컨텍스트로 현재 페이지 HTML(page://current) 또는 특정 DOM 요소의 콘텐츠(예: element://my-id)에 액세스할 수 있습니다.
• 보안 샘플링 메커니즘: LLM이 시스템 프롬프트와 컨텍스트를 기반으로 완료를 요청하는 서버 시작 상호작용을 구현합니다. WebMCP는 보안을 위해 모달 대화 상자를 사용자에게 표시하여 응답을 원래 서버로 다시 보내기 전에 명시적인 입력을 요구함으로써 개인 정보 보호 및 감독을 보장합니다.
• 사용자 정의 가능한 위젯 모양: 내장된 위젯은 사용자 정의가 매우 뛰어나 개발자가 웹사이트 디자인 미학에 원활하게 맞추기 위해 색상, 위치(오른쪽 하단, 오른쪽 상단 등), 크기 및 패딩을 조정할 수 있습니다.

WebMCP 사용 방법

웹사이트에 WebMCP를 통합하는 것은 개발자에게는 간단하지만, 사용자 상호작용은 사전 구성된 MCP 클라이언트에 따라 달라집니다.

웹사이트 개발자(통합용):

1. 스크립트 포함: 일반적으로 닫는 </body> 태그 앞에 다음 줄을 HTML에 추가합니다. <script src="webmcp.js"></script>
2. 초기화 및 구성: 스크립트를 포함한 직후에 사용자 지정 설정(색상, 위치)으로 라이브러리를 초기화할 수 있습니다.
3. 기능 등록: mcp.registerTool(), mcp.registerPrompt(), mcp.registerResource()를 사용하여 연결된 LLM에 사이트의 기능과 데이터를 노출합니다.

최종 사용자(연결용):

1. 클라이언트 구성: 사용자가 MCP 클라이언트(예: Claude Desktop)를 WebMCP 서버 엔드포인트에 연결하도록 구성했는지 확인합니다(제공된 npx 명령 사용).
2. 토큰 생성: 사용자가 MCP 클라이언트를 시작하고 webmcp token을 요청합니다.
3. 연결: 사용자가 웹사이트의 파란색 WebMCP 위젯을 클릭하고 생성된 토큰을 연결 프롬프트에 붙여넣습니다.

사용 사례

WebMCP는 다양한 웹 컨텍스트에서 강력한 AI 통합을 가능하게 합니다:

1. 전자상거래 제품 지원: WebMCP를 통해 연결된 LLM 에이전트는 page-content 리소스에 액세스하여 제품 설명 및 사양을 읽을 수 있습니다. 그러면 사용자가 "이 페이지를 기반으로 이 노트북이 비디오 편집에 적합한가요?"라고 질문할 수 있습니다. 에이전트는 컨텍스트를 사용하여 제품 페이지를 떠나지 않고도 정확하고 즉각적인 답변을 제공합니다.
2. 대화형 설명서 및 튜토리얼: 복잡한 소프트웨어 설명서 사이트의 경우, 도구를 등록하여 코드 조각을 실행하거나 시뮬레이션을 실행할 수 있습니다. 사용자는 에이전트에게 "강조 표시된 코드 블록의 기능을 설명해 주세요"라고 요청할 수 있으며(선택한 요소 ID에 대한 리소스 등록을 통해), 에이전트는 라이브 DOM 콘텐츠를 기반으로 설명을 제공합니다.
3. 데이터 입력 및 양식 지원: 내부 웹 애플리케이션 또는 복잡한 양식에서 프롬프트를 등록하여 데이터 입력을 표준화할 수 있습니다. 예를 들어, 에이전트가 등록된 리소스를 통해 읽을 수 있는 데이터 필드를 기반으로 "표준화된 규정 준수 요약 생성" 프롬프트를 등록할 수 있습니다.
4. 에이전트 워크플로우 자동화: 클라이언트를 통해 안전하게 노출된 경우 백엔드 API와 상호 작용하는 도구를 등록함으로써 에이전트는 잠재적으로 복잡한 다단계 워크플로우를 시작할 수 있습니다. 예를 들어, "오늘의 판매 수치 요약 이메일 초안 작성"과 같이 LLM이 필요한 데이터를 수집하기 위해 컨텍스트 리소스를 사용한 다음 최종 도구 호출을 실행하는 작업입니다.

FAQ

Q: WebMCP는 무료로 사용할 수 있나요? A: 예, WebMCP는 오픈 소스 JavaScript 라이브러리로 명시되어 있으므로 핵심 통합 코드는 사용 및 수정이 자유롭게 가능합니다.

Q: 모델 컨텍스트 프로토콜(MCP)이란 무엇이며 왜 필요한가요? A: MCP는 WebMCP가 구현하는 기본 통신 표준입니다. 웹사이트(서버)가 외부 LLM 클라이언트와 컨텍스트, 도구 및 요청을 안전하게 통신하는 방법을 정의하여 다양한 클라이언트 애플리케이션 전반에서 상호 작용이 표준화되도록 보장합니다.

Q: 새 도구를 등록할 때마다 MCP 클라이언트를 다시 시작해야 하나요? A: 특히 초기 설정이나 개발 중에는 새 도구나 리소스를 등록한 후 MCP 클라이언트를 다시 시작하는 것이 좋습니다. 일부 클라이언트는 토큰 연결 시 사용 가능한 도구 세트를 즉시 동적으로 업데이트하지 않을 수 있기 때문입니다.

Q: LLM이 제 허가 없이 민감한 사용자 데이터에 액세스할 수 있나요? A: 아니요. 상호 작용은 MCP 클라이언트에 의해 제어됩니다. 리소스가 페이지 콘텐츠를 노출할 수 있지만, 중요한 단계는 사용자가 토큰을 통해 연결하는 것입니다. 또한, 외부 실행이 필요한 민감한 작업은 사용자가 모달 대화 상자를 통해 명시적으로 입력을 제공해야 하는 샘플링 메커니즘을 통해 처리되어 인간의 감독을 유지합니다.

Q: 파란색 위젯의 모양을 변경할 수 있나요? A: 물론입니다. 이 라이브러리는 WebMCP 객체를 초기화하는 단계에서 위젯의 color, position('top-right' 등), size, padding을 포함한 모양을 사용자 정의할 수 있도록 지원합니다.