alibaba/webmcp-nexus

This page was translated automatically. Technical details may differ from the original. View the original

47 stars 6 forks Quality 85 Trend 27MIT

A non-intrusive frontend integration suite for WebMCP standards: write a regular TS function and a JSDoc segment that can be called by any MCP client—including SDK, Vite/Webpack plugins, and AI coding skills.

Overview

WebMCP is a W3C browser standard proposal (jointly promoted by Google and Microsoft), allowing web pages to expose their capabilities as callable tools by MCP (Model Context Protocol) clients via document.modelContext.registerTool(). It is a set of production-ready front-end engineering solutions around this standard: - —— Only two APIs are exported (registerGlobalTools / useWebMcpTools), covering global, routing, and component lifecycles. - —— Dual adaptation of Vite & Webpack; Static analysis of TypeScript type + JSDoc during build, automatic generation of JSON Schema, zero annotation and zero wrapping for tool functions. - —— Older browsers run native APIs; Other environments automatically load built-in polyfill from the SDK entry, leaving business code completely unresponsive. - —— Built-in skill documentation for Claude Code, Cursor, and other coding agents, turning "tool for function generation" into a one-sentence command. In short: write a regular TypeScript function, add a line of JSDoc, and it can be called by any MCP client. - 🪶 —— registerGlobalTools + useWebMcpTools, 30 seconds to understand, 5-minute integration. - 🔬 —— Based on ts-morph static analysis, function signature = JSON Schema, no runtime overhead. - 🔁 —— During development, modifying function signatures automatically re-registers tool schemas without manual refresh. - 🧩 —— Component-level tools mount/unload with React's lifecycle, preventing "ghost tools" from polluting the context. - 🛡️ —— Internal scope ownership registry; when registering multiple scopes with the same name, only warnings are issued without interruption; logout is strictly isolated. - 🌐 —— Chrome 149+ uses native document.modelContext (146–149 is bridged by polyfill as the entry point); Other environments automatically enable @mcp-b/[email protected]. - 🤝 —— Through @mcp-b/webmcp-local-relay, local MCP clients such as Claude Desktop / Cursor / VS Code can directly drive web applications.

Overview (machine translated)

** A zero-intrusion front-end integration solution for WebMCP standards. **

Enable any React application to become a directly driven, MCP client object within minutes.

Chinese Simplified | English

🚀 ** Online Demo → **

Project Overview
Why choose WebMCP Nexus
Core highlights
Project structure
Start quickly
Three-level registration strategy
Example application
Let the local agent operate the web application
AI coding skills
Browser compatibility
Tool name: Conflict Strategy
TypeScript type supported scope
Technology stack
Development scripts
Project status
Participate in contributions
License

Project Overview

Runtime SDK — Only 2 APIs are exported (registerGlobalTools / useWebMcpTools), covering three lifecycles: global, routing, and component.
Build plugins — dual adaptation of Vite & Webpack; Static analysis of TypeScript type + JSDoc during build, automatic generation of JSON Schema, zero annotation and zero wrapping for utility functions.
Polyfill Integration — Older browsers use native APIs; Other environments automatically load built-in Polyfill from the SDK entry, leaving no business code at all.
Agent Skill — Built-in skill documentation for Claude Code, Cursor, and other coding agents, turning “tool for function generation” into a one-sentence command.

In short: write a regular TypeScript function, add a line of JSDoc, and it can be called by any MCP client.

Why Choose WebMCP Nexus

Dimensions	Common Industry Practices	WebMCP Nexus
API Surface	Decorator / Wrapper Function / Explicit Schema Configuration	2 APIs Covering All Scenarios

This page was translated automatically. Technical details may differ from the original.

Install

npx -y @mcp-b/webmcp-local-relay@latest

New to MCP? Start with the mcpskill.org guide →

Configuration

{
  "mcpServers": {
    "webmcp-local-relay": {
      "command": "npx",
      "args": ["-y", "@mcp-b/webmcp-local-relay@latest"]
    }
  }
}