Working with AI in PageGrid
AI agents (GitHub Copilot, Cursor, Claude, ChatGPT, etc.) can build and modify PageGrid layouts, create custom block templates, and write site templates — all through natural language prompts.
For CLI-based projects, we highly recommend the AgentTools Module to streamline the integration. Beyond CLI support, AgentTools also provides a native AI interface directly within the ProcessWire backend editor.
Getting Started
Tell your AI agent to read the PageGrid agent guide first:
"Read
site/modules/FieldtypePageGrid/AGENTS.md"
That file gives the agent everything it needs to understand PageGrid and routes it to the right documentation for your task.
What You Can Ask the AI to Do
Build or modify a layout
Create pages with blocks, apply styles, set up responsive layouts using CSS grid columns.
Example prompts:
- "Create a landing page with a full-width hero section and a 3-column feature grid below it."
- "Add a text block and an image block side by side inside the existing group on my homepage."
- "Make the hero block have a dark background and white text, with 60px padding on desktop and 24px on mobile."
Create a custom block template
Define a new block type with custom fields and register it with a PageGrid field.
Example prompts:
- "Create a custom block called
pg_testimonialwith a quote text field and an author name field." - "Create a custom card block with a title, description, and link field, and add it to my homepage PageGrid field."
Write a site template
Render a PageGrid field inside your own PHP template file.
Example prompts:
- "Show me how to render my PageGrid field inside my
home.phptemplate using markup regions." - "Generate a site template for
pagegrid-pagethat includes the PageGrid output between the header and footer."
Always start with AGENTS.md. It tells the agent which docs to read and what helpers to use — skipping it leads to generic PHP code that won't work correctly with PageGrid.
Be specific about what page and field you're targeting. The agent needs to know which page and which PageGrid field to modify (e.g. "the content field on /home").
For layout changes, describe the visual result. The agent translates your description into CSS grid properties and block structure.
Agents can run their own code. If you use a CLI agent with the AgentTools module installed, the agent can query your site, create migrations, and run them — all without you writing a line of PHP.
