웹MCP

클라이언트 측 LLM을 지원하는 웹사이트에 대한 제안 및 코드

WebMCP를 사용하면 웹사이트에서 도구, 리소스, 프롬프트 등을 LLM과 공유할 수 있습니다. 즉, WebMCP를 사용하면 웹사이트가 MCP 서버 역할을 할 수 있습니다. API 키를 공유할 필요가 없으며, 원하는 모델을 사용할 수 있습니다.

WebMCP를 지원하는 간단한 웹사이트를 만들었습니다.

이는 웹사이트 소유자가 자신의 사이트에 넣을 수 있는 위젯 형태로 제공되며, 클라이언트 측 LLM이 사용자나 에이전트에게 훌륭한 UX를 제공하는 데 필요한 도구를 제공합니다.

디자인, 느낌, 사용 방식, 보안 등 모든 부분에 대해 기여/건설적인 비판을 환영합니다. MCP 클라이언트가 WebMCP 기능을 직접 구축하는 것이 이상적인 결과라고 생각합니다.

최종 사용자는 한 번에 아무리 많은 웹사이트에나 접속할 수 있으며, 도구는 도메인을 기준으로 "범위"(이름)가 지정되어 구성이 간소화됩니다.

매우 빠른 데모 (20초, 사운드 켜짐 🔊)

https://github.com/user-attachments/assets/61229470-1242-401e-a7d9-c0d762d7b519

시작하기(WebMCP를 사용하여 웹사이트에서 LLM 사용)

설치

MCP 클라이언트( claude , cursor , cline , windsurf 또는 json 경로)를 지정하기만 하면 됩니다.

지엑스피1

수동으로 설정하는 데 관심이 있는 경우 npx -y @jason.today/webmcp@latest --mcp 명령을 사용하세요.

자동 설치는 Smithery에서 영감을 받았지만, 해당 코드가 AGPL이라 제가 직접 작성했습니다. 혹시 작동하지 않거나 mcp 클라이언트가 보이지 않으면 문제를 제기해 주세요.

WebMCP 사용하기

웹사이트에 연결할 준비가 되면 모델에 MCP 토큰을 생성하도록 요청할 수 있습니다.

토큰을 복사하여 웹사이트 입력란에 붙여넣으세요. 웹사이트가 해당 토큰으로 등록하는 즉시 토큰은 폐기되며 이후 등록이나 다른 용도로 사용할 수 없습니다. 웹사이트는 요청을 위한 자체 세션 토큰을 받게 됩니다.

모델/서비스에서 토큰을 확인하지 않으려면 npx @jason.today/webmcp --new 수동으로 실행할 수 있습니다.

Claude Desktop을 포함한 일부 MCP 클라이언트는 새 도구에 액세스하려면 다시 시작해야 합니다(적어도 이 글을 쓰는 시점에서는).

연결을 끊으려면 브라우저 탭을 닫거나 "연결 끊기"를 클릭하거나 npx @jason.today/webmcp -q 사용하여 서버를 종료하세요.

모든 구성 파일은 ~/.webmcp 디렉토리에 저장됩니다.

시작하기(웹사이트에 WebMCP 추가)

WebMCP를 사용하려면 페이지에 webmcp.js 포함하기만 하면 됩니다(src를 통해 또는 직접).

WebMCP 위젯이 자동으로 초기화되어 페이지 오른쪽 하단에 나타납니다. 위젯을 클릭하면 최종 사용자가 생성할 WebMCP 토큰을 입력하라는 메시지가 표시됩니다.

전체 데모(3분)

https://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473

작동 방식에 대한 자세한 정보

MCP 클라이언트와 웹사이트를 연결하는 브리지는 로컬 호스트 전용(컴퓨터 외부 요청은 접근 불가) 웹소켓 서버입니다. 로컬 웹 브라우저의 요청을 허용하도록 구성되어 있으므로, 이를 악용하려는 웹사이트 방문 시 인증/토큰 교환이 필요합니다.

이상적으로는 웹 브라우저 자체에서 웹캠이나 마이크 사용과 같은 명시적인 허가가 있어야 합니다.

1. MCP 클라이언트는 .env (자동 생성)의 서버 토큰을 사용하여 /mcp 경로에 연결합니다.
2. 서버는 등록 토큰을 생성합니다(모델 또는 --new 명령을 통해 내장된 mcp 도구를 통해 시작됨)
3. 웹 클라이언트는 이 토큰과 해당 도메인을 사용하여 /register 엔드포인트에 연결합니다.
4. 웹 페이지는 도메인을 기반으로 할당된 채널에 연결됩니다.
5. LLM이 도구/리소스/프롬프트를 사용하려고 할 때 요청은 다음에서 발생합니다.
   • MCP 클라이언트 → MCP 서버 → WebSocket 서버 → 도구/리소스/프롬프트가 있는 웹 페이지
   • (도구/리소스/프롬프트 목록을 요청하는 것과 유사)
6. 웹 페이지는 요청(예: 도구 호출)을 수행하고 동일한 경로를 통해 결과를 다시 보냅니다.
7. 여러 웹 페이지를 동시에 연결할 수 있으며 각 페이지에는 고유한 도구 및 토큰 세트가 있습니다.
8. MCP 클라이언트는 이름 충돌을 방지하기 위해 채널 접두사를 사용하여 모든 도구를 통합 목록으로 봅니다.

보안

이 프로젝트는 매우 초기 단계입니다. 악성 확장 프로그램 등이 즉시 주입 공격 등을 수행하지 못하도록 보안을 강화하는 데 매우 관심이 있습니다. 건설적인 아이디어가 있으시면 연락 주시거나 이슈를 등록해 주세요.

내장 도구

• 토큰 생성기(WebMCP 웹사이트에 연결하기 위한)
• MCP 도구 정의자(MCP와 함께 사용할 도구 스키마 구축을 간소화하기 위해)
  • WebMCP와 함께 사용하기 위해 후속 메시지에서 자바스크립트(해당되는 경우)를 요청할 수 있습니다.

도커

Smithery 배포를 위한 Dockerfile 이 특별히 존재합니다.

Docker를 사용하여 웹소켓 서버를 실행하고 싶다면 데모 목적으로 docker-compose.yml 추가했습니다.

mcp 클라이언트 설정에 --mcp 옵션과 함께 --docker 추가하면 서버가 실행 중이라고 가정합니다. 이렇게 하면 메인 프로세스(웹소켓 서버)를 도커화할 수 있으며, mcp 클라이언트는 웹소켓을 통해 도커 컨테이너에 연결됩니다. 마찬가지로 웹사이트도 도커 컨테이너와 통신합니다.