Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/content/skills-zh/webmcp-bridge.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
name: webmcp-bridge
title: WebMCP Bridge - AI 代理发现并执行网页工具
description: 让 AI 代理通过浏览器 evaluate 能力直接调用网页上通过 navigator.modelContext 注册的 WebMCP 工具。支持工具发现、参数校验、结果解析,兼容任何具备浏览器执行能力的 AI 代理。
source: community
author: LIU
githubUrl: https://github.com/2019-02-18/agent-skills
docsUrl: https://github.com/2019-02-18/agent-skills
category: automation
tags:
- webmcp
- mcp
- browser
- ai-agent
- web-automation
roles:
- developer
featured: false
popular: false
isOfficial: false
installCommand: |
git clone https://github.com/2019-02-18/agent-skills.git
cp -r agent-skills/webmcp-bridge ~/.cursor/skills/
date: 2026-05-06
---

## 使用场景

- AI 代理发现当前网页注册的所有 WebMCP 工具(名称、描述、参数 Schema)
- AI 代理通过函数调用直接执行网页上的 WebMCP 工具
- 处理动态工具注册/注销(页面切换时自动重新发现)
- 让 AI 代理与 WebMCP 应用深度交互:读取数据、操控 UI、触发操作

## 示例

```javascript
// 1. 发现当前页面所有 WebMCP 工具
(async () => {
const tools = await navigator.modelContextTesting.listTools()
return tools.map(t => ({ name: t.name, description: t.description }))
})()

// 2. 执行一个工具(参数必须 JSON.stringify)
(async () => {
const result = await navigator.modelContextTesting.executeTool(
'code_read',
JSON.stringify({ file: "html" })
)
return JSON.parse(result.content[0].text)
})()
```

## 注意事项

- 需要 Chrome 146+ 并启用 `chrome://flags/#enable-webmcp-testing`
- 所有代码通过浏览器 evaluate 执行,必须用 async IIFE 包裹(不支持顶层 await)
- `executeTool` 的第二个参数是 JSON **字符串**,不是对象
- 工具是页面级作用域,导航后需重新调用 `listTools()` 发现新工具
58 changes: 58 additions & 0 deletions src/content/skills/webmcp-bridge.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
name: webmcp-bridge
title: WebMCP Bridge - AI Agent Discovers and Executes Web Page Tools
description: Enable AI agents to discover and execute WebMCP tools registered on web pages via browser evaluate capability and navigator.modelContextTesting API. Supports tool discovery, parameter validation, and result parsing.
source: community
author: LIU
githubUrl: https://github.com/2019-02-18/agent-skills
docsUrl: https://github.com/2019-02-18/agent-skills
category: automation
tags:
- webmcp
- mcp
- browser
- ai-agent
- web-automation
roles:
- developer
featured: false
popular: false
isOfficial: false
installCommand: |
git clone https://github.com/2019-02-18/agent-skills.git
cp -r agent-skills/webmcp-bridge ~/.cursor/skills/
date: 2026-05-06
---

## Use Cases

- AI agent discovers all WebMCP tools registered on the current page (name, description, input schema)
- AI agent executes WebMCP tools directly through function calls
- Handle dynamic tool registration/unregistration (auto-rediscover on page navigation)
- Deep interaction between AI agents and WebMCP applications: read data, control UI, trigger actions

## Examples

```javascript
// 1. Discover all WebMCP tools on the current page
(async () => {
const tools = await navigator.modelContextTesting.listTools()
return tools.map(t => ({ name: t.name, description: t.description }))
})()

// 2. Execute a tool (arguments must be JSON.stringify'd)
(async () => {
const result = await navigator.modelContextTesting.executeTool(
'code_read',
JSON.stringify({ file: "html" })
)
return JSON.parse(result.content[0].text)
})()
```

## Notes

- Requires Chrome 146+ with `chrome://flags/#enable-webmcp-testing` enabled
- All code runs via browser evaluate, must use async IIFE wrapper (top-level await not supported)
- The second argument of `executeTool` is a JSON **string**, not an object
- Tools are page-scoped; call `listTools()` again after navigation to discover new tools