WebMCP

Prompts in WebMCP are predefined templates for LLM interactions. Developers register prompts with the registerPrompt method, supplying a name, description, and a handler that generates messages for the AI. A git-commit prompt takes a description of changes and returns a formatted commit message. Prompts standardize common queries and can accept dynamic arguments, ensuring consistent responses from the LLM. This is useful for tasks requiring specific formatting or context, such as code explanations, text summarization, or content generation. By providing these templates, developers guide the AI to produce outputs that align with the site's needs and reduce ambiguity. The prompts become available to any connected MCP client, offering a library of reusable AI interactions tailored to the website, enhancing user experience with predictable responses.

Resources expose data and content from the website that AI agents can read. Using registerResource, developers define resources identified by URIs that can be text or binary. For example, a 'page-content' resource returns the HTML of the current page, while an 'element-content' resource dynamically fetches a specific DOM element by ID. These resources provide context to the LLM, allowing it to understand the page's state and make informed decisions. The ability to register resource templates enables dynamic access to arbitrary parts of the website. Resources can be static or dynamic, supporting both text and binary data, covering a wide range of use cases such as passing user data or current page structure. This makes WebMCP a versatile bridge between websites and AI agents, enabling context-aware interactions.

Sampling allows servers to request LLM completions through the client with human oversight. When a sampling request is made, WebMCP displays a modal dialog to the user, who can review and provide a response. This ensures that any AI-generated content is validated by a human before being sent back, maintaining security and privacy. An example from the content shows a sampling request for DuckDB SQL. The user sees the request and can type a response, giving them full control over whether to approve, modify, or reject each completion. Sampling is particularly important for sensitive or high-stakes operations where automatic execution could be risky, as it combines AI power with human judgment. WebMCP handles the entire dialog flow automatically, so developers only need to trigger the sampling request from their code.

A practical use case is integrating WebMCP with Claude Desktop. Users configure their MCP client with the provided npx command, then obtain a token from the website's widget. Once connected, they can ask the AI to perform actions defined by the site's registered tools, such as fetching weather, getting page content, or generating a summary using registered prompts. The outcomes include enhanced productivity, as users can delegate tasks to the AI, and improved accessibility, as AI agents can interact with sites that would otherwise be inaccessible to them. Developers benefit from increased engagement and the ability to offer AI-powered features without building custom integrations. The demo page further illustrates dynamic registration of tools, prompts, and resources via clickable buttons, showcasing real-time integration possibilities.

WebMCP targets web developers and JavaScript developers who want to make their websites AI-ready. It integrates with any MCP client, such as Claude Desktop, and runs on any platform that supports JavaScript, including modern browsers. The library is open source, available on GitHub, and free to use—there are no pricing plans as it is community-driven. The setup is straightforward: include the script, register tools/prompts/resources, and users connect via the widget. The technology stack relies on the Model Context Protocol, which is emerging as a standard for AI-client-server communication. In summary, WebMCP provides a powerful, protocol-based bridge between websites and AI agents, enabling a new class of interactive, AI-enhanced web experiences that are both secure and user-controlled.