AI Penpot

Read a Penpot design's context from server-side PHP and hand it to Drupal's AI Agent tools, so the Drupal Canvas AI assistant can work from the real design — its colours, typography, structure, and text — instead of a screenshot. Paste a Penpot link and the assistant reads it.

It is the Penpot counterpart of AI Figma, and works with Drupal Core and Drupal CMS alike — config-driven and theme-agnostic.

What it provides

• the Penpot connection — a stored, read-only access token and a settings page, and
• two AI Agent tools — Penpot: List Design Pages and Penpot: Read Design Context — that list a file's pages and read one page's colours, typography and verbatim text.

Under the hood it talks to the Penpot API (penpot.example.com/api/rpc/command/…) directly from PHP — the same design data the Penpot MCP server surfaces — using a stored access token, with no interactive login. The token lives in the Key module, encrypted at rest via Easy Encryption.

Quick start

1. composer require drupal/ai_penpot and enable the module.
2. Create a Penpot access token (Your account → Access tokens). Self-hosted instances must enable the enable-access-tokens flag.
3. At Configuration → AI → AI Penpot, set your Penpot instance URL, paste the token into the Penpot Key, and click Test Penpot connection.
4. Add the two tools to your Canvas AI agent, open the Canvas editor's AI panel, and paste a Penpot link.

Documentation

https://project.pages.drupalcode.org/ai_penpot/ — Installation, Configuration, and the AI Agent tools reference.

Requirements

• Drupal ^11.2
• AI (Drupal AI) and AI Agents
• Key and Easy Encryption
• A Penpot instance (Penpot Cloud or self-hosted) and a Penpot access token

Related

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

• AI Figma — the same, for Figma designs.
• Drupal Canvas
• Display Builder AI