AI Playwright

Gives Drupal AI Agents eyes on a rendered page. AI Playwright opens a page of your site in a real headless browser (Playwright / Chromium) and hands the AI Agent a screenshot, the page title, the visible text, and any console errors — so the Drupal Canvas AI assistant can look at what it builds and verify or refine it, instead of building blind. It works almost as if the agent were using the Playwright MCP, but from inside Drupal as an AI Agent tool.

The idea started as a plugin inside Display Builder AI; this module lifts it out into a small, standalone tool for Drupal Canvas and Drupal Canvas AI Agents. Config-driven and framework-agnostic.

What it provides

• an AI Agent tool — Browser preview (Playwright) — that captures a page and returns a screenshot file id (pass it to describe_image to "see" it), the title, text, and console errors, and
• a settings page for the internal base URL, the Node binary, the timeout, and whether off-site URLs are allowed.

Requirements

• Drupal ^11.2
• AI (Drupal AI) and AI Agents
• Drupal core file
• On the server: Node.js 18+ and Playwright with Chromium

Security

The tool opens an authenticated browser as the acting user, so it sees the same content that user can. It is gated on the Use the AI Playwright browser tool permission, targets this site only unless an administrator enables off-site URLs, and passes every argument as an argv array — never an interpolated shell string.

Related

Works with any AI Agent on any AI Assistance page — the Drupal Canvas AI Agents and any other AI Agent.

• AI Figma — read a Figma design's context for AI Agents.
• Drupal Canvas
• Display Builder AI

Documentation

https://project.pages.drupalcode.org/ai_playwright/