首页 › new-tools › 别只卷聊天机器人：网页开始给AI递工具了

上周扫 HN 的 Show HN 榜单（news.ycombinator.com/show），我注意到一个比单个工具更重要的信号：海外开发者正在把「AI调用工具」这件事从服务端搬进网页里。今天拆解三个我逐行看过 README 和官网的新货——一个绑定 W3C 新标准的 React 库、一个把 iOS 模拟器塞进 AI 编程会话的 opencode 分叉、一个单二进制替换 GitLab+Jenkins 还自带 42 个 MCP 工具的自托管平台。文末附送两个 GPU 低价渠道的彩蛋。

一、webmcp-react：你的网页，正在变成 AI 的「工具箱」

链接：https://github.com/agentcathq/webmcp-react（MIT 开源，免费）

先说背景，这是真正的时间差信息。W3C 的 Web Machine Learning 社区组有一个提案标准叫 WebMCP：给浏览器加上 document.modelContext API，让任何网页都能向 AI Agent 暴露带类型、可调用的工具。Chrome 已经以 Early Preview 形式内置了这个 API（官方博客地址 developer.chrome.com/blog/webmcp-epp）。

webmcp-react 就是这个标准的 React 绑定库，上周刚发布 v1.0.0。用法极简：

npm install webmcp-react zod

useMcpTool({
  name: "search",
  description: "Search the catalog",
  input: z.object({ query: z.string() }),
  handler: async ({ query }) => ({
    content: [{ type: "text", text: `Results for: ${query}` }],
  }),
});

写完这一段，你的网页就多了一个任何 WebMCP 兼容 Agent 都能发现和调用的搜索工具。库本身做得很工程化：Zod 优先（也支持裸 JSON Schema）、SSR 安全（Next.js/Remix 可用）、StrictMode 安全（防重复注册）、没有原生 API 时自动装 polyfill。一个细节值得点赞：工具随组件挂载/卸载自动注册/注销，你可以按用户权限动态暴露工具——管理员登录才注册 admin 工具。

接入方式分两路，官方 README 写得很清楚：

还有个前瞻细节：Chrome 153+ 里 Agent 取消调用时会自动触发 AbortSignal，你可以把它直接传给 fetch，做到「Agent 取消 = 请求取消」。作者甚至做了一个可玩的 Wordle 演示页（agentcathq.github.io/webmcp-react/playground），AI 可以通过网页暴露的工具自己玩猜词游戏。

为什么这是大事：过去两年国内外的 Agent 生态都在卷「MCP Server」——让 AI 接入你的后端。而 WebMCP 把方向反过来了：前端主动给 Agent 递工具。想象你的电商页面直接向 Agent 暴露 search、add_to_cart、checkout 三个工具，用户对着 AI 说「帮我买一台适合跑模型的台式机」，Agent 在页面内完成整个流程。做过 GEO（生成式引擎优化）的人应该明白，这是下一个战场：以前优化网页给搜索引擎看，以后要给 Agent 提供「可调用接口」。

与国内对比：国内 Agent 生态还在卷各自 App 的接入和 MCP 服务器托管，网页侧标准基本无人跟进。这个库 MIT 免费开源，现在抄进去做 demo，等 Chrome 正式版发布你就是国内第一批有现成案例的人。

适用人群：前端工程师、做电商/SaaS 出海的团队、所有押注 Agent 分发渠道的人。

flowchart TB
    A["你的网页 React 组件"] --> B["useMcpTool 注册工具"]
    B --> C["document.modelContext"]
    C --> D{"Agent 如何接入"}
    D -->|原生支持| E["Codex 直接发现并调用"]
    D -->|需要桥接| F["WebMCP Bridge 扩展"]
    F --> G["Claude Code 与 Cursor 等 MCP 客户端"]
    E --> H["用户确认后执行工具"]
    G --> H

二、MobileCode：AI 写 App，模拟器直接长在会话窗口里

链接：https://github.com/hsandhu/mobilecode（MIT 开源，免费）

AI 编程工具写 Web 项目已经很顺了，但移动端一直是断的：AI 改完 Swift/Kotlin 代码，你还得自己切 Xcode、等构建、开模拟器、把报错复制回对话框。MobileCode 是 opencode 的一个分叉，专门补这个缺口。

核心能力三个：

  1. 内嵌设备画面。检测到 iOS/Android 项目后，它自动起 serve-sim/serve-avd 服务，把 iOS Simulator 或 Android Emulator 的实时画面流式渲染在会话窗口旁边。Xcode 工程、CocoaPods、Expo、Gradle 项目都能识别（往下探测两层目录）。
  2. 一键双端运行。React Native 项目按一个 Play 键：自动起一个 Metro 服务，expo prebuild 生成原生工程、装 Pod、adb reverse 打通模拟器，一个 Metro 同时喂 iOS 和 Android 两端。iOS 走 xcodebuild + simctl install/launch，Android 走 ./gradlew assembleDebug + adb install -r -g。
  3. Agent 自主修构建。这是最值钱的设计：一个叫 device_run 的工具让 Agent 自己构建、自己等结果、自己读构建报错和日志尾部，然后自己改代码重试——不再需要你当「人肉日志搬运工」。构建失败时第一个编译器/Gradle 错误会直接显示在状态栏。

