Working with AI in PageGrid

[jploch]

Working with AI in PageGrid

Inspired by projects like AgentTools, I began investigating how well an AI could handle PageGrid’s native PW structure (Pages, Templates, and Fields). The results were surprisingly good and with a few targeted optimizations, the workflow has become remarkably solid.

With the latest updates, an AI agent is reliably able to create and design PageGrid layouts, create new block templates, or perform content updates.

To teach AI how to "speak PageGrid", I created a small AGENTS.md file that acts as a central hub. I’ve then added specific "skills" in separate .md files for various tasks ensuring the AI only loads the documentation it actually needs. This approach is highly optimized to minimize token consumption, allowing even "smaller" models like GPT-4o mini or Claude Haiku to produce error-free migrations. To make this possible, I also introduced dedicated Migration Functions that allow the AI to programmatically add items or set styles.

For CLI-based projects, I 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

Install the lastest version of the FieldtypePageGrid module (try for free). 

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 first group on my homepage."
• "Make the hero block have a dark background and white text, with 60px padding on desktop and 24px on mobile."

The core advantage here is that the AI doesn't write your frontend code from scratch. The HTML and logic are already defined in your PageGrid Block Templates. The AI simply acts as an orchestrator, assembling these blocks and applying styles. This ensures the output remains clean, semantic, and easy to maintain via drag-and-drop later on.

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_testimonial with 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.php template using markup regions."
• "Generate a site template for pagegrid-page that includes the PageGrid output between the header and footer."

 

---

Docs

Documentaion

[jploch]

Some additional thoughts on using AI for PAGEGRID development:
https://page-grid.com/blog/ai-as-a-tool-not-a-replacement/