explaingit

alibaba/webmcp-nexus

22TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

An Alibaba toolkit that lets you turn plain TypeScript functions in a web app into AI-callable tools, so agents like Claude Desktop or Cursor can directly call actions in a running browser app.

Mindmap

mindmap
  root((WebMCP Nexus))
    What it does
      Expose web app functions to AI agents
      Auto-generate tool schemas from JSDoc
      Lifecycle-aware tool registration
    Core parts
      Runtime SDK
      Vite plugin
      Webpack plugin
    AI client support
      Claude Desktop
      Cursor
      Any WebMCP client
    Tech stack
      TypeScript
      React
      Vite
      Webpack
    Dev tools
      Built-in debug panel
      Browser polyfill
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Expose a search function in your React app so Claude Desktop can call it directly from a chat prompt without any backend API.

USE CASE 2

Register component-level tools that automatically unregister when the component unmounts, preventing AI agents from calling stale actions.

USE CASE 3

Use the Vite plugin to auto-generate JSON Schema for your TypeScript functions from JSDoc comments, skipping manual schema writing.

USE CASE 4

Connect Cursor to a running web app via the relay package so it can call registered tools during AI-assisted development.

Tech stack

TypeScriptReactViteWebpackWebMCP

Getting it running

Difficulty · moderate Time to first run · 30min

Requires adding the runtime SDK and a Vite or Webpack build plugin, browser polyfill handles compatibility with browsers that do not yet natively support WebMCP.

No license information was mentioned in the explanation.

In plain English

WebMCP Nexus is a toolkit from Alibaba that makes it easier to expose web application features as tools that AI agents can call. It is built around WebMCP, a proposed browser standard being developed by Google and Microsoft that lets a web page register callable functions through a browser API so that AI clients running on the same machine can discover and invoke them. The toolkit has three main parts. A runtime SDK provides two functions: one for registering tools globally when the application starts, and one for registering tools tied to the lifecycle of a specific React component or page. When a component unmounts, its registered tools are automatically removed, preventing agents from calling actions that are no longer available. Build-time plugins for Vite and Webpack read your TypeScript function signatures and JSDoc comments at compile time and generate the JSON Schema describing each tool's parameters, so you do not need to write or maintain that schema by hand. The result is that a plain TypeScript function with a JSDoc comment becomes callable by AI clients without any additional wrapping. The README is written primarily in Chinese. An optional integration with a separate relay package lets local AI clients such as Claude Desktop or Cursor connect directly to a running web application in the browser and call its registered tools. The project includes a full demo application showing global query tools, component-level tools, and page-level tools in practice. A built-in debug panel lets you inspect which tools are currently registered and test calls against them. Browser compatibility is handled by a polyfill that loads automatically in browsers that do not yet support the native WebMCP API.

Copy-paste prompts

Prompt 1
I have a React app built with Vite. Show me how to add the WebMCP Nexus runtime SDK and Vite plugin, then register a search function so Claude Desktop can call it from a prompt.
Prompt 2
How do I register a tool tied to a specific React component's lifecycle in WebMCP Nexus so it automatically unregisters when the component unmounts?
Prompt 3
Walk me through using the WebMCP Nexus debug panel to inspect currently registered tools and test a tool call in the browser.
Prompt 4
Show me a TypeScript function with JSDoc that WebMCP Nexus would auto-generate a JSON Schema for, and explain what the generated schema looks like.
Open on GitHub → Explain another repo

← alibaba on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.