This demonstration covers two AI agents that work inside Drupal Canvas.

Page Builder Agent creates and edits Canvas pages. Component Agent can create and edit React components to be used in Canvas pages.

Building a page

Open a Canvas page and click the AI panel icon in the top left corner, next to the Drupal icon.

Type a request describing the page you want, for example:

I need to create a landing page for the Northmoor University site.

The agent reviews the components available on the site and proposes a plan before it builds anything. Read the plan and refine it in the same chat until it matches what you want. Once you approve it, the agent builds the page and you will see the components placed row by row.

Creating a component

Open the AI panel and select Component Agent from the Tools dropdown. While a tool is selected, every message you send goes to that agent.

Describe the component you need, for example:

Create a hero banner that displays an image and a heading, with a slot for call-to-action buttons.

The agent writes the component as you watch. Keep using the same chat window to refine it. Ask it to change the colours, add props, or adjust the layout, and each request builds on the component already created.