它完整继承了 opencode 的能力（多模型接入、MCP、插件、skills、Web UI、桌面端），配置文件直接复用 ~/.config/opencode，所以 opencode 老用户零迁移成本。所有设备操作还暴露了 HTTP API（POST /api/device-preview/run 等），可以脚本化批量跑。

注意门槛：iOS 功能要求 macOS + Xcode（serve-sim 需要 Node 20+），Android 需要 SDK platform-tools 和至少一个 AVD。Linux/Windows 用户只能玩 Android 半边。

与国内对比：国内主流 AI 编程工具还是 IDE 插件形态，聚焦代码补全和对话，没有一个把「构建→安装→启动→看画面→读报错→自修」这个移动端闭环做进产品里的。做 RN/Expo 出海应用的小团队，这个分叉可以立刻上手，模型费照常用自己的 API Key（任意 provider 可选），工具本身零成本。

flowchart LR
    A["Agent 发起 device_run"] --> B["xcodebuild 或 Gradle 构建"]
    B --> C["simctl 或 adb 安装并启动"]
    C --> D["模拟器画面嵌入会话"]
    D --> E["读取报错与日志尾部"]
    E --> A

三、Kovanex：一个二进制换掉 GitLab+Jenkins+Jira+Vault，还内置 42 个 MCP 工具

链接：https://kovanex.dev（Apache 2.0 开源，免费自托管，当前版本 v8.4.0）

上周出现在 Show HN 新帖区（作者 ID naykip，站内名 Kovavue），我顺着摸到官网，信息量比标题大得多。定位一句话：自托管 DevOps 一体机——Git 托管、CI/CD、看板、密钥保险库、容器镜像仓库、AI Agent 集成，全部塞进一个二进制，最低 4GB 内存的 VM 就能跑，五个分钟 docker compose up -d 起服务。

几个差异化设计：

官网有张「诚实对比表」：AI Agent 一栏，Kovanex 是原生（v5.0 起），GitLab 是付费附加，Gitea 和 Jenkins 是没有。集群方案用 gossip 协议，不依赖 etcd 和分布式数据库。

适用人群：合规要求代码不出内网的团队、被 5-10 个 SaaS 订阅账单逼疯的小团队、想给现有自托管研发流程加 Agent 能力的运维。国内用 GitLab CE + Jenkins 自建的老铁，这套可以当架构参考——尤其 gRPC-only 和「平台即 MCP Server」两个设计。

四、彩蛋：不用 LLM 的终端助手，和两个 GPU 地板价

同榜还有个值得玩味的信号：TERMy（github.com/gioblu），一个「完全不用 LLM」的快速终端助手，上周拿下 201 分、45 条评论，冲进 Show HN 前列。在全民 AI 的 2026 年，「反 AI」工具能拿高分，说明社区开始警惕把所有问题都交给大模型的成本与延迟——零 API 费、毫秒级响应的规则型工具正在回潮。

顺手捡到两个价格差信息（均为作者在 Show HN 页面自述，未经第三方验证）：

跑批处理、微调实验的可以拿这两家压价当谈判筹码。

信息差总结

维度 你知道的 别人已经在做的
Agent 接入 卷 MCP Server 接后端 W3C WebMCP 提案，网页用 document.modelContext 主动给 Agent 递工具，Chrome 已 Early Preview
AI 写移动端 IDE 插件补代码，手动跑模拟器 MobileCode 里 Agent 自己构建/安装/读报错/自修，模拟器内嵌会话
研发平台 GitLab+Jenkins 拼装，AI 另买 Kovanex 单二进制全包，内置 42 个 MCP 工具给 Agent 当手脚
AI Agent 长任务 靠提示词约束 Locia 模式：服务器端强制 WIP=1，每次会话重锚上下文
终端效率 什么都问 LLM TERMy 零 LLM 助手上热榜 201 分，规则型工具回潮

行动指南

  1. 今天就做（10 分钟）：npm install webmcp-react zod，给你的产品页面注册一个 search 工具，装 WebMCP Bridge 扩展后在 Claude Code 里跑通一次调用——你会立刻理解「网页即工具」的想象空间。
  2. 本周试：RN/Expo 开发者拉下 MobileCode（curl -fsSL https://raw.githubusercontent.com/hsandhu/mobilecode/main/install | bash），让 Agent 自己跑通一次「构建失败→读日志→修复→重跑」闭环。
  3. 本月评估：如果你在维护自建 GitLab，把 Kovanex 的 Locia PM 和 MCP Server 设计抄进内部方案；或者直接在内网测试环境 docker compose 起一套。
  4. 长期下注：把「Agent 可调用性」写进前端需求文档——tool 命名、描述、参数设计，会像当年的 SEO meta 标签一样成为标配岗位技能。

参考来源

  1. HN Show 榜单（本文所有工具的一手发现页）：https://news.ycombinator.com/show
  2. webmcp-react 官方仓库与 README：https://github.com/agentcathq/webmcp-react
  3. WebMCP 标准提案（W3C Web ML 社区组）：https://github.com/webmachinelearning/webmcp
  4. MobileCode 仓库：https://github.com/hsandhu/mobilecode
  5. Kovanex 官网（含对比表与 Agent 快速上手）：https://kovanex.dev

本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生（微信ID: gprshome201101）维护。 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。

[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

51学通信知识星球海报-扫码加入

📎 本分类最新文章