快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

WebApp MCP服务器

一种模型上下文协议（MCP）服务器，使AI助手能够通过DOM检查、用户交互模拟和应用程序状态管理与web应用程序进行交互。

特性

🔍 DOM检查 -使用CSS选择器查询和检查DOM元素
🖱️ 用户交互 -模拟点击、打字、滚动和其他用户操作
📸 视觉捕捉 -对页面或特定元素进行截图
🔧 状态访问 -读取应用程序状态、本地存储和控制台日志
🚀 框架支持 -适用于React、Vue、Angular和vanilla JavaScript
🔒 安全 -内置身份验证和权限控制

安装

npm install @cgaspard/webappmcp

快速开始

1.添加到您的Express应用程序

import express from 'express';
import { webappMCP } from '@cgaspard/webappmcp';

const app = express();

// Configure the MCP middleware
app.use(webappMCP({
  transport: 'sse',
  wsPort: 4835,
  appPort: 3000,  // Tell middleware what port Express will use
  cors: {
    origin: true,
    credentials: true
  }
}));

app.listen(3000);
// The middleware will display the correct MCP URL when initialized

2.将客户端添加到前端


  const mcpClient = new WebAppMCP.WebAppMCPClient({
    serverUrl: 'ws://localhost:4835',
    autoConnect: true
  });
  
  mcpClient.connect();

或者使用npm：

import { WebAppMCPClient } from '@cgaspard/webappmcp';

const mcpClient = new WebAppMCPClient({
  serverUrl: 'ws://localhost:4835',
  autoConnect: true
});

mcpClient.connect();

3.配置您的AI助手

Claude桌面应用程序

使用命令行添加（基本todos应用程序的示例）：

claude mcp add webapp-sse sse:http://localhost:4834/mcp/sse

对于任何示例应用程序，请使用相同的标准化端口：

所有示例: http://localhost:4834/mcp/sse

或者手动编辑您的配置（例如基本todos应用程序）：

{
  "mcpServers": {
    "webapp-sse": {
      "transport": {
        "type": "sse",
        "url": "http://localhost:4834/mcp/sse"
      }
    }
  }
}

Claude 代码命令行界面

添加到您的Claude代码配置中(~/.config/claude-code/settings.json):

{
  "mcpServers": {
    "webapp": {
      "transport": {
        "type": "sse", 
        "url": "http://localhost:4834/mcp/sse"
      }
    }
  }
}

Cline（VS代码扩展）

在VS Code中添加到您的临床MCP设置中：

{
  "webapp": {
    "transport": {
      "type": "sse",
      "url": "http://localhost:4834/mcp/sse"
    }
  }
}

Continue.dev

添加到“继续”配置(~/.continue/config.json):

{
  "models": [...],
  "mcpServers": {
    "webapp": {
      "transport": {
        "type": "sse",
        "url": "http://localhost:4834/mcp/sse"
      }
    }
  }
}

Zed编辑

添加到Zed助手面板设置：

{
  "mcpServers": {
    "webapp": {
      "transport": {
        "type": "sse",
        "url": "http://localhost:4834/mcp/sse"
      }
    }
  }
}

可用工具

所有工具都以前缀 webapp_ 以防止与其他MCP服务器的命名冲突。

DOM检查

webapp_dom_query -使用CSS选择器查找元素
webapp_dom_get_properties -获取元素属性和特性
webapp_dom_get_text -提取文本内容
webapp_dom_get_html -获取HTML结构
webapp_dom_manipulate -修改DOM元素（setAttribute、addClass等）

用户交互

webapp_interaction_click -点击元素
webapp_interaction_type -在输入中键入文本
webapp_interaction_scroll -滚动页面或元素
webapp_interaction_hover -将鼠标悬停在元素上

视觉捕捉

webapp_capture_screenshot -拍摄整页截图
webapp_capture_element_screenshot -捕捉特定元素

状态管理

webapp_state_get_variable -访问JavaScript变量
webapp_state_local_storage -读/写本地存储
webapp_console_get_logs -检索浏览器控制台日志
webapp_console_save_to_file -将浏览器日志保存到文件

