WebMCP集成套件

快速开始

前置条件：Node.js 18+，推荐 pnpm。

1. 安装

pnpm add webmcp-nexus-sdk
pnpm add -D vite-plugin-webmcp-nexus     # 或 webpack-plugin-webmcp-nexus

安装

<details> <summary><strong>Claude Code</strong></summary>

```bash

示例应用

仓库内 apps/demo 是一个完整的 Todo / 项目管理应用，演示了所有典型集成模式：全局查询工具、组件级表单工具、路由跳转工具、HMR 调试面板等。

🌐 在线预览：<https://alibaba.github.io/webmcp-nexus/> （由 GitHub Pages 自动部署，跟随 main 分支更新）

pnpm install
pnpm dev               # 启动 Vite demo（http://localhost:5173）
pnpm dev:webpack       # 启动 Webpack demo（http://localhost:3001）

打开应用后按 <kbd>⌘</kbd> + <kbd>\\</kbd> 唤起内置 Debug Panel，可实时查看已注册的工具、参数 schema 与调用结果。

关键代码索引：

• 全局工具注册入口：apps/demo/src/main.tsx
• 全局查询工具集：apps/demo/src/tools/queries.ts
• 路由跳转工具：apps/demo/src/tools/navigation.ts
• 页面级工具注册：apps/demo/src/pages/TasksPage.tsx

使用示例

"把 apps/demo/src/store/TodoStore.tsx 里的 createTask 改造成 WebMCP 工具，注册到任务列表页。"

Agent 会按 Skill 中规定的流程，自动补齐 JSDoc、调整参数为对象形态、在对应组件挂载点调用 useWebMcpTools，且不修改任何业务逻辑。

2. 配置构建插件

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { vitePluginWebMcp } from 'vite-plugin-webmcp-nexus';

export default defineConfig({
  plugins: [
    react(),
    vitePluginWebMcp({ include: ['src/**/*.ts', 'src/**/*.tsx'] }),
  ],
});

Webpack

// webpack.config.ts
import { WebMcpPlugin } from 'webpack-plugin-webmcp-nexus';
import type { Configuration } from 'webpack';

const config: Configuration = {
  // ... entry / module / resolve 等常规配置
  plugins: [
    new WebMcpPlugin({ include: ['src'] }),
  ],
};

export default config;

完整双构建示例参见 apps/demo/vite.config.ts 与 apps/demo/webpack.config.ts。