Auto Web MCP

AutoWebMCP

教克劳德一次网络应用程序。永远使用它。

停止像素搜索。开始调用函数。

   

______________________________________________________________________

问题

克劳德代码使用 计算机使用 与web应用程序交互——每次会话，它都会从头开始重新发现应用程序的布局， 截图屏幕，点击坐标，再次截图，然后重复。它缓慢而脆弱， 把时间浪费在克劳德以前做过的工作上。

解决方案

AutoWebMCP颠覆了这种方法： 教克劳德一次，然后让它永远使用它学到的东西 --通过 MCP（模型上下文协议）, Anthropic将克劳德连接到外部工具的开放标准。

/learn-webapp https://sites.google.com

就是这样。AutoWebMCP探索应用程序，找出它支持的操作，并生成 永久的 MCP服务器 使用语义工具，如 set_page_title(), insert_text_box(), add_page().

从那时起，克劳德直接调用这些工具——没有截图，没有坐标数学， 没有电脑使用开销。只是干净、可靠的函数调用。

之前vs之后

BEFORE (computer use / raw browser automation):
  1. screenshot()                            ~2s
  2. Analyze image to find "title" element   ~3s
  3. Calculate click coordinates             ~1s
  4. computer(click, [672, 195])             ~1s
  5. screenshot() to verify                  ~2s
  6. computer(type, "My New Title")          ~1s
  7. screenshot() to confirm                 ~2s
                                    Total: ~12s, may fail

AFTER (AutoWebMCP → single MCP tool):
  1. set_page_title("My New Title")          ~0.5s
                                    Total: ~0.5s, reliable

