[{"_1":2,"_317":-5,"_318":-5},"loaderData",{"_3":4,"_22":23,"_24":25,"_240":241},"root",{"_5":6,"_7":8},"toasts",[],"visitor",{"_9":10,"_11":12},"viewportWidth",1280,"visitorSession",{"_13":14,"_16":17,"_18":-5,"_19":20,"_21":-5},"attributes",[15],"BOT","id",6158165,"membership","referenceId","0196b3c0-bc31-71f0-b6d3-441502d783fa","userAccount","routes/_public/_layout",{},"routes/_public/mcp/servers/~namespace/~slug/_pages/_layout",{"_26":27,"_66":-5,"_67":28,"_29":68,"_158":159,"_239":120},"availableLocales",[28,40,46,53,60],{"_29":30,"_33":37,"_38":39},"mcpServer",{"_31":32,"_33":34,"_35":36},"description","A framework that enables websites to share tools, resources, and prompts with client-side LLMs without requiring API keys, allowing users to interact with web services using their preferred models.","name","WebMCP","readme","# WebMCP\n\nA proposal and code for websites to support client side LLMs\n\n[![NPM Version](https://img.shields.io/npm/v/%40jason.today%2Fwebmcp)](https://www.npmjs.com/package/@jason.today/webmcp) [![MIT licensed](https://img.shields.io/npm/l/%40jason.today%2Fwebmcp)](./LICENSE)\n\nWebMCP allows websites to share tools, resources, prompts, etc. to LLMs. In other words, WebMCP allows a website to be an MCP server. No sharing API Keys. Use any model you want.\n\n[Here's a simple website I built that is WebMCP-enabled](https://webmcp.dev)\n\nIt comes in the form of a widget that a website owner can put on their site and expose tools to give client-side LLMs what they need to provide a great UX for the user or agent.\n\n_The look, feel, how it's used, and security are all absolutely open for contribution / constructive criticism. MCP Clients directly building WebMCP functionality seems like an ideal outcome._\n\nAn end-user can connect to any number of websites at a time - and tools are \"scoped\" (by name) based on the domain to simplify organization.\n\n### Super Quick Demo (20 seconds, Sound on 🔊)\n\nhttps://github.com/user-attachments/assets/61229470-1242-401e-a7d9-c0d762d7b519\n\n## Getting started (using your LLM with websites using WebMCP)\n\n#### Installation\n\nJust specify your MCP client (`claude`, `cursor`, `cline`, `windsurf`, or a path to json)\n\n```bash\nnpx -y @jason.today/webmcp@latest --config claude\n```\n\n_If you're interested in setting it up manually, use the command `npx -y @jason.today/webmcp@latest --mcp`._\n\n_Auto-install was inspired by Smithery, but their code is AGPL so I wrote this myself. If it doesn't work for you or you don't see your mcp client, please file an issue._\n\n#### Using WebMCP\n\nWhen you're ready to connect to a website, you can ask your model to generate you an mcp token.\n\nCopy the token and paste it to the website's input. As soon as the website registers with it, it's thrown away and cannot be used for subsequent registrations or anything else. The website will receive its own session token for making requests.\n\nIf you'd rather your model / service never see the token, you can manually execute `npx @jason.today/webmcp --new` instead.\n\nSome MCP clients, including Claude Desktop, need to be restarted to get access to new tools. (at least at time of writing)\n\nTo disconnect, you can close the browser tab, click \"disconnect\", or shut down the server with `npx @jason.today/webmcp -q`.\n\nAll configuration files are stored in `~/.webmcp` directory.\n\n## Getting started (adding WebMCP to your website)\n\nTo use WebMCP, simply include [`webmcp.js`](https://github.com/jasonjmcghee/WebMCP/releases) on your page (via src or directly):\n\n```\n\n```\n\nThe WebMCP widget will automatically initialize and appear in the bottom right corner of your page. Clicking on it will ask for a webmcp token which the end-user will generate.\n\n### Full Demo (3 minutes)\n\nhttps://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473\n\n## More Info About How It Works\n\nThe bridge between the MCP client and the website is a localhost-only (not accessible to requests outside your computer) websocket server. Because it is configured to allow requests from your local web browser, authentication / token exchange is required, in case you visit a website attempting to abuse this.\n\n_Ideally the web browser itself would have an explicit permission for this, like webcam or microphone use._\n\n1. The MCP client connects to the `/mcp` path using the server token from `.env` (auto-generated)\n2. The server generates a registration token (instigated via the built-in mcp tool by a model or the `--new` command)\n3. Web clients connect to the `/register` endpoint with this token and its domain.\n4. Web pages connect to their assigned channel based on their domain.\n5. When an LLM wants to use a tool / resource / prompt, the request flows from:\n - MCP Client → MCP Server → WebSocket Server → Web Page with the tool / resource / prompt\n - (similar for requesting a list of tools / resources / prompts)\n6. The web page performs the request (e.g. call tool) and sends the result back through the same path\n7. Multiple web pages can be connected simultaneously, each with their own set of tools and tokens\n8. The MCP client sees all tools as a unified list, with channel prefixes to avoid name collisions\n\n```mermaid\nsequenceDiagram\n participant User\n participant MCP as MCP Client\n participant Server as MCP Server\n participant WS as WebSocket Server\n participant Web as Website\n \n %% Initial connection\n MCP->>Server: Connect to /mcp with internal server token\n \n %% Website registration token\n User->>MCP: Request registration token\n MCP->>Server: Request registration token\n Server-->>MCP: Return registration token\n MCP-->>User: Display registration token\n \n %% Website registration\n User->>Web: Paste registration token\n Web->>WS: Connect to /register with token & domain (registration token deleted)\n WS-->>Web: Assign channel & session token\n Web->>WS: Connect to assigned channel\n \n %% Tool interaction\n MCP->>Server: Request tools list\n Server->>WS: Forward request\n WS->>Web: Request tools\n Web-->>WS: Return tools list\n WS-->>Server: Forward tools list\n Server-->>MCP: Return tools list\n \n %% Tool execution\n MCP->>Server: Tool request\n Server->>WS: Forward request\n WS->>Web: Execute tool\n Web-->>WS: Return result\n WS-->>Server: Forward result\n Server-->>MCP: Return result\n \n %% Disconnection\n User->>Web: Disconnect\n Web->>WS: Close connection\n```\n\n## Security\n\nThis is a super early project. I'm very interested in hardening security to prevent malicious extensions etc. from being\nable to perform prompt injection attacks and similar. If you have constructive ideas, please reach out or open an issue.\n\n## Built in tools\n\n- Token generator (for connecting to WebMCP websites)\n- MCP Tool Definer (to simplify building the schema of a tool for use with MCP)\n - You can ask for the javascript (if relevant) in a follow-up message for use with WebMCP\n\n## Docker\n\nThere is a `Dockerfile` specifically for Smithery deployment.\n\nIf you'd like to use docker to run the websocket server, I've added a `docker-compose.yml` for demonstration purposes.\n\nIf `--docker` is provided to the mcp client config alongside `--mcp`, it will assume the server is running. This will allow you to dockerize the main process (websocket server), and your mcp client will connect to your docker container via websocket. Similarly, websites will communicate with your docker container.\n","English","tag","en-US",{"_29":41,"_33":44,"_38":45},{"_31":42,"_33":34,"_35":43},"Un marco que permite a los sitios web compartir herramientas, recursos y avisos con LLM del lado del cliente sin requerir claves API, lo que permite a los usuarios interactuar con los servicios web utilizando sus modelos preferidos.","# WebMCP\n\nUna propuesta y un código para que los sitios web apoyen los LLM del lado del cliente\n\n[![Versión NPM](https://img.shields.io/npm/v/%40jason.today%2Fwebmcp)](https://www.npmjs.com/package/@jason.today/webmcp) [![Licencia del MIT](https://img.shields.io/npm/l/%40jason.today%2Fwebmcp)](./LICENSE)\n\nWebMCP permite que los sitios web compartan herramientas, recursos, indicaciones, etc. con los LLM. En otras palabras, WebMCP permite que un sitio web funcione como servidor MCP. No se comparten claves API. Utilice el modelo que desee.\n\n[Aquí hay un sitio web simple que construí y que está habilitado para WebMCP.](https://webmcp.dev)\n\nViene en forma de un widget que el propietario de un sitio web puede colocar en su sitio y exponer herramientas para brindar a los LLM del lado del cliente lo que necesitan para brindar una excelente UX para el usuario o agente.\n\n*La apariencia, la experiencia de uso y la seguridad están totalmente abiertas a contribuciones y críticas constructivas. Que los clientes de MCP creen directamente la funcionalidad de WebMCP parece ser el resultado ideal.*\n\nUn usuario final puede conectarse a cualquier cantidad de sitios web a la vez, y las herramientas están \"clasificadas\" (por nombre) en función del dominio para simplificar la organización.\n\n### Demostración súper rápida (20 segundos, sonido activado 🔊)\n\n\n\n## Primeros pasos (utilizando su LLM con sitios web mediante WebMCP)\n\n#### Instalación\n\nSimplemente especifique su cliente MCP ( `claude` , `cursor` , `cline` , `windsurf` o una ruta a json)\n\n```bash\nnpx -y @jason.today/webmcp@latest --config claude\n```\n\n*Si está interesado en configurarlo manualmente, utilice el comando `npx -y @jason.today/webmcp@latest --mcp` .*\n\n*La instalación automática se inspiró en Smithery, pero su código es AGPL, así que lo escribí yo mismo. Si no te funciona o no ves tu cliente mcp, por favor, reporta un problema.*\n\n#### Uso de WebMCP\n\nCuando esté listo para conectarse a un sitio web, puede pedirle a su modelo que le genere un token mcp.\n\nCopia el token y pégalo en la entrada del sitio web. En cuanto el sitio web se registre con él, se descarta y no puede usarse para registros posteriores ni para nada más. El sitio web recibirá su propio token de sesión para realizar solicitudes.\n\nSi prefiere que su modelo/servicio nunca vea el token, puede ejecutar manualmente `npx @jason.today/webmcp --new` .\n\nAlgunos clientes MCP, incluido Claude Desktop, necesitan reiniciarse para obtener acceso a nuevas herramientas (al menos al momento de escribir este artículo).\n\nPara desconectarse, puede cerrar la pestaña del navegador, hacer clic en \"desconectar\" o apagar el servidor con `npx @jason.today/webmcp -q` .\n\nTodos los archivos de configuración se almacenan en el directorio `~/.webmcp` .\n\n## Primeros pasos (cómo agregar WebMCP a su sitio web)\n\nPara usar WebMCP, simplemente incluya [`webmcp.js`](https://github.com/jasonjmcghee/WebMCP/releases) en su página (a través de src o directamente):\n\n```\n\n```\n\nEl widget WebMCP se inicializará automáticamente y aparecerá en la esquina inferior derecha de la página. Al hacer clic en él, se solicitará un token WebMCP que el usuario final generará.\n\n### Demostración completa (3 minutos)\n\n\n\n## Más información sobre cómo funciona\n\nEl puente entre el cliente MCP y el sitio web es un servidor websocket exclusivo para el host local (no accesible para solicitudes externas a su ordenador). Dado que está configurado para permitir solicitudes desde su navegador web local, se requiere autenticación/intercambio de tokens en caso de que visite un sitio web que intente abusar de esta función.\n\n*Lo ideal sería que el propio navegador web tuviera un permiso explícito para esto, como el uso de la cámara web o el micrófono.*\n\n1. El cliente MCP se conecta a la ruta `/mcp` usando el token de servidor de `.env` (generado automáticamente)\n2. El servidor genera un token de registro (iniciado a través de la herramienta mcp incorporada por un modelo o el comando `--new` )\n3. Los clientes web se conectan al punto final `/register` con este token y su dominio.\n4. Las páginas web se conectan a su canal asignado en función de su dominio.\n5. Cuando un LLM desea utilizar una herramienta/recurso/indicación, la solicitud fluye desde:\n * Cliente MCP → Servidor MCP → Servidor WebSocket → Página web con la herramienta/recurso/indicador\n * (similar para solicitar una lista de herramientas/recursos/indicaciones)\n6. La página web ejecuta la solicitud (por ejemplo, llamar a la herramienta) y envía el resultado a través de la misma ruta.\n7. Se pueden conectar varias páginas web simultáneamente, cada una con su propio conjunto de herramientas y tokens.\n8. El cliente MCP ve todas las herramientas como una lista unificada, con prefijos de canal para evitar colisiones de nombres\n\n```mermaid\nsequenceDiagram\n participant User\n participant MCP as MCP Client\n participant Server as MCP Server\n participant WS as WebSocket Server\n participant Web as Website\n \n %% Initial connection\n MCP->>Server: Connect to /mcp with internal server token\n \n %% Website registration token\n User->>MCP: Request registration token\n MCP->>Server: Request registration token\n Server-->>MCP: Return registration token\n MCP-->>User: Display registration token\n \n %% Website registration\n User->>Web: Paste registration token\n Web->>WS: Connect to /register with token & domain (registration token deleted)\n WS-->>Web: Assign channel & session token\n Web->>WS: Connect to assigned channel\n \n %% Tool interaction\n MCP->>Server: Request tools list\n Server->>WS: Forward request\n WS->>Web: Request tools\n Web-->>WS: Return tools list\n WS-->>Server: Forward tools list\n Server-->>MCP: Return tools list\n \n %% Tool execution\n MCP->>Server: Tool request\n Server->>WS: Forward request\n WS->>Web: Execute tool\n Web-->>WS: Return result\n WS-->>Server: Forward result\n Server-->>MCP: Return result\n \n %% Disconnection\n User->>Web: Disconnect\n Web->>WS: Close connection\n```\n\n## Seguridad\n\nEste es un proyecto en sus primeras etapas. Me interesa mucho reforzar la seguridad para evitar que extensiones maliciosas, etc., puedan realizar ataques de inyección rápida y similares. Si tienes alguna idea constructiva, contáctame o abre un problema.\n\n## Herramientas integradas\n\n* Generador de tokens (para conectarse a sitios web de WebMCP)\n* Definidor de herramientas MCP (para simplificar la creación del esquema de una herramienta para su uso con MCP)\n * Puede solicitar el javascript (si corresponde) en un mensaje de seguimiento para utilizarlo con WebMCP\n\n## Estibador\n\nHay un `Dockerfile` específicamente para la implementación de Smithery.\n\nSi desea utilizar Docker para ejecutar el servidor websocket, he agregado un `docker-compose.yml` para fines de demostración.\n\nSi se proporciona `--docker` a la configuración del cliente mcp junto con `--mcp` , se asumirá que el servidor está en ejecución. Esto permitirá dockerizar el proceso principal (servidor websocket), y el cliente mcp se conectará al contenedor de Docker mediante websocket. De igual forma, los sitios web se comunicarán con el contenedor de Docker.","Spanish","es-ES",{"_29":47,"_33":51,"_38":52},{"_31":48,"_33":49,"_35":50},"API キーを必要とせずに、Web サイトがクライアント側の LLM とツール、リソース、プロンプトを共有できるようにするフレームワーク。これにより、ユーザーは好みのモデルを使用して Web サービスと対話できるようになります。","ウェブMCP","# ウェブMCP\n\nクライアント側LLMをサポートするためのウェブサイトの提案とコード\n\n[![NPMバージョン](https://img.shields.io/npm/v/%40jason.today%2Fwebmcp)](https://www.npmjs.com/package/@jason.today/webmcp) [![MITライセンス](https://img.shields.io/npm/l/%40jason.today%2Fwebmcp)](./LICENSE)\n\nWebMCPを使用すると、ウェブサイトはツール、リソース、プロンプトなどをLLMと共有できます。つまり、WebMCPはウェブサイトをMCPサーバーとして機能させることを意味します。APIキーの共有は不要です。お好きなモデルを自由にご利用いただけます。\n\n[これは私が構築したWebMCP対応のシンプルなウェブサイトです](https://webmcp.dev)\n\nこれはウィジェットの形式で提供され、Web サイトの所有者はこれを自分のサイトに配置してツールを公開し、ユーザーやエージェントに優れた UX を提供するために必要なものをクライアント側の LLM に提供できます。\n\n*外観、操作性、使用方法、セキュリティなど、あらゆる面で貢献や建設的な批判を歓迎します。MCPクライアントがWebMCPの機能を直接構築することが理想的な成果と言えるでしょう。*\n\nエンドユーザーは一度に任意の数の Web サイトに接続でき、ツールはドメインに基づいて (名前によって)「スコープ」され、整理が簡素化されます。\n\n### 超クイックデモ（20秒、サウンドオン🔊）\n\n\n\n## はじめに（WebMCP を使用した Web サイトで LLM を使用する）\n\n#### インストール\n\nMCP クライアント ( `claude` 、 `cursor` 、 `cline` 、 `windsurf` 、または json へのパス) を指定するだけです。\n\n```bash\nnpx -y @jason.today/webmcp@latest --config claude\n```\n\n*手動で設定する場合は、コマンド`npx -y @jason.today/webmcp@latest --mcp`を使用します。*\n\n*自動インストールはSmitheryにヒントを得たものですが、彼らのコードはAGPLなので、自分で書きました。もしうまく動作しない、またはmcpクライアントが表示されない場合は、問題を報告してください。*\n\n#### WebMCPの使用\n\nウェブサイトに接続する準備ができたら、モデルに mcp トークンを生成するように依頼できます。\n\nトークンをコピーして、ウェブサイトの入力欄に貼り付けてください。ウェブサイトがトークンを使用して登録すると、トークンは破棄され、以降の登録やその他の用途には使用できません。ウェブサイトはリクエストを行うために独自のセッショントークンを受け取ります。\n\nモデル/サービスにトークンが表示されないようにしたい場合は、代わりに`npx @jason.today/webmcp --new`手動で実行できます。\n\nClaude Desktop を含む一部の MCP クライアントでは、新しいツールにアクセスするために再起動する必要があります。(少なくとも執筆時点では)\n\n切断するには、ブラウザタブを閉じるか、「切断」をクリックするか、 `npx @jason.today/webmcp -q`を使用してサーバーをシャットダウンします。\n\nすべての設定ファイルは`~/.webmcp`ディレクトリに保存されます。\n\n## はじめに（WebMCP を Web サイトに追加する）\n\nWebMCP を使用するには、ページに[`webmcp.js`](https://github.com/jasonjmcghee/WebMCP/releases)を組み込むだけです (src 経由または直接)。\n\n```\n\n```\n\nWebMCPウィジェットは自動的に初期化され、ページの右下に表示されます。ウィジェットをクリックすると、エンドユーザーが生成するWebMCPトークンの入力を求められます。\n\n### フルデモ（3分）\n\n\n\n## 仕組みに関する詳細情報\n\nMCPクライアントとウェブサイト間のブリッジは、ローカルホスト専用の（コンピュータ外部からのリクエストにはアクセスできない）WebSocketサーバーです。ローカルウェブブラウザからのリクエストを許可するように設定されているため、これを悪用しようとするウェブサイトにアクセスした場合に備えて、認証/トークンの交換が必要です。\n\n*理想的には、Web ブラウザ自体に、Web カメラやマイクの使用などに対する明示的な許可が与えられます。*\n\n1. MCPクライアントは、 `.env`からのサーバートークン（自動生成）を使用して`/mcp`パスに接続します。\n2. サーバーは登録トークンを生成します（モデルまたは`--new`コマンドによって組み込みの mcp ツール経由で実行されます）。\n3. Web クライアントは、このトークンとそのドメインを使用して`/register`エンドポイントに接続します。\n4. Web ページは、ドメインに基づいて割り当てられたチャネルに接続します。\n5. LLM がツール / リソース / プロンプトを使用する場合、リクエストは次のようになります。\n * MCPクライアント → MCPサーバー → WebSocketサーバー → ツール/リソース/プロンプトを含むWebページ\n * （ツール/リソース/プロンプトのリストをリクエストする場合も同様）\n6. ウェブページはリクエスト（例えばツールの呼び出し）を実行し、同じパスを通じて結果を送り返します。\n7. 複数のウェブページを同時に接続することができ、それぞれに独自のツールとトークンのセットが用意されています。\n8. MCPクライアントは、名前の衝突を避けるためにチャネルプレフィックスが付いた統合リストとしてすべてのツールを認識します。\n\n```mermaid\nsequenceDiagram\n participant User\n participant MCP as MCP Client\n participant Server as MCP Server\n participant WS as WebSocket Server\n participant Web as Website\n \n %% Initial connection\n MCP->>Server: Connect to /mcp with internal server token\n \n %% Website registration token\n User->>MCP: Request registration token\n MCP->>Server: Request registration token\n Server-->>MCP: Return registration token\n MCP-->>User: Display registration token\n \n %% Website registration\n User->>Web: Paste registration token\n Web->>WS: Connect to /register with token & domain (registration token deleted)\n WS-->>Web: Assign channel & session token\n Web->>WS: Connect to assigned channel\n \n %% Tool interaction\n MCP->>Server: Request tools list\n Server->>WS: Forward request\n WS->>Web: Request tools\n Web-->>WS: Return tools list\n WS-->>Server: Forward tools list\n Server-->>MCP: Return tools list\n \n %% Tool execution\n MCP->>Server: Tool request\n Server->>WS: Forward request\n WS->>Web: Execute tool\n Web-->>WS: Return result\n WS-->>Server: Forward result\n Server-->>MCP: Return result\n \n %% Disconnection\n User->>Web: Disconnect\n Web->>WS: Close connection\n```\n\n## 安全\n\nこれはまだ初期段階のプロジェクトです。悪意のある拡張機能などによるプロンプトインジェクション攻撃などを防ぐためのセキュリティ強化に非常に興味を持っています。建設的なアイデアをお持ちの方は、ぜひご連絡いただくか、イシューを作成してください。\n\n## 組み込みツール\n\n* トークンジェネレーター（WebMCP Webサイトに接続するためのもの）\n* MCP ツール定義者 (MCP で使用するツールのスキーマの構築を簡素化)\n * WebMCPで使用するためのJavaScript（該当する場合）をフォローアップメッセージで要求できます。\n\n## ドッカー\n\nSmithery デプロイメント専用の`Dockerfile`があります。\n\ndocker を使用して websocket サーバーを実行する場合は、デモ用に`docker-compose.yml`を追加しました。\n\nmcpクライアント設定に`--mcp`と共に`--docker`が指定されている場合、サーバーが実行中であると想定されます。これにより、メインプロセス（Websocketサーバー）をDocker化できるようになり、mcpクライアントはWebsocket経由でDockerコンテナに接続します。同様に、ウェブサイトもDockerコンテナと通信できるようになります。","Japanese","ja-JP",{"_29":54,"_33":58,"_38":59},{"_31":55,"_33":56,"_35":57},"API 키가 필요 없이 웹사이트에서 클라이언트 측 LLM과 도구, 리소스, 프롬프트를 공유할 수 있는 프레임워크로, 사용자는 선호하는 모델을 사용하여 웹 서비스와 상호 작용할 수 있습니다.","웹MCP","# 웹MCP\n\n클라이언트 측 LLM을 지원하는 웹사이트에 대한 제안 및 코드\n\n[![NPM 버전](https://img.shields.io/npm/v/%40jason.today%2Fwebmcp)](https://www.npmjs.com/package/@jason.today/webmcp) [![MIT 라이센스](https://img.shields.io/npm/l/%40jason.today%2Fwebmcp)](./LICENSE)\n\nWebMCP를 사용하면 웹사이트에서 도구, 리소스, 프롬프트 등을 LLM과 공유할 수 있습니다. 즉, WebMCP를 사용하면 웹사이트가 MCP 서버 역할을 할 수 있습니다. API 키를 공유할 필요가 없으며, 원하는 모델을 사용할 수 있습니다.\n\n[WebMCP를 지원하는 간단한 웹사이트를 만들었습니다.](https://webmcp.dev)\n\n이는 웹사이트 소유자가 자신의 사이트에 넣을 수 있는 위젯 형태로 제공되며, 클라이언트 측 LLM이 사용자나 에이전트에게 훌륭한 UX를 제공하는 데 필요한 도구를 제공합니다.\n\n*디자인, 느낌, 사용 방식, 보안 등 모든 부분에 대해 기여/건설적인 비판을 환영합니다. MCP 클라이언트가 WebMCP 기능을 직접 구축하는 것이 이상적인 결과라고 생각합니다.*\n\n최종 사용자는 한 번에 아무리 많은 웹사이트에나 접속할 수 있으며, 도구는 도메인을 기준으로 \"범위\"(이름)가 지정되어 구성이 간소화됩니다.\n\n### 매우 빠른 데모 (20초, 사운드 켜짐 🔊)\n\n\n\n## 시작하기(WebMCP를 사용하여 웹사이트에서 LLM 사용)\n\n#### 설치\n\nMCP 클라이언트( `claude` , `cursor` , `cline` , `windsurf` 또는 json 경로)를 지정하기만 하면 됩니다.\n\n지엑스피1\n\n*수동으로 설정하는 데 관심이 있는 경우 `npx -y @jason.today/webmcp@latest --mcp` 명령을 사용하세요.*\n\n*자동 설치는 Smithery에서 영감을 받았지만, 해당 코드가 AGPL이라 제가 직접 작성했습니다. 혹시 작동하지 않거나 mcp 클라이언트가 보이지 않으면 문제를 제기해 주세요.*\n\n#### WebMCP 사용하기\n\n웹사이트에 연결할 준비가 되면 모델에 MCP 토큰을 생성하도록 요청할 수 있습니다.\n\n토큰을 복사하여 웹사이트 입력란에 붙여넣으세요. 웹사이트가 해당 토큰으로 등록하는 즉시 토큰은 폐기되며 이후 등록이나 다른 용도로 사용할 수 없습니다. 웹사이트는 요청을 위한 자체 세션 토큰을 받게 됩니다.\n\n모델/서비스에서 토큰을 확인하지 않으려면 `npx @jason.today/webmcp --new` 수동으로 실행할 수 있습니다.\n\nClaude Desktop을 포함한 일부 MCP 클라이언트는 새 도구에 액세스하려면 다시 시작해야 합니다(적어도 이 글을 쓰는 시점에서는).\n\n연결을 끊으려면 브라우저 탭을 닫거나 \"연결 끊기\"를 클릭하거나 `npx @jason.today/webmcp -q` 사용하여 서버를 종료하세요.\n\n모든 구성 파일은 `~/.webmcp` 디렉토리에 저장됩니다.\n\n## 시작하기(웹사이트에 WebMCP 추가)\n\nWebMCP를 사용하려면 페이지에 [`webmcp.js`](https://github.com/jasonjmcghee/WebMCP/releases) 포함하기만 하면 됩니다(src를 통해 또는 직접).\n\n```\n\n```\n\nWebMCP 위젯이 자동으로 초기화되어 페이지 오른쪽 하단에 나타납니다. 위젯을 클릭하면 최종 사용자가 생성할 WebMCP 토큰을 입력하라는 메시지가 표시됩니다.\n\n### 전체 데모(3분)\n\n\n\n## 작동 방식에 대한 자세한 정보\n\nMCP 클라이언트와 웹사이트를 연결하는 브리지는 로컬 호스트 전용(컴퓨터 외부 요청은 접근 불가) 웹소켓 서버입니다. 로컬 웹 브라우저의 요청을 허용하도록 구성되어 있으므로, 이를 악용하려는 웹사이트 방문 시 인증/토큰 교환이 필요합니다.\n\n*이상적으로는 웹 브라우저 자체에서 웹캠이나 마이크 사용과 같은 명시적인 허가가 있어야 합니다.*\n\n1. MCP 클라이언트는 `.env` (자동 생성)의 서버 토큰을 사용하여 `/mcp` 경로에 연결합니다.\n2. 서버는 등록 토큰을 생성합니다(모델 또는 `--new` 명령을 통해 내장된 mcp 도구를 통해 시작됨)\n3. 웹 클라이언트는 이 토큰과 해당 도메인을 사용하여 `/register` 엔드포인트에 연결합니다.\n4. 웹 페이지는 도메인을 기반으로 할당된 채널에 연결됩니다.\n5. LLM이 도구/리소스/프롬프트를 사용하려고 할 때 요청은 다음에서 발생합니다.\n * MCP 클라이언트 → MCP 서버 → WebSocket 서버 → 도구/리소스/프롬프트가 있는 웹 페이지\n * (도구/리소스/프롬프트 목록을 요청하는 것과 유사)\n6. 웹 페이지는 요청(예: 도구 호출)을 수행하고 동일한 경로를 통해 결과를 다시 보냅니다.\n7. 여러 웹 페이지를 동시에 연결할 수 있으며 각 페이지에는 고유한 도구 및 토큰 세트가 있습니다.\n8. MCP 클라이언트는 이름 충돌을 방지하기 위해 채널 접두사를 사용하여 모든 도구를 통합 목록으로 봅니다.\n\n```mermaid\nsequenceDiagram\n participant User\n participant MCP as MCP Client\n participant Server as MCP Server\n participant WS as WebSocket Server\n participant Web as Website\n \n %% Initial connection\n MCP->>Server: Connect to /mcp with internal server token\n \n %% Website registration token\n User->>MCP: Request registration token\n MCP->>Server: Request registration token\n Server-->>MCP: Return registration token\n MCP-->>User: Display registration token\n \n %% Website registration\n User->>Web: Paste registration token\n Web->>WS: Connect to /register with token & domain (registration token deleted)\n WS-->>Web: Assign channel & session token\n Web->>WS: Connect to assigned channel\n \n %% Tool interaction\n MCP->>Server: Request tools list\n Server->>WS: Forward request\n WS->>Web: Request tools\n Web-->>WS: Return tools list\n WS-->>Server: Forward tools list\n Server-->>MCP: Return tools list\n \n %% Tool execution\n MCP->>Server: Tool request\n Server->>WS: Forward request\n WS->>Web: Execute tool\n Web-->>WS: Return result\n WS-->>Server: Forward result\n Server-->>MCP: Return result\n \n %% Disconnection\n User->>Web: Disconnect\n Web->>WS: Close connection\n```\n\n## 보안\n\n이 프로젝트는 매우 초기 단계입니다. 악성 확장 프로그램 등이 즉시 주입 공격 등을 수행하지 못하도록 보안을 강화하는 데 매우 관심이 있습니다. 건설적인 아이디어가 있으시면 연락 주시거나 이슈를 등록해 주세요.\n\n## 내장 도구\n\n* 토큰 생성기(WebMCP 웹사이트에 연결하기 위한)\n* MCP 도구 정의자(MCP와 함께 사용할 도구 스키마 구축을 간소화하기 위해)\n * WebMCP와 함께 사용하기 위해 후속 메시지에서 자바스크립트(해당되는 경우)를 요청할 수 있습니다.\n\n## 도커\n\nSmithery 배포를 위한 `Dockerfile` 이 특별히 존재합니다.\n\nDocker를 사용하여 웹소켓 서버를 실행하고 싶다면 데모 목적으로 `docker-compose.yml` 추가했습니다.\n\nmcp 클라이언트 설정에 `--mcp` 옵션과 함께 `--docker` 추가하면 서버가 실행 중이라고 가정합니다. 이렇게 하면 메인 프로세스(웹소켓 서버)를 도커화할 수 있으며, mcp 클라이언트는 웹소켓을 통해 도커 컨테이너에 연결됩니다. 마찬가지로 웹사이트도 도커 컨테이너와 통신합니다.","Korean","ko-KR",{"_29":61,"_33":64,"_38":65},{"_31":62,"_33":34,"_35":63},"该框架使网站能够与客户端 LLM 共享工具、资源和提示，而无需 API 密钥，从而允许用户使用他们喜欢的模型与 Web 服务进行交互。","# WebMCP\n\n支持客户端法学硕士 (LLM) 的网站提案和代码\n\n[![NPM 版本](https://img.shields.io/npm/v/%40jason.today%2Fwebmcp)](https://www.npmjs.com/package/@jason.today/webmcp) [![麻省理工学院许可](https://img.shields.io/npm/l/%40jason.today%2Fwebmcp)](./LICENSE)\n\nWebMCP 允许网站向 LLM 共享工具、资源、提示等。换句话说，WebMCP 允许网站成为 MCP 服务器。无需共享 API 密钥。您可以使用任何您想要的模式。\n\n[这是我建立的一个支持 WebMCP 的简单网站](https://webmcp.dev)\n\n它以小部件的形式出现，网站所有者可以将其放置在他们的网站上，并提供工具来为客户端 LLM 提供他们所需的一切，从而为用户或代理提供出色的用户体验。\n\n*其外观、使用体验和安全性都绝对欢迎贡献/建设性批评。MCP 客户端直接构建 WebMCP 功能似乎是理想的结果。*\n\n最终用户可以同时连接到任意数量的网站 - 并且工具根据域名进行“范围划分”（按名称）以简化组织。\n\n### 超快速演示（20 秒，开启声音🔊）\n\n\n\n## 入门（使用你的 LLM 和使用 WebMCP 的网站）\n\n#### 安装\n\n只需指定您的 MCP 客户端（ `claude` 、 `cursor` 、 `cline` 、 `windsurf`或 json 路径）\n\n```bash\nnpx -y @jason.today/webmcp@latest --config claude\n```\n\n*如果您有兴趣手动设置，请使用命令`npx -y @jason.today/webmcp@latest --mcp` 。*\n\n*自动安装的灵感来自 Smithery，但他们的代码是 AGPL，所以我自己写了这个。如果它无法正常工作，或者您没有看到 mcp 客户端，请提交问题。*\n\n#### 使用 WebMCP\n\n当您准备好连接到网站时，您可以要求您的模型为您生成一个 mcp 令牌。\n\n复制令牌并将其粘贴到网站的输入框中。一旦网站注册了令牌，该令牌就会被丢弃，无法用于后续注册或其他任何用途。网站将收到自己的会话令牌，用于发出请求。\n\n如果您不希望您的模型/服务看到令牌，您可以手动执行`npx @jason.today/webmcp --new` 。\n\n一些 MCP 客户端（包括 Claude Desktop）需要重新启动才能访问新工具。（至少在撰写本文时）\n\n要断开连接，您可以关闭浏览器选项卡，单击“断开连接”，或使用`npx @jason.today/webmcp -q`关闭服务器。\n\n所有配置文件都存储在`~/.webmcp`目录中。\n\n## 入门（将 WebMCP 添加到您的网站）\n\n要使用 WebMCP，只需在页面上包含[`webmcp.js`](https://github.com/jasonjmcghee/WebMCP/releases) （通过 src 或直接）：\n\n```\n\n```\n\nWebMCP 小部件将自动初始化并显示在页面右下角。点击它会要求终端用户输入一个 webmcp 令牌，该令牌由终端用户生成。\n\n### 完整演示（3分钟）\n\n\n\n## 关于其工作原理的更多信息\n\nMCP 客户端与网站之间的桥梁是一个仅本地主机（无法被您计算机外部的请求访问）的 WebSocket 服务器。由于该服务器配置为允许来自您本地 Web 浏览器的请求，因此需要进行身份验证/令牌交换，以防您访问试图滥用此功能的网站。\n\n*理想情况下，网络浏览器本身应该具有明确的权限，例如网络摄像头或麦克风的使用。*\n\n1. MCP 客户端使用`.env`中的服务器令牌（自动生成）连接到`/mcp`路径\n2. 服务器生成注册令牌（通过模型内置的 mcp 工具或`--new`命令发起）\n3. Web 客户端使用此令牌及其域连接到`/register`端点。\n4. 网页根据其域名连接到其指定的频道。\n5. 当法学硕士 (LLM) 想要使用工具/资源/提示时，请求来自：\n * MCP 客户端 → MCP 服务器 → WebSocket 服务器 → 带有工具/资源/提示的网页\n * （类似于请求工具/资源/提示列表）\n6. 网页执行请求（例如调用工具）并通过相同路径将结果发回\n7. 可以同时连接多个网页，每个网页都有自己的一套工具和令牌\n8. MCP 客户端将所有工具视为一个统一列表，并使用频道前缀来避免名称冲突\n\n```mermaid\nsequenceDiagram\n participant User\n participant MCP as MCP Client\n participant Server as MCP Server\n participant WS as WebSocket Server\n participant Web as Website\n \n %% Initial connection\n MCP->>Server: Connect to /mcp with internal server token\n \n %% Website registration token\n User->>MCP: Request registration token\n MCP->>Server: Request registration token\n Server-->>MCP: Return registration token\n MCP-->>User: Display registration token\n \n %% Website registration\n User->>Web: Paste registration token\n Web->>WS: Connect to /register with token & domain (registration token deleted)\n WS-->>Web: Assign channel & session token\n Web->>WS: Connect to assigned channel\n \n %% Tool interaction\n MCP->>Server: Request tools list\n Server->>WS: Forward request\n WS->>Web: Request tools\n Web-->>WS: Return tools list\n WS-->>Server: Forward tools list\n Server-->>MCP: Return tools list\n \n %% Tool execution\n MCP->>Server: Tool request\n Server->>WS: Forward request\n WS->>Web: Execute tool\n Web-->>WS: Return result\n WS-->>Server: Forward result\n Server-->>MCP: Return result\n \n %% Disconnection\n User->>Web: Disconnect\n Web->>WS: Close connection\n```\n\n## 安全\n\n这是一个非常早期的项目。我非常希望加强安全性，以防止恶意扩展程序等执行即时注入攻击或类似攻击。如果您有任何建设性的想法，请与我们联系或提交问题。\n\n## 内置工具\n\n* 令牌生成器（用于连接 WebMCP 网站）\n* MCP 工具定义器（简化构建用于 MCP 的工具模式）\n * 您可以在后续消息中请求获取用于 WebMCP 的 JavaScript（如果相关）\n\n## Docker\n\n有一个专门用于 Smithery 部署的`Dockerfile` 。\n\n如果您想使用 docker 来运行 websocket 服务器，我添加了`docker-compose.yml`用于演示目的。\n\n如果在 mcp 客户端配置中同时指定了`--docker`和`--mcp`选项，它将假定服务器正在运行。这将允许您将主进程（websocket 服务器）docker 化，并且您的 mcp 客户端将通过 websocket 连接到您的 docker 容器。同样，网站也将与您的 docker 容器进行通信。","Chinese","zh-CN","githubUser","locale",{"_69":70,"_71":72,"_13":79,"_88":32,"_89":32,"_90":91,"_94":95,"_117":-5,"_16":118,"_119":120,"_121":122,"_33":34,"_132":107,"_133":134,"_138":-5,"_139":140,"_141":-5,"_142":143,"_148":-5,"_128":34,"_149":150,"_154":-5,"_108":155,"_156":157},"addedAt",["D",1741478920418],"argumentsJsonSchema",{"_73":74,"_75":76,"_77":78},"properties",{},"required",[],"type","object",[80,81,82,83,84,85,86,87],"category:rag-systems","category:agent-orchestration","category:developer-tools","environment:local","hosting:local-only","language:javascript","license_grade:a","author:claimed","descriptionMarkdown","descriptionPlainText","githubProject",{"_35":36,"_92":93},"url","https://github.com/jasonjmcghee/WebMCP","githubRepository",{"_96":97,"_98":99,"_100":101,"_102":103,"_33":34,"_104":105,"_110":111,"_112":113,"_115":116},"defaultBranch","main","fullName","jasonjmcghee/WebMCP","githubTreeId",103250,"language","JavaScript","owner",{"_106":107,"_108":109},"login","jasonjmcghee","uid","ymkk05zjnh","recentStargazers",2,"spdxLicense",{"_33":114},"MIT License","stargazers",35,"glamaJson",1473,"inspectable",false,"integrations",[123],{"_124":125,"_31":130,"_108":131},"brand",{"_126":127,"_33":103,"_128":129},"logoSvgPath","M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z","slug","javascript","Enables websites to expose JavaScript-based tools to the MCP client, with a tool that helps define schemas for MCP tools and can generate JavaScript code for WebMCP","kt7r072709","namespace","npmPackage",{"_33":135,"_136":137},"@jason.today/webmcp","weeklyDownloads",288,"prompts","redditPostForeignId","1j6vhh6","resources","scores",{"_144":145,"_146":-5,"_147":-5},"license",100,"quality","security","simpleIcon","supportedPlatforms",[151,152,153],"LINUX","WINDOWS","MACOS","tools","dj73osxj1v","updatedAt",["D",1742491250477],"meta",[160,163,165,172,175,177,180,183,186,189,192,194,197,200,202,204,206,208,210],{"_161":162},"title","WebMCP | Glama",{"_164":32,"_33":31},"content",{"_166":167,"_168":169,"_170":171},"href","https://glama.ai/mcp/servers/@jasonjmcghee/WebMCP","rel","canonical","tagName","link",{"_164":34,"_173":174},"property","og:title",{"_164":32,"_173":176},"og:description",{"_164":178,"_173":179},"https://glama.ai/logo.png","og:logo",{"_164":181,"_173":182},"https://glama.ai/mcp/servers/@jasonjmcghee/WebMCP/og-image","og:image",{"_164":184,"_173":185},"630","og:image:height",{"_164":187,"_173":188},"1200","og:image:width",{"_164":190,"_173":191},"website","og:type",{"_164":167,"_173":193},"og:url",{"_164":195,"_173":196},"Glama – MCP Hosting Platform","og:site_name",{"_164":198,"_33":199},"summary_large_image","twitter:card",{"_164":195,"_33":201},"twitter:title",{"_164":32,"_33":203},"twitter:description",{"_164":181,"_33":205},"twitter:image",{"_164":184,"_33":207},"twitter:image:height",{"_164":187,"_33":209},"twitter:image:width",{"_211":212},"script:ld+json",{"_213":214,"_215":216},"@context","http://schema.org","@graph",[217],{"_213":218,"_219":220,"_221":222},"https://schema.org","@type","BreadcrumbList","itemListElement",[223,230,233,237],{"_219":224,"_225":226,"_33":227,"_228":229},"ListItem","item","https://glama.ai/","Glama","position",1,{"_219":224,"_225":231,"_33":232,"_228":111},"https://glama.ai/mcp","MCP",{"_219":224,"_225":234,"_33":235,"_228":236},"https://glama.ai/mcp/servers","Servers",3,{"_219":224,"_225":167,"_33":34,"_228":238},4,"visitorIsMaintainer","routes/_public/mcp/servers/~namespace/~slug/_pages/_explorer/blob/~branch/~/_route",{"_242":243,"_247":97,"_29":248,"_158":265,"_289":290,"_291":292},"blob",{"_164":244,"_245":246},"node_modules\n.webmcp*\n.env\nbuild\nsandbox\n.idea\n.DS_Store\n","fileName",".gitignore","branch",{"_69":249,"_71":250,"_13":253,"_88":32,"_89":32,"_90":254,"_94":255,"_117":-5,"_16":118,"_119":120,"_121":258,"_33":34,"_132":107,"_133":261,"_138":-5,"_139":140,"_141":-5,"_142":262,"_148":-5,"_128":34,"_149":263,"_154":-5,"_108":155,"_156":264},["D",1741478920418],{"_73":251,"_75":252,"_77":78},{},[],[80,81,82,83,84,85,86,87],{"_35":36,"_92":93},{"_96":97,"_98":99,"_100":101,"_102":103,"_33":34,"_104":256,"_110":111,"_112":257,"_115":116},{"_106":107,"_108":109},{"_33":114},[259],{"_124":260,"_31":130,"_108":131},{"_126":127,"_33":103,"_128":129},{"_33":135,"_136":137},{"_144":145,"_146":-5,"_147":-5},[151,152,153],["D",1742491250477],[266,268,270,272,274,275,276,278,279,280,281,282,283,284,285,286,287,288],{"_161":267},"MCP Server | Glama",{"_164":269,"_33":31},"Enterprise-grade security, privacy, and features like agents, MCP, prompt templates, and more.",{"_166":271,"_168":169,"_170":171},"https://glama.ai/mcp/servers/@jasonjmcghee/WebMCP/blob/main/",{"_164":273,"_173":174},"MCP Server",{"_164":269,"_173":176},{"_164":178,"_173":179},{"_164":277,"_173":182},"https://glama.ai/generated-images/og?title=MCP+Server",{"_164":184,"_173":185},{"_164":187,"_173":188},{"_164":190,"_173":191},{"_164":271,"_173":193},{"_164":195,"_173":196},{"_164":198,"_33":199},{"_164":195,"_33":201},{"_164":269,"_33":203},{"_164":277,"_33":205},{"_164":184,"_33":207},{"_164":187,"_33":209},"path","","treeMembers",[293,296,298,300,302,304,305,307,309,311,313,315],{"_289":294,"_77":295},"src","tree",{"_289":297,"_77":242},"build.js",{"_289":299,"_77":242},"CNAME",{"_289":301,"_77":242},"docker-compose.yml",{"_289":303,"_77":242},"Dockerfile",{"_289":246,"_77":242},{"_289":306,"_77":242},"index.html",{"_289":308,"_77":242},"LICENSE",{"_289":310,"_77":242},"package.json",{"_289":312,"_77":242},"package-lock.json",{"_289":314,"_77":242},"README.md",{"_289":316,"_77":242},"smithery.yaml","actionData","errors"]