WebMCP Gen

Создавайте инструменты WebMCP для конкретных веб-сайтов, написав манифест, скомпилировав его в скрипт инициализации и убедившись, что Chrome регистрирует и запускает эти инструменты.

Данный навык не вызывает вложенный агент. Вы несете ответственность за обход страницы, написание файла manifest.json и выполнение итераций на основе результатов проверки.

Проверка настроек

Из каталога навыка установите зависимости, если они ещё не установлены:

cd skills/webmcp-gen
pnpm install

Это установит закреплённый пакет Stagehand, а также набор инструментов TypeScript (tsx, typescript, @types/node), используемый для запуска сгенерированного файла stagehand-example.ts.

Рабочий процесс

1. Выберите слэг артефакта, содержащий ровно один косой черту:

/

Пример:

example.com/page-context

2. Создайте каркас артефакта:

node scripts/scaffold.mjs example.com/page-context --url https://example.com

3. Просмотр целевой страницы с помощью командной строки browse:

browse open https://example.com --local
browse snapshot
browse get title
browse get url
browse get text body
browse get html body

Если визуальное оформление не имеет значения, предпочтительно использовать команды browse snapshot, page text и проверку DOM вместо скриншотов. По завершении изучения используйте команду browse stop.

4. Отредактируйте файлы в каталоге artifacts/:, и manifest.json. Манифест является основным источником достоверной информации.

5. Скомпилируйте:

node scripts/compile.mjs artifacts/example.com/page-context

6. Сгенерируйте запускаемый пример Stagehand (stagehand-example.ts) и запустите его с помощью tsx:

node scripts/generate-stagehand-example.mjs artifacts/example.com/page-context
npx tsx artifacts/example.com/page-context/stagehand-example.ts

7. Проверка:

node scripts/validate.mjs artifacts/example.com/page-context

8. Если проверка завершилась неудачно, просмотрите файлы eval.json и eval-report.md, внесите исправления в manifest.json, а затем выполните компиляцию и проверку заново.

Контракт манифеста

{
  "domain": "example.com",
  "task": "page-context",
  "url": "https://example.com",
  "generatedAt": "2026-06-04T00:00:00.000Z",
  "tools": [
    {
      "name": "example_com_page_context",
      "description": "Возвращает контекст страницы.",
      "inputSchema": {
        "type": "object",
        "properties": {},
        "required": []
      },
      "implementation": {
        "kind": "dom",
        "source": "return { success: true, title: document.title, url: location.href };"
      },
      "fixtureInput": {}
    }
  ]
}

Правила написания кода

• implementation.source вставляется внутрь async (input) => { ... }; записывайте операторы JavaScript, а не полную оболочку функции.
• Возвращайте объект, сериализуемый в JSON.
• Код WebMCP выполняется на странице браузера. Используйте нативные API браузера: document, location, navigator и fetch с одним источником.
• Не используйте Playwright, Puppeteer, Stagehand, вспомогательные функции XPath или команды агента/браузера внутри ` implementation.source`.
• document.querySelector и querySelectorAll должны принимать только допустимые CSS-селекторы браузера.
• Чтобы найти видимый текст, используйте Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")).
• Не включайте ключи API, токены bearer, файлы cookie, секретные данные localStorage или учетные данные пользователей.
• Не используйте eval или new Function.
• Избегайте разрушительных действий, если только пользователь явно не запросил их.
• Разрабатывайте защитные механизмы: проверяйте наличие элементов и возвращайте структурированные ответы { success: false, error: "..." }.
• Сгенерированные скрипты инициализации регистрируют инструменты WebMCP только в верхнем фрейме.

Структура выходных данных

artifacts///
  manifest.json
  webmcp.init.js
  stagehand-example.ts
  eval.json
  eval-report.md

Чтобы превратить этот пример в самостоятельный проект, создайте каркас приложения Stagehand с помощью npx create-browser-app и поместите в него сгенерированный файл webmcp.init.js (загрузите его с помощью page.addInitScript({ path: "webmcp.init.js" })).