AFTER (AutoWebMCP → batch via run_script):
  1. run_script("set title, add 5 pages,     ~1s  (one CDP round-trip
     insert content, set theme")                    for ALL operations)
                                    Total: ~1s, instant

______________________________________________________________________

安装

先决条件

• 克劳德代码 随着 MCP支持
• 18+（MCP SDK要求）
• 谷歌浏览器
• Chrome版Claude 扩展（用于学习阶段）

无需手动设置Chrome。 这 /learn-webapp 技能自动检测 Chrome启动时启用了远程调试，并管理连接。

选项A：作为独立项目使用（推荐）

克隆并直接在Claude Code中打开——一切都是预先配置的：

git clone https://github.com/ApartsinProjects/AutoWebMCP.git
cd AutoWebMCP
npm install

技能已经存在 .claude/skills/，模板在 src/templates/，以及 目录在 catalogue.json.只需在Claude Code中打开项目并开始 学习应用程序。

选项B：整合到您现有的项目中

将所需文件复制到您的Claude Code项目中：

# Skills — Claude Code discovers these automatically from .claude/skills/
cp -r path/to/AutoWebMCP/skills/learn-webapp  YOUR_PROJECT/.claude/skills/learn-webapp
cp -r path/to/AutoWebMCP/skills/webmcp        YOUR_PROJECT/.claude/skills/webmcp

# Templates — used during code generation (referenced by the learning skill)
mkdir -p YOUR_PROJECT/src/templates
cp path/to/AutoWebMCP/src/templates/*          YOUR_PROJECT/src/templates/

# Catalogue — required for skill routing (skills resolve PROJECT_ROOT from this file)
cp path/to/AutoWebMCP/catalogue.json           YOUR_PROJECT/catalogue.json

# CLAUDE.md — project conventions (optional but recommended)
cp path/to/AutoWebMCP/CLAUDE.md                YOUR_PROJECT/CLAUDE.md

什么去哪里：

选项C：全局安装（所有项目）

安装技能 ~/.claude/skills/ 因此，它们在每个Claude Code项目中都可用：

# Global skills — available in ALL Claude Code projects
cp -r path/to/AutoWebMCP/skills/learn-webapp  ~/.claude/skills/learn-webapp
cp -r path/to/AutoWebMCP/skills/webmcp        ~/.claude/skills/webmcp

注： 模板和 catalogue.json 仍然需要参与你所在的项目 跑 /learn-webapp，因为生成的MCP服务器是特定于项目的。全球技能 只要做 /learn-webapp 和 /webmcp 命令随处可用。

选项D：下载版本

从下载最新版本 发布、提取并运行：

./install.sh /path/to/your/project

______________________________________________________________________

快速开始

1.学习应用程序

/learn-webapp https://your-app.com

AutoWebMCP将：

• 打开应用程序并映射其UI
• 发现所有可用操作
• 显示工具列表以供审批
• 生成即用型MCP服务器

你保持控制——它会在点击任何有风险的东西之前询问，然后你批准最终的工具列表。

2.使用它

下次你让Claude Code用那个应用程序做任何事情时，它都会调用MCP工具 而不是回到电脑使用：

You:    "Add a new page called About and set the theme to Diplomat"
Claude: Done. 2 MCP tools called, 0 errors.

无需设置。这 /webmcp 技能自动检测应用程序，找到 匹配MCP服务器，并通过语义工具路由——否 screenshot() 或 computer(click, ...) 电话。

3.分享

git push

您所学习的MCP服务器现在可供任何克隆该仓库的人使用。当另一个 Claude Code用户要求与同一应用程序交互，WebMCP下载MCP服务器 自动从GitHub下载——他们不需要再次学习。

______________________________________________________________________

生成什么

当你学习一个应用程序时，AutoWebMCP会创建一个完整的MCP服务器。到目前为止，我们已经为 谷歌站点 （33个工具）， 谷歌表单 （30个工具），以及 脸书 （18个工具）。例如：

每个工具都直接通过Chrome DevTools协议执行JavaScript——替换 截图分析点击循环 计算机使用 只需一次函数调用。

每个生成的MCP服务器还包括：

• run_script --在页面上下文中执行任意JS以进行批处理操作或在特定工具失败时执行。所有辅助函数都是自动注入的。
• health_check --验证与目标应用程序的连接
• show_scripts --列出所有可用函数及其签名

______________________________________________________________________

它是如何工作的（简单版本）

        You say:                    AutoWebMCP does:
   ┌──────────────┐
   │ "Learn this  │──── Explores the app, discovers operations,
   │  web app"    │     generates an MCP server with semantic tools
   └──────────────┘

   ┌──────────────┐
   │ "Update the  │──── Finds the matching MCP, calls set_title()
   │  title"      │     and insert_text_box() directly — done
   └──────────────┘

   ┌──────────────┐
   │ "Add a       │──── Tool missing? Learns it on the spot,
   │  contact     │     adds to the MCP, keeps going
   │  form"       │
   └──────────────┘

在幕后，有两个 Claude代码技能:

• /learn-webapp --探索web应用程序并生成 MCP服务器
• /webmcp --拦截web应用程序任务，并通过MCP工具而不是计算机使用来路由它们

你只需要记住 /learn-webappThe /webmcp 技能自动射击 每当Claude Code即将与具有学习MCP的web应用程序交互时。

______________________________________________________________________

使MCP保持最新状态

应用程序更改。AutoWebMCP通过四种重新学习模式来处理这一问题：

/learn-webapp https://sites.google.com

An MCP already exists for google-sites (33 tools).
What would you like to do?

  a) Re-learn from scratch — full exploration, new version
  b) Update/extend — keep existing tools, add new ones
  c) Validate & fix — test each tool, fix broken selectors
  d) Learn separate MCP — create an independent tool set

______________________________________________________________________

大局观

你学习的每个网络应用程序都会变成一个永久的、可共享的MCP服务器，取代了脆弱的 计算机使用，工具调用可靠。

今天：你学习谷歌网站。现在克劳德打电话来了 set_page_title() 而不是 screenshot() + computer(click, [x,y]) + computer(type, "...").

明天有人学习了Notion。另一个人学习Figma。其他人学习 Salesforce。每个学习过的应用程序都会成为目录中的MCP服务器。

愿景：一个不断增长的预先学习的web应用程序库，任何克劳德代码 用户可以立即使用——首次使用时从GitHub下载，无需学习。

catalogue.json
├── google-sites    → 33 tools  ✅
├── google-forms    → 30 tools  ✅
├── facebook        → 18 tools  ✅
├── notion          → 45 tools  (someone contributes this)
├── figma           → 60 tools  (someone contributes this)
├── salesforce      → 80 tools  (someone contributes this)
└── your-app        → you learn it in 5 minutes

每一个学习应用程序都使整个生态系统更加强大。

______________________________________________________________________

对于贡献者

AutoWebMCP是一个众包项目。你贡献的每一台MCP服务器都让克劳德 对每个人来说都更聪明——你5分钟的学习可以节省数千小时的时间 整个社区的电脑使用率很低。

目录随着每次贡献而增长。当你学习一个应用程序并推送它时， 克隆此仓库（或从远程目录中获取）的每个Claude Code用户 立即访问您的MCP——无需学习、无需设置、无需计算机使用回退。 我们覆盖的应用程序越多，克劳德就越不需要依赖屏幕截图和像素搜索。

如何做出贡献

1. 分叉和克隆 这个仓库
2. 学习 任何网络应用程序： /learn-webapp https://your-app.com
3. 审查 生成的工具--批准、删除或请求添加
4. 推送并打开PR --您的MCP服务器现在可供社区使用

什么是好的贡献

• 热门应用 许多人使用的（谷歌工作区、Notion、Jira、Figma等）
• 全覆盖 --批准一套慷慨的工具，而不仅仅是2-3个
• 经过验证的工具 --在推之前，确保生成的工具确实有效
• 明确命名 --使用应用程序的自然名称(gmail, notion, figma)

当你捐款时会发生什么

您的MCP服务器已登录 MCPs// 并在中注册 catalogue.json. 任何遇到该应用程序的Claude Code用户都会自动下载并使用 您的MCP，而不是回到计算机使用。他们不需要安装 任何东西 /webmcp 技能会处理它。

文档

• 学习手册 --如何 /learn-webapp 探索应用程序并生成MCP服务器（阶段、选择器、代码生成、验证）
• 使用说明书 --如何 /webmcp 在运行时通过MCP工具路由任务（目录、计划、批处理执行、错误恢复）
• 博客文章 --面向普通受众的系统技术概述

外部引用

• 计算机使用工具 --Claude今天如何与浏览器交互（AutoWebMCP取代了什么）
• 模型上下文协议（MCP） --开放标准AutoWebMCP为以下对象生成服务器
• Claude Code MCP集成 --Claude Code如何连接到MCP服务器

许可证

麻省理工学院

______________________________________________________________________

建造于 萨沙公寓