This project is a functional demonstration of the WebMCP Protocol, illustrating how AI agents can interact with local browser contexts (tools) to achieve complex workflows autonomously.
You can try the live demo for free at: https://music.leanmcp.live
(Note: You must open this link in Google Chrome Canary and enable the WebMCP flag in chrome://flags for the WebMCP features to work best, otherwise, it'll use a polyfill.)
WebMCP (Web Model Context Protocol) is PENDING standard allowing web applications to register "tools" directly with the browser or a connected AI agent. By natively exposing the application's capabilities, an AI can introspect the available tools and intelligently execute tasks. In this specific demo, the agent orchestrates a web-based audio sequencer using nothing but WebMCP tool calls.
To read the official specification, visit webmcp.link.
To run this protocol demonstration locally, you will need a LeanMCP API key and Google Chrome Canary.
- Node.js installed on your machine.
- Google Chrome Canary. Experimental WebMCP features are best tested on the bleeding-edge browser.
- A LeanMCP API Token. Get yours from the LeanMCP API Keys dashboard.
- Adequate Credits on your LeanMCP account. Manage your billing here.
Navigate to this directory (webmcp-react). Copy the example environment file to configure your credentials:
cp .env.example .envEdit .env and assign your actual API token:
VITE_GATEWAY_API_KEY=your_actual_leanmcp_api_token_hereInstall the required npm dependencies and start the Vite development server:
npm install
npm run dev- Open Google Chrome Canary.
- Navigate to
chrome://flagsand enable the WebMCP experimental feature. Relaunch the browser if prompted. - Navigate to the
localhostURL provided by the Vite server (typicallyhttp://localhost:5173). - Use the interface to initiate an agent run. You'll observe the underlying WebMCP runtime expose the UI's capabilities as tools to an LLM, which autonomously handles the workflow and invokes operations back onto the page.