task: #3608469 Initialize the AI Playwright module scaffold.

Rajab Natshahrequested to merge
issue/ai_playwright-3608469:3608469-initialize-ai-playwright into 1.0.x

What this does

Initializes the AI Playwright module — a small, config-driven, framework-agnostic Drupal 11 module that gives Drupal AI Agents "eyes" on a rendered page. It provides an AI Agent tool (ai_playwright:browser_preview) that opens a page of the site in headless Chromium (via a bundled Node/Playwright script), captures:

  • a screenshot, saved as a real managed file
  • the page title
  • the page's visible text
  • any browser console errors

...so the Drupal Canvas AI assistant can see and verify what it builds instead of building blind. The idea was lifted out of a display_builder_ai plugin into this standalone, Canvas-oriented module.

Why

Closes #3608469. See https://www.drupal.org/project/ai_playwright/issues/3608469 for the full Problem/Motivation and Proposed resolution.

File inventory

  • ai_playwright.info.yml, .install, .permissions.yml, .routing.yml, .services.yml, .links.menu.yml — module scaffold
  • src/PlaywrightRunner.php — wraps the bundled Node/Playwright capture script
  • src/Form/SettingsForm.php — settings page (browser/target URL, SSRF-hardened)
  • src/Plugin/AiFunctionCall/BrowserPreview.php — the ai_playwright:browser_preview AI Agent tool
  • config/install/ai_playwright.settings.yml, config/schema/ai_playwright.schema.yml — config + schema
  • scripts/browser-capture.mjs (+ scripts/README.md) — the Playwright capture script
  • tests/features/*.feature, tests/step-definitions/, tests/selectors/ — webship-js (Playwright + Cucumber-js) BDD suite
  • tests/src/Unit/ResolveUrlTest.php — PHPUnit unit coverage
  • docs/*.md, mkdocs.yml — module documentation
  • .gitlab-ci.yml, .gitlab/issue_templates, .gitlab/merge_request_templates — CI + GitLab templates
  • .eslintrc.json, .eslintignore, .cspell.json, tsconfig.json, package.json, playwright.config.ts, cucumber.js — front-end tooling config
  • composer.json
  • CLAUDE.md — included dev doc (guidance for AI coding agents working in this repo)

Verification

Verified end to end on a fresh Drupal CMS ~2.0 site before opening this MR:

  • settings page loads and saves
  • SSRF validation on the configured browser/target URL
  • status report correctly detects Node.js availability
  • module permissions enforced; an anonymous request correctly gets a 403
  • a live browser capture producing a real screenshot managed file
  • the AI tool executing end to end, including its describe_image handoff
  • full webship-js suite green: 21/21 scenarios, 246/246 steps

AI-assistance disclosure

Per the Drupal policy on the use of AI:

AI-Generated: Yes (Used Claude Code to draft the initial module scaffold — settings form, AI Agent tool, Playwright capture script, config/schema, docs, and the webship-js BDD test suite). All AI-generated code has been human-reviewed and verified end to end on a live Drupal CMS site (see Verification above) before this MR was opened. Human review/merge is still pending — see Checkpoints below.

Checkpoints

  • File an issue about this project
  • Addition/Change/Update/Fix to this project
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support on feature change/addition
  • User Guide Documentation support on feature change/addition
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release
Edited by Rajab Natshah

Merge request reports