服务器端工具

webapp_console_get_server_logs -检索Node.js服务器日志
webapp_server_execute_js -在服务器上执行JavaScript（沙盒）
webapp_server_get_system_info -获取流程和系统信息
webapp_server_get_env -检查环境变量（屏蔽）

诊断工具

webapp_list_clients -列出已连接的浏览器客户端
webapp_javascript_inject -在浏览器中执行JavaScript代码
webapp_execute_javascript -使用异步支持执行JavaScript

术语指南

当使用WebApp MCP与AI助手一起工作时，为了清楚起见，请使用以下术语：

示例用法

✅ 好：

“单击连接的web应用程序中的提交按钮”
“截取浏览器客户端的屏幕截图”
“从目标应用程序获取当前路由”

❌ 避免：

“单击按钮”（不明确）
“查看页面”（哪一页？）
“得到国家”（从哪里来？）

配置选项

webappMCP({
  // Transport type: 'sse' (default), 'stdio', 'socket', or 'none'
  transport: 'sse',
  
  // Express app port (defaults to process.env.PORT || 3000)
  appPort: 3000,
  
  // WebSocket port for client connections
  wsPort: 4835,
  
  // MCP SSE endpoint path
  mcpEndpointPath: '/mcp/sse',
  
  // Authentication settings
  authentication: {
    enabled: true,
    token: 'your-secure-token'
  },
  
  // Permission controls
  permissions: {
    read: true,        // Allow DOM reading
    write: true,       // Allow DOM modifications
    screenshot: true,  // Allow screenshots
    state: true        // Allow state access
  },
  
  // CORS settings
  cors: {
    origin: '*',
    credentials: true
  },
  
  // Screenshot storage directory (relative to project root)
  screenshotDir: '.webappmcp/screenshots',
  
  // Debug logging
  debug: false,
  
  // Server-side console log capture
  captureServerLogs: true,     // Enable/disable all server log capture (default: true)
  serverLogLimit: 1000,         // Maximum logs to keep in memory (default: 1000)

  // Winston logger (RECOMMENDED: pass your logger directly)
  winstonLogger: logger,       // Optional Winston logger instance for direct integration

  // Granular log capture configuration
  logCapture: {
    console: false,   // Capture console.log/warn/error/info (disable if using Winston)
    streams: false,   // Capture stdout/stderr streams (disable if using Winston)
    winston: true,    // Capture Winston logs via transport (default: true)
    bunyan: false,    // Capture Bunyan logs (default: true)
    pino: false,      // Capture Pino logs (default: true)
    debug: false,     // Capture debug library logs (default: true)
    log4js: false     // Capture log4js logs (default: true)
  }
});

服务器日志捕获

WebApp MCP可以捕获服务器端控制台日志和日志库输出，使其可以通过MCP工具访问。这对于调试和监控特别有用。

特性

多层捕捉：在库、控制台和流级别拦截日志
Winston支持：通过手动配置直接集成（推荐）
环形缓冲器：仅保留最新日志（可配置限制）
选择性捕获：选择要捕获的日志源
性能友好：禁用特定拦截器以获得更好的性能

Winston集成（推荐）

捕获Winston日志的最佳方式是直接传递您的记录器：

const winston = require('winston');

// Create Winston logger
const logger = winston.createLogger({
  level: 'info',
  transports: [new winston.transports.Console()]
});

// Pass it to the middleware
const mcpMiddleware = app.use(webappMCP({
  winstonLogger: logger,  // Direct integration (recommended!)
  captureServerLogs: true,
  logCapture: {
    console: false,  // Disable console capture
    winston: true    // Winston capture via winstonLogger param
  }
}));

// Alternative: Attach logger after setup (if created elsewhere)
// mcpMiddleware.attachWinston(logger);

配置示例

// Winston-only capture (recommended for production)
const logger = winston.createLogger({ /* ... */ });

app.use(webappMCP({
  winstonLogger: logger,
  captureServerLogs: true,
  logCapture: {
    console: false,
    streams: false,
    winston: true
  }
}));

