canvas_prompt_generator
Generate ready-to-use Canvas AI prompts from a plain-language page description or an uploaded screenshot, so content editors can build pages without writing prompt syntax by hand.
Canvas Prompt Generator helps content editors build pages with Drupal Canvas AI faster. Instead of hand-writing prompt syntax, an editor describes the page in plain language — or uploads a screenshot of a design — and the module returns a structured, ready-to-paste Canvas AI prompt that references real components from your theme's component library.
It is aimed at editors who are new to Canvas AI prompting and at teams who want consistent, component-accurate prompts across a site.
Features
Two input modes:
- Text mode — pick a page type (homepage, product, landing, article, and more), choose the sections to include, describe the page in plain English, and set brand colors.
- Screenshot mode — drag-and-drop a PNG, JPG, WebP, or GIF (up to 5 MB) and let Claude's vision model analyze the layout, then generate a matching prompt. Choose whether to target a full page, a single component, or a reusable pattern.
Generation:
- Reads your theme's SDC component definitions (*.component.yml) and constrains the generated prompt to real component IDs, props, and enum values.
- Returns structured output with per-section component breakdowns.
- One-click copy to clipboard.
- Cost transparency: shows input/output token counts and the estimated API cost per generation.
- Selectable Claude model (Haiku 4.5, Sonnet 4.6, or Opus 4.8) to trade off speed, cost, and capability.
Post-Installation
1. Enable the module: drush en canvas_prompt_generator
2. Add your Anthropic API key. The recommended (most secure) way is the ANTHROPIC_API_KEY environment variable, which the module reads first. Alternatively, set it in the admin UI.
3. Configure the model and max output tokens at: /admin/config/canvas-prompt-generator/settings
4. Grant the "generate canvas prompts" permission to the roles that should use the tool, at /admin/people/permissions
5. Open the generator at: /admin/canvas-prompt-generator
Additional Requirements
- Drupal 11 (core_version_requirement ^11).
- PHP 8.1+.
- An Anthropic API key (https://console.anthropic.com) and outbound network access to api.anthropic.com.
- A theme that ships Single-Directory Components (*.component.yml). The generator reads these to ground its output in your real component library; without them it will still run but cannot reference site-specific components.
Recommended modules/libraries
Designed to be used alongside Drupal Canvas (Experience Builder) — the generated prompts are intended to be pasted into Canvas AI.
Similar projects
This module does not build pages itself; it generates the prompt text you feed to Canvas AI. If you know of modules that auto-generate Canvas/layout structures directly, the key difference is that this tool focuses on producing editor-friendly, component-accurate prompt text from natural language or screenshots.
Supporting this Module
Maintained by shuchimishra. Issues and patches welcome via the issue queue.
Community Documentation
See the README and INSTALL files in the module for setup, configuration, and usage examples.