// Console only (lightweight, development)
app.use(webappMCP({
  captureServerLogs: true,
  logCapture: {
    console: true,
    streams: false,
    winston: false
  }
}));

// Attach Winston from separate module
const mcpMiddleware = app.use(webappMCP({ captureServerLogs: true }));
const logger = require('./config/logger');
mcpMiddleware.attachWinston(logger);  // Attach after the fact

例子

看看 Todos应用程序示例 -一个功能齐全的todo应用程序，演示了所有WebApp MCP功能。

常见用例

// Add a new todo
await webapp.interaction.type({ 
  selector: '#new-todo',
  text: 'Buy groceries'
});
await webapp.interaction.click({ selector: '#add-todo' });

// Toggle todo completion
await webapp.interaction.click({ selector: '.todo-checkbox' });

// Filter todos
await webapp.interaction.click({ selector: '[data-filter="active"]' });

// Access application state
const todos = await webapp.state.getVariable({ 
  path: 'window.todosApp.todos' 
});

安全

WebApp MCP服务器包括几个安全功能：

认证 -MCP连接的基于令牌的身份验证
速率限制 -通过可配置的速率限制防止滥用
输入净化 -所有DOM查询都经过净化，以防止XSS
权限控制 -对允许的操作进行细粒度控制
HTTPS支持 -安全的WebSocket连接

框架集成

反应

import { useEffect } from 'react';
import { WebAppMCPClient } from '@cgaspard/webappmcp';

function App() {
  useEffect(() => {
    const client = new WebAppMCPClient({
      serverUrl: 'ws://localhost:4835',
      autoConnect: true
    });
    
    client.connect();
    
    return () => client.disconnect();
  }, []);
  
  return 
Your app content
;
}

Vue

import { WebAppMCPClient } from '@cgaspard/webappmcp';

export default {
  mounted() {
    this.mcpClient = new WebAppMCPClient({
      serverUrl: 'ws://localhost:4835',
      autoConnect: true
    });
    
    this.mcpClient.connect();
  },
  
  beforeUnmount() {
    if (this.mcpClient) {
      this.mcpClient.disconnect();
    }
  }
}

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebAppMCPClient } from '@cgaspard/webappmcp';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  private mcpClient: WebAppMCPClient;
  
  ngOnInit() {
    this.mcpClient = new WebAppMCPClient({
      serverUrl: 'ws://localhost:4835',
      autoConnect: true
    });
    
    this.mcpClient.connect();
  }
  
  ngOnDestroy() {
    if (this.mcpClient) {
      this.mcpClient.disconnect();
    }
  }
}

发展

# Clone the repository
git clone https://github.com/cgaspard/webappmcp.git
cd webappmcp

# Install dependencies
npm install

# Build all packages
npm run build

# Run tests
npm test

# Start development server
npm run dev

VS代码集成

此项目包括完整的VS代码支持，便于开发和调试。看 VS_CODE_SETUP.md 了解详情。

VS Code快速入门：

在VS Code中打开项目
按 F5 启动演示应用程序和MCP服务器
访问http://localhost:3456观看演示

贡献

我们欢迎捐款！请查看我们的贡献指南了解详情。

许可证

MIT© cgaspard

支持

📚 文档
🐛 问题追踪
💬 讨论

______________________________________________________________________

内置于❤️ 让每个人都能使用人工智能驱动的网络自动化。

目录标签

TypeScriptClaude浏览器自动化DOM检查本地部署用户交互模拟应用状态管理Web自动化AI助手集成

支持客户端

ClaudeClineVS Code

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

token

工具数量（toolCount，工具数）

22

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明token部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/271552e290502287e2c3dcaa54589462

WebApp MCP Server是一个模型上下文协议服务器，使AI助手能够通过DOM检查、用户交互模拟和应用状态管理与Web应用交互。

继续浏览同类 MCP

更多浏览器工具 MCP（2,803）返回 MCP 目录

上一个 MCP

Web Agent Protocol

🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support

下一个 MCP

Web Auth MCP

一个处理HTTP请求并支持基于浏览器的自动认证的MCP服务器，适用于OAuth流程和登录表单。

webappmcp (Cgaspard)