Insightful stories that revolve around technology, culture, and design

Drupal Canvas is changing how websites are built inside Drupal by bringing design, content, and intelligence into one space. It introduces a visual editor that works in real time, supports React-based components, and understands what you want to build through conversational input.

Instead of writing code or manually assembling layouts, you can describe what you need. Ask for a “homepage with a hero section, a product grid, and a contact form,” and Canvas knows how to put those pieces together. It can also create components, suggest titles, and generate metadata, all within the same interface.

Behind this simplicity is a system of AI agents that collaborate to interpret prompts, choose the right components, and build structured pages. This article explores how these agents work, how they communicate with Drupal, and what makes Canvas a more fluid and efficient way to design and manage content.

Understanding AI agents

Before diving into Canvas AI specifically, we need to understand what AI agents are. Let's first understand the basic problem the AI agents are trying to solve. Imagine you ask a basic LLM, "Add a chocolate ice cream recipe to my site."

The LLM will happily give you a perfectly good recipe. But it's just plain text. You still have to manually copy that text, log into Drupal, create a new 'Recipe' content type (if it even exists), paste the title, paste the ingredients, and so on. It's a hassle.

So, we get smarter. We tell the LLM, "Give me the recipe in a structured JSON format."

This is better! Now we have clean, structured data. But it still requires a developer to write code that can parse this JSON and create a node in Drupal.

An AI agent is essentially an LLM that's been given instructions and tools, allowing it to autonomously decide how to act to complete a task. The keyword here is autonomously. You tell it what you want, and it figures out which tools to use and in what order. Here's what makes agents special:

•    They have a system prompt that guides their behaviour.
•    They have access to specific tools they can use.
•    They operate in a loop, meaning they can use tools multiple times.
•    They keep going until the task is actually completed.

‍

A 'tool' is essentially a backend plugin that the AI can call. So when the user says, "Add the recipe," the AI Agent understands the intent. It doesn't just return text. It thinks, 'Aha, the user wants to create a recipe. I have a tool for that called add_recipe.' It then calls that tool with the right arguments (the title and instructions). The Drupal backend executes the tool, a new recipe node is created, and the AI can then report back, "Done! I've added the recipe to your site."

In Drupal, AI agents can be created from the UI itself using the ‘AI agents’ module. Refer to my previous blog to understand more about AI agents. AI features in Canvas are built using AI agents.

Installation and setup

AI features are integrated into their own module, canvas_ai, which comes as a sub-module of Canvas. To set it up:

• Download and install the Drupal Canvas module
• Install Canvas AI module
• Additionally, set up an AI provider that supports tool calling. The complete list of Providers can be found here.

Once done, click on the AI panel icon to launch the chatbot.

AI agents in Canvas AI

Canvas AI isn't just one large agent doing everything. It's actually an orchestrator pattern with multiple specialised agents, each handling the specific tasks you're asking for. These sub-agents are:

• Component Generation Agent
• Title Generation Agent
• Metadata Generation Agent
• Page Builder Agent
• Template Generation Agent

Each of these agents has its own set of tools that let it do its job. Let's look at what each one does.

Drupal Canvas component Agent

One of the standout features in Drupal Canvas is the ability to create React components directly from the UI. It's an awesome feature that lets even people with no prior Drupal knowledge create components in Drupal Canvas. This agent lets you create code components directly using natural language. You just describe what you want in plain English, like "create a testimonial card with an image, name, title, and quote," and the agent figures out the rest. It is also possible to generate a component by uploading an image.

The main tools used by the component agent are

Create new component: To create code components
  - Arguments: Component name, JS code, CSS code, Props data
‍
Edit JavaScript on components: To edit a code component
   - Arguments: Component name, JS, Props data
‍
Get JS Component: Get the code of a component
   - Arguments: Component name

‍

The following is a sample of how the agent uses the Create new component tool when asked to create a CTA component.

Watch this video to see a demo of the code component agent

Drupal Canvas title generation Agent & Drupal Canvas metadata generation Agent

These agents specialise in adding SEO-focused titles and metadata (descriptions) to the page based on the added content. Both agents work only with the canvas_page entity type, a content entity shipped with Drupal Canvas and tailored specifically for it. The following is an overview of the tools used by these agents:
‍

‍

Here is a demo of title and metadata generation in action.

Drupal Canvas page builder Agent

This is where it gets really powerful for content editors. The Page Builder Agent is for creating individual sections of a page. Instead of dragging and dropping components, you can just tell the AI what you want. You can give specific prompts like 'Add a hero banner followed by three paragraph components for a blog about climate change,' which the agent will pick up and add to the page, or generic prompts like 'Create a today's specials section for a bakery website.'

It has been observed that with certain models, the Orchestrator Agent might fail to delegate page-building tasks to the Page Builder Agent. Therefore, it's better to prepend all page-building-related prompts with the text, 'Using page builder tool.' For example: 'Using the page builder tool, create a today's specials section for a bakery website.'

Once components are added to the page, you can click on a component and ask the agent to add new components above, below, or into the slots of the selected component. The Page Builder Agent will understand the selected component and add new components relative to it.

For example, assuming you have two-column and heading components and the two-column layout has been added to the page, you can click on it and ask the agent to do the following tasks:

1. Using the page builder tool, add a heading with the text 'Hello world' above and below this component. (The agent understands that 'this' refers to the clicked component).
2. Using the page builder tool, add a heading with the text 'Hello world' to each slot of this component.

The Page Builder has a more sophisticated set of tools because it needs to understand the existing page state before adding anything. The main tools used are:

• get_current_layout: This tool returns the current structure of the page, including what components are placed where, so it knows what's already on the page.
• get_component_context: The agent uses this tool to retrieve information about all the components available in your site, including SDCs, Code components, and Blocks. The agent uses this to decide which components best fit what you're asking for.
• get_page_data: Used to get the current title and metadata of the page. If the title and metadata are empty when the Page Builder Agent is invoked, it will add an appropriate title and metadata.
• canvas_metadata_generation_agent and canvas_title_generation_agent: If the Page Builder notices your page doesn't have a title or metadata, it can invoke these agents to add them while building the section.
• set_component_structure: This is the tool that actually does the work. After the agent has figured out what components to use and how to arrange them, this tool places them on the page in the right positions with the correct configuration.

This is how the agent passes the component structure to the set_component_structure tool.

The operations array consists of individual operations. Each operation corresponds to a component assembly at a specific area of the page. The first operation should be read as: 'Place the heading component above the component with UUID 7238-xxxx-xxxx in the content region.' The agent uses the 'inside' placement, as seen in the third operation, to add components to an empty region or empty slot.

Watch this video to see the page builder in action

Drupal Canvas template builder Agent

At the time of writing this blog, the Template Builder Agent is not yet merged into the main module. If you want to try it out, you can pull the merge request from this issue. If the Page Builder is about sections, the Template Builder is about entire pages. This agent creates complete page layouts from top to bottom. By default, it generates the main content area, that is, everything between your header and footer. But if you explicitly ask for it, the agent can also create headers and a footer.

The Template Builder uses all the tools used by the Page Builder except set_component_structure, such as get_current_layout, get_component_context, get_page_data, canvas_metadata_generation_agent, and canvas_title_generation_agent. Additionally, it uses the set_template_data tool to generate the template structure and add it to the page. 

This is how the agent generates the template structure and passes it to the set_template_data tool.

Each top-level key corresponds to a region in your theme. By default, Drupal Canvas only supports the 'content' region, which is where all the page content will be placed. This region is specific to each page you create in Canvas. Components added to the content region of a page won't appear when you create or edit another page.

It is also possible to enable other regions in your theme in Drupal Canvas. This can be done from your theme's settings page (e.g., for Olivero: /admin/appearance/settings/olivero).

Select the 'Use Drupal Canvas for page templates in this theme.' option and choose the regions you want to enable.

Beware that these additional regions are 'global regions.' Any components added to these regions will be visible across all pages. The template builder can add components to global regions as well. For example, when you ask the agent to generate a template for a library website with a proper header and footer, it checks the available regions to see if there are dedicated header and footer regions, and if present, it will add the components for building the header to the header region and the footer to the footer region. If dedicated regions are not present, it will add all components to the content region.

A dedicated configuration form is available in Configuration -> AI -> Canvas AI Theme Region Settings to give proper instructions to the agent on how to use each of the regions. This is particularly useful when you have regions like 'Footer top' and 'Footer bottom' instead of a single footer region. In that case, you can use this form to inform the agent about what to add in each of these regions. For example, you can add a description like 'Add Site name, logo, and menu links (Using button components) to this region' for the 'Footer top' region and 'Add social media links and copywriting text in this region' for the 'Footer bottom' region. These kinds of descriptions are critical for the agent to generate a reliable template.

How Does the AI Know What Components to Use?

Both the page builder and template builder rely on components present on your site for generating output. Here's something really important to understand: These agents can't actually see your components. They don't know what a component looks like visually. They only understand components through their metadata: props, slots, and descriptions. This means you need to provide good descriptions for your components. There's a configuration form at Configuration -> AI -> Canvas AI Component Description Settings where you can add metadata for Blocks, SDCs, and JavaScript components.

You should include things like:

• How to use the component (Standalone or within the slot of another component)
• When to use it
• What components work well in its slots (can it contain buttons, cards, images?)
• What the props do (How the component behaves for different prop combinations?)

This metadata becomes the context the agent uses to make decisions. If your hero component description says "use this for the top section of a page to grab attention," the agent knows to use it when you ask for a hero section. If the hero component contains a title and image prop, those are self-sufficient, and you don't need to give any extra description for those props. But if there is a design or variation prop that completely changes the design of the component, you should give content around when to use each of those values. For example: Variation one renders an image and title side-by-side, so keep the title character length to 60 characters max. Variation 2 renders the image below the title, so give it a big title. Variation 3 changes the title colour to white, so use it only when the hero banner is placed in a container component with a theme prop value set to 'dark,' etc. If you don't provide these descriptions, the agent might not use the component properly.

The downside? More components mean longer context, which means more tokens are being used, and the costs are higher. It can also reduce output quality if the context gets too large and the agent gets confused by too many options. So make sure the metadata you are adding is optimal.

If no metadata is given from this form, the agent will use the default descriptions available from the component.yml files of SDCs. For JavaScript components and blocks, the agent would just see the name of the component, its props, and its slots. The purpose of the component description configuration form is to give an easy-to-use UI for site builders to override the component descriptions. The form can also be used to control what components can be passed as context to the agent (Should it use only SDCs, SDCs and blocks, or SDCs, Blocks, and code components?). For example, disabling Blocks from here would be a better idea if you don't want the agent to use blocks in generating templates or building page sections. This would help to reduce the context as well.

Watch this video to see template generation in action with the Starshot demo design system theme.

Wrapping up

What makes Canvas AI interesting is how it’s been woven into Drupal’s existing logic. Each agent plays a clear role, translating prompts into structured actions instead of loose suggestions. Together, they show how a content management system can evolve without changing what makes it reliable.

The design of Canvas AI feels deliberate. The separation between agents, the orchestration layer, and the reliance on component metadata all point toward a system that values control and transparency as much as convenience. It’s a reminder that progress in CMS design doesn’t always come from adding new interfaces but from finding better ways for tools to work together.
‍

In Drupal, building and managing pages has often meant working hand in hand with developers. Content teams could swap out text or images, but creating new layouts or landing pages usually sat in a queue. Campaigns slowed down, costs crept up, and organisations struggled to move at the pace they needed.

Drupal Experience Builder changes that rhythm. With a visual, low-code interface, editors and marketers can design, structure, and publish pages themselves. Developers still play a role in extending the system with custom components, but everyday page building no longer depends on them. The payoff is faster launches, consistent design, and fewer bottlenecks.

The first stable release will be announced at DrupalCon Vienna in October 2025, though teams can already begin exploring what Experience Builder makes possible today.

Currently, the Experience Builder module primarily supports the Article content type out of the box. To use Experience Builder with Articles, you first need to enable its sub-module, Develop XB on top of the Standard install profile(xb_dev_standard).

However, this sub-module is located under the ‘tests’ directory, so it won't be visible on the Extend page by default. 

To make it discoverable, you must first allow Drupal to find test modules. For that, add the following line to your settings.php file, 

web/sites/default/settings.php:
‍

$settings['extension_discovery_scan_tests'] = TRUE;‍

‍

Note: Experience Builder setup currently uses developer/test modules such as xb_dev_standard. These modules may change after launch.

Now, to enable the module

•    Navigate to the Extend page in your Drupal admin UI (/admin/modules).
•    In the filter box, search for ‘XB’.
•    Check the box for Develop XB on top of the Standard install profile (xb_dev_standard) and click Install.

‍

After the module is installed, create a new Article or navigate to an existing one. You will now see a new link in the admin toolbar: Experience Builder: [Article Title]. 

‍

Clicking this link will launch the Experience Builder interface for that piece of content.

‍

When the xb_dev_standard module is enabled, it automatically adds a new field named XB demo to the Article content type. This field is responsible for storing the data and structure of the components you add. It uses a dedicated Field Formatter, Render SDC tree, to ensure the components are rendered correctly on the page.

Getting to know the Experience Builder UI

The UI is mainly divided into 4; Top bar, Left and Right sidebars, and the canvas where the live preview of the page is rendered.

Top bar

The top bar consists of the following elements.

‍

‍

1. Close Experience builder UI
2. Undo/Redo changes
3. View the page in different viewports
4. Create/Edit pages: Note: When you use the Create New option in Experience Builder, it creates an ‘XB Page’ entity, not an Article node — even if Experience Builder is enabled for the Article content type.If you want to use Experience Builder with another Article page, you must manually create a new one by going to Content → Add content → Article. Then, open that article and click the Experience Builder – {article name} link in the toolbar to access it in Experience Builder.
5. Scale to fit
6. Change zoom level
7. Preview the page
8. Review and publish changes

Right side bar

This is where the forms to update the page or component fields appear.

Left side bar

This is a region that lists mainly two things

• The component library, which can be opened by clicking the + button
• Layers: Which shows an overview of components placed on the page

The component library

Note: The demo Single Directory Components (SDCs) are provided through a test module (xb_test_sdc) and are intended for exploration only. Availability may differ after launch.

To begin adding content, click the + icon in the left sidebar. This opens the component library, which displays all the elements you can place on your page.

‍

The component library contains the following sections
‍

• Add new: Allows you to create your own custom React components directly from the browser.
• Patterns: Reusable layouts that can be created by combining one or more components into a single, cohesive unit.
• Components: Contains all the available Single Directory Components (SDCs) defined in your themes and modules, as well as custom code components.
• Code: Lists the React components you have created directly within the UI.
• Dynamic components: Includes Blocks. Yes, Experience Builder supports native Drupal Blocks!

On a fresh Drupal installation, your component library might be showing only a single Teaser component provided by the default Olivero theme.

To see a richer set of examples, you can enable the Experience Builder Test SDC (xb_test_sdc) module that ships with Experience Builder. This is another test module that contains several demo SDCs. Enable it from the Extend page, then return to the Experience Builder UI. You will now see a variety of demo components available to use. A live preview of each component can be seen hovering over its name.

Understanding components

In Experience Builder, a "component" can be a Single Directory Component (SDC) defined in your theme or module, a standard Drupal Block, or a custom React component. When Experience Builder detects any of these items, it creates a corresponding Component configuration entity in the Drupal backend.

You can manage these component entities by navigating to Appearance > Components in the admin menu.

Here, components are organised into two sections:

• Enabled Components: These are the components that are compatible with Experience Builder and will appear in the component library.
• Disabled Components: This section lists all components that Experience Builder has detected but determined to be incompatible. Crucially, the system logs the exact reason for the incompatibility next to each entry. If an SDC from your theme is not appearing in the UI, this is the first place you would have to check.

This interface also allows you to manually disable any component, giving you full control over which items are available in the UI. Similarly, the Audit option provides a detailed overview of each component's usage across your site, helping you track where and how every component is used.

Adding components to the page

Components can be added to the canvas either by clicking their name in the library or by dragging and dropping them into a highlighted content region. Go ahead and click the Heading component to add it to the page.

As soon as the component is added, its configuration form will appear in the right sidebar. This form displays the component's editable fields, known as props, which are defined in its corresponding YAML file.

experience_builder/tests/modules/xb_test_sdc/components/simple/heading/heading.component.yml

Try it out: change the heading text to "Experience Builder is AWESOME!" As you type, you will see the preview on the canvas update in real-time.

Next, let's work with a component that uses slots. From the component library, add the Two Column component to the canvas, placing it either above or below your existing Heading.

You'll notice that the Two Column component doesn't render any visible content by default. Instead, it provides two empty placeholders: Column One and Column Two. These are slots. Slots are designated areas within a parent component where other components can be nested.

To place a component into a slot, simply drag it from the library (or from elsewhere on the canvas) and drop it into the target slot. Let's try it:

1. Drag the Heading component you already created and drop it into the Column Two slot.
2. Now, add a Drupalicon component from the library and place it inside the Column One slot.

You can see the hierarchical "tree" view of all your components in the Layers panel.

This panel not only displays the nested structure of your page but also allows you to reorder elements with a simple drag-and-drop action. By default, all components are placed within the main Content region.

Editing placed components

Right-clicking on a component, either directly on the canvas or within the Layers panel, opens a context menu with several useful options.

This menu supports common operations like Duplicate, Copy, and Paste, complete with standard keyboard shortcuts. You will also find a Move option, which allows you to precisely reposition a component above, below, or nested inside any other component on the page.

Creating patterns

Our two-column layout containing a Drupalicon and a heading is a useful combination. If you want to reuse this structure in other places, you can save it as a pattern.

To do this, select the parent component (in this case, the Two Column layout) and right-click it to open the context menu. Select Create Pattern. When prompted, give your pattern a descriptive name and click Add to library.

Your new pattern will now be available under the Patterns tab in the component library. You can add it to any page just like a regular component. Each time you use the pattern, you create a new, independent instance, allowing you to change its content without affecting the original saved pattern.

Preview and publish

When you are ready, click the Preview button in the top toolbar to see how your content will look on the live site. This feature includes options to simulate how the page will render on different devices, such as tablets and mobile phones.

To publish, click the Review Changes button. This opens a screen that lists all pending updates across every page updated. The required changes can be selectively published.

When you update a page using Experience builder, the component data is not immediately saved to the node's  XB Demo field.  Instead, the entire page layout is converted into a JSON format and stored in Drupal’s private TempStore. To understand this structure in detail, you can review the official data model documentation. Only when the node is published is this data retrieved from the tempstore and permanently saved to the field.

Setting the page as the homepage

Now that your page is published, you can designate it as your site's homepage directly from the Experience Builder interface.

1. From the top bar, click the dropdown menu that contains the page name, and then click the ellipsis (...) icon next to the page title.
2. A new menu will appear, providing several page-level options:
   
   • Duplicate the page along with its components
   • Set the page as the homepage
   • Delete the page

3. Click on ‘Set as homepage’.
4. This action does not update the site's configuration immediately. Instead, the change is staged. This is a safety feature to prevent accidental modifications to your live site.
5. To complete the process, you must navigate to the ‘Review’ section and explicitly publish this staged change. Once published, your page will officially become the new homepage.

Enabling global regions

By default, Experience Builder can only access the ‘content’ region, which constructs the main body of a page. However, it is also possible to enable other global theme regions, such as Header, Footer, etc.

To enable global regions, follow these steps:

1. Navigate to your theme's administration page at Appearance > [Your Theme Name] > Settings.
2. Locate and check the option: ‘Use Experience Builder for page templates in this theme.’
3. Once checked, a list of your theme's available regions will appear. Select all the regions you wish to manage.
4. Click Save configuration.

Once enabled, you'll see these global regions available within the Experience Builder UI. To edit one, simply double-click the region or click the three-dot menu (...) next to its name and select ‘Edit Global Region’. This focuses the editor on that specific area, allowing you to add new components just as you would in the main content region.

‍

To return to editing your page's main content, just click the region name in the top bar or the left-hand sidebar. Similarly, you can move an existing component from the main content area directly into a global region by using the component's ‘Move to global region’ option.
‍
This flexibility pairs well with Decoupled Drupal, especially where design and delivery teams need faster control of page elements.

Experience Builder permissions

Currently, Experience Builder supports the following permissions:

• Publish Experience Builder content: Allows users to publish changes made using Experience Builder.
• Administer patterns: Grants permission to create and edit patterns.
• Administer page templates: Grants permission to update global regions when enabled.
• Administer content templates: Grants permission to create and update content templates, which allow Site Builders to define pre-structured layouts for specific types of content. This feature is still in development.
• Administer components: Grants permission to manage all component entities.
• Administer code components: Grants permission to create and edit code components.‍
• Create/Edit/Delete permission for XB page entities.

Code components

Experience Builder lets you create components for your page directly from the UI. These are known as code components. Code components are created using React and should use Tailwind CSS for styling. They make Experience Builder usable for people who have no prior experience with Drupal or Single Directory Components. 

Creating a code component

Let's create a small Button component to see how it works. To do this, click ‘Add new’ from the Component Library.

Enter the name ‘Button’ and click Add. This will open the code editor, which consists of four main sections:

The code editor consists of 4 main sections

1. A CodeMirror editor for writing the code.
2. Options for importing and using other created code components.
3. A preview section that renders a live preview of the component.
4. A section to add props and slots for the component.

Update the boilerplate code with this
‍

const Button = ({
  text = "Button",
  url = "#",
}) => {
  return (
    <a
      href={url}
      className="inline-block px-4 py-2 bg-gray-800 text-white text-base rounded hover:bg-gray-700"
    >
      {text}
    </a>
  );
};

export default Button;

‍

Adding props to code components

Our button component uses two props, text and url. We need to be able to change these whenever the component is placed on a page. To do this, the props must be defined in the UI.

1. Click ‘Add’ in the Component Data section.
2. Use the same prop names as defined in the component code: text and url.
3. For the text prop, select ‘Text’ as the type and add a default value.
4. For the URL prop, select ‘Link’ as the type.

‍

Promoting our component to the component library

The code component won't get added to the component library by default. To make the component available in the library, click ‘Add to component’. The Button component will now be listed in the Component Library.

Click or drag the component to place it on the canvas. The component's props form will appear in the sidebar, where you can change the text and URL.

Publishing the assets

If you publish the page where the button component was placed and view it as an anonymous user, you will notice that the styles are not rendered. To render the styles, the assets must be explicitly published. To do this, go to the "Review Changes" section, select the asset, and click "Publish."

‍

Read the official documentation to understand more advanced features of code components, such as data fetching

Experience Builder creates config entities for managing Page regions, Patterns, Assets, Code components, etc., just like Components.

AI features in Experience Builder

We are now in the era of AI, and Experience Builder also comes with many AI features. These are still in active development, but you could still try some of them. To try out the AI features, enable the xb_ai submodule. Remember, you have to set up an AI provider and install the AI Agents module (version 1.1) to try out these features.

Once the module is enabled, click the AI panel icon to open the chat widget.

Creating code components using AI

Code components can be created using a prompt or by uploading an image. Try the following prompt:

“Create a banner component with a black background, white text, and green rounded borders. Add a prop for the banner text.”

‍

The component will be created, and the prop for the banner text will also be added. The same chat interface can be used to modify the created component as well, like changing colours, adding extra props, etc..

Page building with Experience Builder using AI

Experience Builder also supports AI-assisted page building using available components. For this to work properly, we first have to provide proper information about all the available components so the AI agent can understand how to use them. To do that:

1. Go to Configuration >> AI >> Xb AI Component Description Settings.
2. By default, the AI agent will use all the available components (Blocks, SDCs, Code components). You can restrict this by enabling components from a specific source.
3. Expand each component and provide proper descriptions for the component, its props, and its slots (e.g., when to use it, whether it's a standalone component or must be used in the slot of another component, best prop combinations, ideal components to place in slots, etc.).

‍

Now, open a page and try the following prompt:

Add four button components to the page with the names of four programming languages and URLs pointing to their official documentation

The AI agent should add four button components (the code component we created earlier). It should also add the sparkle emoji ✨ after the button text, as we instructed in the component description form.

Depending on the available components, you could also try prompts such as:

“Create an ‘Our Specialities’ section for a restaurant page” or “Add a hero banner suitable for the homepage of a pizza shop.”

Note: AI-assisted page building is only supported in ‘XB page’ entities. It will not work with articles.

Adding page title and description using AI

AI can also be used to generate titles and descriptions for pages. Try the following prompt:

“Add a suitable title and description for a blog page about the role of AI in programming.”

Note: This is also only supported in ‘XB page’ entities and will not work with articles.
‍
These tools sit alongside other projects like Exploring Drupal’s AI Agents and AI-powered semantic search in Drupal.

Conclusion

Drupal Experience Builder gives teams a practical way to cut the delay between ideas and execution. Page updates that once required a developer can now be handled directly by content teams, keeping work moving without extra steps.

Its real impact will be seen in how organisations manage growth. As sites expand, the ability to reuse patterns, align layouts across regions, and publish quickly can reduce overhead and keep performance consistent.

The future is not about replacing developers but letting them focus on higher-value work while editors and marketers handle day-to-day changes. For organisations, that means faster delivery, fewer bottlenecks, and sites that stay aligned with business goals.

FAQs

Can I use Drupal Experience Builder today?
Yes. It can already be enabled for Articles, with a stable release expected after DrupalCon Vienna in October 2025.

Does it work with global regions like headers and footers?
Yes. Global regions can be enabled in your theme settings and edited in the Experience Builder UI.

Do non-technical users need developer support to use it?
No. Editors and marketers can create and publish pages directly without waiting for developers.

How is it different from Layout Builder?
Layout Builder is developer-oriented. Experience Builder provides a cleaner interface with reusable patterns, designed for editors and marketers.

Is it suitable for nonprofits or smaller teams?
Yes. Nonprofits and smaller organisations benefit by reducing IT effort and publishing faster. They can also combine it with Drupal AI translation modules to reach multilingual audiences.

‍

‍

‍
‍

‍

In a multilingual digital world, keeping your website content translated, consistent, and fresh can be a challenge. 

That’s where Drupal’s AI-powered translation modules come in. 

With the rise of Large Language Models (LLMs), Drupal developers now have access to powerful tools that make content translation faster and easier.

Two key modules that streamline AI-based translation in Drupal are:

• AI Translate – Ideal for quick, inline, single-node translations using AI.
• AI TMGMT – Suited for bulk, workflow-based translation jobs with AI integration.

Let’s explore both:

AI translate module

The AI Translate module is part of the AI module suite and integrates directly with Drupal’s content translation system, which allows content editors to generate translations for nodes using AI providers (like OpenAI or others) with a single click.

Key features:

• One-click AI translation from the node “Translate” tab.
• Language-specific prompt configuration for better quality output.
• Automatically generates and saves translated content.
• Requires AI Core + AI provider (e.g., OpenAI).
• Uses Drupal’s core Content Translation module.

Configuration

Prerequisites:

• Configure Drupal content translation modules.
• Enable and set up api key for any AI provider

Enable modules: 

• AI Core
• AI Translate
• Any AI providers(eg., OpenAI)

Steps:

• Navigate to admin/config/ai/settings
• Under Translate Text, choose the Default Provider and Default Model

• Navigate to admin/config/ai/ai-translate
• Enable Use AI Translate as the default to translate content
• In Translate to {{language}} choose a provider model(provider_model) for AI model used for translating to {{language}} 
• Edit the Translation prompt for translating to {{language}} if required, or use the default prompt. You can refer to the Prompt suggested by the module maintainers for customising the prompts.
• Do the same for all the languages that require AI translation.
• Under Entity reference translation, choose the entity for translation(eg., Taxonomy term, Paragraph)
• Save configurations.

‍

• Edit any of your content and go to the Translate tab to find a new column, AI Translations. Here you can find Translate using {{provider_model}} against each language that does not have a translation for that content.
• Click on Translate using {{provider_model}} and a batch process will run to translate the content. 

• Once done, you will get the translated content.

AI TMGMT Module

The AI TMGMT (Translation Management) module serves as an AI-based translator plugin for the Translation Management Tool (TMGMT) project. It leverages the AI module to support a wide range of providers, including OpenAI, Ollama, and other paid or free/local options. This ensures you can always access the latest, most cost-effective models for accurate and automated content translation.

Key Features:

• Quickly translate content using AI, with the flexibility to customize translation style.
• Seamlessly integrates with the AI Translate sub-module, enabling language-specific model selection and prompt customisation.
• Translate one or multiple content items effortlessly with just a few clicks.
• Leverage a powerful translation job management interface to submit, track, and review AI-generated translations.
• Fully supports all the robust features offered by the TMGMT module,such as a detailed review workflow, support for various content sources, and more.

Configuration‍

Enable Modules: 

• Translation Management Core
• AI Translator
• Content Entity Source

Steps: 

Once enabled, the module provides the Translation menu item in the navigation.

• Navigate to admin/tmgmt/translators - Providers
• Here you can see the Drupal AI provider. Click on Edit to connect the AI provider.
• Give a proper label and description for the provider. (available by default)
• Enable Auto accept finished translations if you want to skip the reviewing process and automatically accept all translations as soon as they are returned by the translation provider.
• Choose the Provider plugin as AI
• In AI plugin settings under Translation configuration, choose Use the configuration from the "AI Translate" module to use the configuration from the AI Translate module. 
• Choose Use the configuration from this module in case you want to use the configuration from the module.
• Select the Tokeniser counting model and Chat translator model
• Click on Connect.
• If you get successfully connected! message: The AI provider is connected properly. Otherwise, check if your AI API key is valid and try again.
• Check if the Remote language mappings are proper and save the form.
• Once this is done, you can use the tmgmt module as it is, and the translation will work using the AI provider.

• Now navigate to the admin/tmgmt/sources to view the content overview 
• Here you can choose the content source as content to view all the content available in the website. Same in case of other content entities.

Now you are allowed to select multiple items from the list to translate together. You can see the title, columns for each language. Against each content, there are symbols under each language. The home symbol indicates original translation, the cross symbol represents no translation available for that language, and the green check implies there is translation available for that particular language. 

• So now you can select multiple contents to be translated
• Choose the source language and Target language to translate
• Click on Request translation

• Once done, you land on the source page with yellow triangle icons against content you tried to translate. This indicates you need to review the translations and save them.

• Click on the yellow triangle to navigate to the review page.
• Review each translated field content and approve it by clicking the check buttons.

• Once done, click on Save as completed.
• Once saved, you land again on the source page and find that the yellow triangle against the content has changed to a green tick, indicating the translation is saved and available. 
• Do the same for other content as well. 

You can view the translation status of each content in the job items page and the status of each group of translation in the jobs page.

From here, you can manage or review the translations and complete them as appropriate.

If you want to avoid the process of review of translations, you can enable the Auto accept finished translations field in admin/tmgmt/translators/manage/ai?destination=/admin/tmgmt/translators

Conclusion

Drupal’s AI-powered translation modules, AI Translate and AI TMGMT, bring speed, flexibility, and scalability to multilingual content workflows. Whether you’re translating a single node on the fly or managing complex, large-scale translation jobs, these tools empower site editors and administrators to harness the capabilities of modern AI models like OpenAI, Ollama, and more.

• Use AI Translate when you need quick, inline translations directly from the content interface.
• Use AI TMGMT when your workflow requires batch translation, review processes, and detailed management of translation jobs.

By integrating AI seamlessly into Drupal’s translation ecosystem, these modules help reduce manual effort, improve consistency, and deliver translated content faster without sacrificing editorial control. 

As LLMs evolve, these tools will continue to grow, offering even more efficient and intelligent ways to manage multilingual experiences in Drupal.

Reference‍

https://www.drupal.org/project/ai_tmgmt

https://www.drupal.org/project/ai 

https://project.pages.drupalcode.org/ai/1.1.x/modules/ai_translate/ 

‍

‍

Automation is at the heart of modern web development, allowing websites to streamline operations, enhance user experience, and reduce manual intervention. 

Drupal, being a powerful CMS, has long supported automation through modules like Rules in Drupal 7. 

However, with Drupal 8+ transitioning to Symfony and modern object-oriented programming, the Rules module struggled to keep up. To fill this gap, the ECA (Event-Condition-Action) module was introduced as a no-code automation framework that offers a flexible, graphical, and user-friendly way to define workflows.

What is ECA?

ECA stands for Events - Conditions - Actions, and it follows a simple paradigm:

• Event → A trigger, such as a user logging in, submitting a form, or creating new content.
• Condition → A check that determines whether an action should be executed (e.g., verifying user roles or content types).
• Action → The task to be performed, such as sending an email, redirecting a user, or modifying content.

ECA allows site builders to configure complex workflows without writing a single line of code, making it a game-changer for automation in Drupal.

History of ECA

Before ECA, the Rules module was widely used in Drupal 7 to set up automated workflows. However, with the architectural changes in Drupal 8 and beyond, Rules struggled with compatibility and performance. 

As a result, ECA was introduced as a modern, flexible alternative that integrates seamlessly with Drupal’s API and object-oriented architecture.

ECA modellers

ECA provides multiple workflow modellers, allowing users to design automation visually. The available modellers include:

1. BPMN.iO (recommended modeller)

A JavaScript-based BPMN (Business Process Model and Notation) modeller integrated directly into the Drupal admin UI. It offers an intuitive drag-and-drop interface for defining workflows.

2. Camunda modeller

A desktop-based modeller that allows users to create BPMN workflows externally and import them into Drupal. Useful for complex workflows requiring offline editing.

3. ECA classic modeller

A form-based workflow modeller that uses Drupal Core’s Form API. Best suited for developers who prefer configuration-driven workflow automation.

Simple ECA model in Drupal

The Event-Condition-Action (ECA) module in Drupal allows you to create automated workflows based on user actions. In this guide, we will walk through setting up a simple ECA model using the BPMN.iO modeller. This model will display a thank-you message whenever a new article is created.

Step 1: Access the ECA module

1. Navigate to Configuration > Workflows > ECA in your Drupal admin dashboard.
2. You will see an overview of all existing ECA models.
3. Click the "Add new model" button to create a new model.

Step 2: Understanding the ECA interface

The main ECA interface consists of:

• A graphical modeller powered by BPMN.iO.
• Events, conditions, and actions represented by different shapes:
  
  • Event (StartEvent) – Circle
  • Condition (Gateway) – Diamond
  • Action (Task) – Rounded rectangle
  • Sequence Flow – Arrows connecting events to actions
• Note: Sequence flows can be used with conditions or without conditions
• A property panel on the right-hand side to configure settings

Step 3: Naming your model

1. In the property panel, enter a name for the model, such as "Display a message to user editors when a new article is created.".

Step 4: Creating an event

1. Drag a circle (StartEvent) onto the canvas.

2. Name the event "Article has been created" in the property panel.
3. Click "+Select" next to "Template."

4. Choose "Insert content entity (After a new entity has been saved)" from the dropdown.

5. In the property panel, limit the content entity type to "Article".

Step 5: Creating an action

1. Click the small rectangle connected to the event.

2. Name the action "Display a message" in the property panel.
3. Click "+Select" next to "Template" and choose "Display a message to the user".

4. In the Custom properties section, enter the message text: "Thank you for  [node: title]".
5. Since [node: title] is a token, select "Yes" for Replace tokens.

Step 6: Creating condition

1. Click on the sequence flow (arrow connecting the event and action).
2. Name the condition "Show a message only to users with the editor role" in the property panel.

3. Click "+Select" next to "Template" and choose "Role of the current user"

‍

4. In the property panel, select the user role as "Content Editor". This ensures only users with this role see the thank-you message.

Step 7: Saving and testing

5. Click "Save" to store your model.
6. Create a new article in Drupal.

7. After saving, a message "Thank you for [node: title]" should appear on the website.

This simple ECA model demonstrates how you can automate workflows in Drupal using the ECA module. You can extend this model by adding more conditions or actions to customise its behaviour further.

Conclusion

Drupal’s Event-Condition-Action (ECA) module, combined with BPMN.io, is shifting from visual automation to AI-powered decision-making. Site builders can create no-code workflows that use models like GPT to generate summaries, improve metadata, and flag moderation issues automatically and in real time.

Used on over 8,000 sites, BPMN.io workflows are gaining traction in Europe with developers like LN Webworks and Code Enigma. They are applying AI-enhanced ECA for content strategy, personalisation, and quality assurance, especially in sectors with multilingual needs or lean teams.

This is not just a trend. Drupal is building modular, intelligent systems where AI becomes part of how websites operate. More on The Drop Times.

For more help, check out these resources:

• ECA Guide
• Drupal.org Project Page ‍
• BPMN.io

‍

AI in Drupal has come a long way in a short time. With version 1.1 of the AI Agents module, it's now much simpler to create your AI agents right from the admin interface. No coding is needed, and setup is quick.

These agents can do more than just chat. They can help users find content, assist with form submissions, or support your editorial team with routine tasks.

For example, you could build an agent that guides visitors through your blog, finds related articles, and summarises content so readers get the main points faster.

In this blog, we’ll walk through how to create your own AI agents in Drupal and show what they can do to make your site more helpful and efficient.

Install modules and configure your AI provider

First, you'll need to install and enable the required modules, which are

• AI Agents
• AI Agents Explorer
• AI API Explorer
• AI Provider OpenAI (Or any other provider that supports Tool calling)

Next, you'll need to set up the AI Provider OpenAI module. The best place to find the latest instructions for this is on the module's project page.

‍

Finally, navigate to Configuration -> AI -> AI Default Settings. Here, you need to select a model for the ‘Chat with Tools/Function Calling’ operation.

Creating our first AI Agent

• Go to Configuration -> AI -> AI Agents Settings
• Click on ‘Add AI Agent’

‍

We'll begin with a simple agent designed to suggest five taxonomy terms for any given topic. To set this up, you just need to add the following details:

• Label: Taxonomy term generator
• Description: This agent suggests 5 taxonomy terms for a given topic.
• Swarm orchestration agent / Project manager agent: Leave both of these options unchecked for now.
• Max loops: Change this to 1.

Now for the most important part: the instructions. Under the Usage details section, paste the following prompt into the Agent instructions field.

“You are a smart AI assistant integrated with a  Drupal website. Suggest 5 taxonomy terms that are specific instances or subtypes of the given topic. Prioritise concrete examples commonly used for categorisation, not abstract concepts or related fields. Return ONLY comma-separated terms (no explanations, numbering, or extra text).”

Once you're done, click Save.

To see our new agent in action, go back to the agent settings page (config/ai/agents) and click the Explore link next to your "Taxonomy term generator" agent. (Note: this link will only be visible if you have the AI Agents Explorer module installed).

In the explorer interface, type any topic into the prompt field and click Run agent. You'll see the output appear in the Progress section.

‍

Congratulations! You've just built your first AI Agent!

Tools: the infinity stones of Agents

Tools are what give agents their real power. They are specific functions that help an agent perform actions beyond just generating text. A tool can be:

• Another AI agent (known as a sub-agent)
• A Drupal Core Action
• An AIFunctionCall Plugin (allowing you to write custom tools with code)

Let's see how an AI agent can use tools. The AI Agents module provides a built-in tool named Modify taxonomy term, which can be used to create or edit taxonomy terms. We're going to update our "Taxonomy term generator" agent to use this tool, automatically saving the suggested terms into our "Tags" vocabulary.

But first, let's test the tool on its own. Edit the "Taxonomy term generator" agent you just created, find the "Modify Vocabulary" tool in the list and click the Test this tool option. You'll need to have the AI API Explorer module enabled to see this option.

‍

The tool requires several arguments, like vid, tid, and name. Let's give it a try:

• For vid, enter tags.
• For name, enter Earth.
• Click Run Function.

You should see a message like, "The term Earth was successfully created/edited," and you'll find the new term in your "Tags" vocabulary.

If you were to look at the source code for this tool, you'd see it's just a standard function for creating a taxonomy term. There's no "AI" inside the tool itself. The magic is that our agent can figure out how to call this tool with the correct arguments. The tool does the work and returns a success or error message back to the agent. That, in a nutshell, is how tool calling works

Adding the tool to our Agent

Replace the prompt of the ‘Taxonomy term generator’ agent with the following

“You are a smart AI assistant integrated with a  Drupal Website. Your task is to suggest 5 taxonomy terms that are specific instances or subtypes of the given topic. Prioritise concrete examples commonly used for categorisation, rather than abstract concepts or related domains. Once the terms are identified, use the modify_taxonomy_term tool to save them.”

Next, scroll down to the Tools section and select the Modify taxonomy terms tool. Once you select it, a new Detailed tool usage section will appear on the form. Expand the Property restrictions element to see the options.

This is where we can control the arguments passed to the tool. For example, our agent should add the taxonomy terms only to the ‘tags’ vocabulary. One way to enforce this is to add something like the following to the agent instructions.

"When using the modify_taxonomy_term tool, always use 'tags' as the value for the 'vid' parameter."

While this would probably work, a better and more reliable method is to enforce the value using the ‘Restrictions for property vid’ field. The default value for this section is ‘Allow all’. Change that to ‘Force value’ and enter ‘tags’ in the ‘values’ field.

If you select ‘Force value’, an additional checkbox, ‘Hide property’, will become available. This feature prevents the property from being sent to the LLM altogether, which is ideal for fields that store sensitive information like API keys.

‍

Now, save the agent and click the Explore button again to test our changes.

You'll probably see something interesting. The agent tries to call the tool, but the final response says ‘Not solvable’. And if you check your "Tags" vocabulary, you'll see the new terms haven't been created.

So what's going on? This happens because of the Max loops setting. Remember how we set it to 1 earlier? With a max loop of 1, the agent can only communicate with the LLM once. In that single step, the LLM decides which tool to use and what arguments to pass. But agent doesn't have a chance to actually run the tool and confirm the result. For that, it needs a second loop.

Go back and edit the agent, change Max loops to 2, save it, and try again. This time, it should work perfectly! The agent will use the tool, and the new terms will appear in your vocabulary.

Adding multiple tools

Let's try to improve the functionality of our taxonomy generator agent. Instead of adding all the terms to the "Tags" vocabulary, our agent should be able to create vocabularies that don't exist yet (like "Planets" or "Fruits") and then add terms to them. To do this, we'll need to give it a few more tools:

• List bundles: To check the currently available vocabulary names.
• List taxonomy term: To get the terms that already exist in a vocabulary (useful for preventing duplicates).
• Modify vocabularies: To create new vocabularies if they don't exist.
• Modify taxonomy term: The tool we used before to create or edit terms.

Update the prompt of our agent as follows

You are a taxonomy manager agent integrated into a Drupal 11 website. You help to provide information about existing vocabularies and terms, as well as adding new terms and vocabularies. You are a looping agent, meaning you can run multiple times till the task is completed.

You have the following tools available

1. list_bundles: Provides the information about currently existing vocabularies.

2. modify_vocabulary: Can be used to create new vocabularies.

3. list_taxonomy_term: Can give the existing terms present in a vocabulary

4. manage_taxonomy_term: Can be used to add new terms to a vocabulary/modify existing terms.

Before adding terms, make sure that the vocabulary exists. Also, make sure you do not add any existing terms to any vocabulary, unless explicitly requested by the user

Next, you'll need to configure the agent to use these new tools.

1. In the Tools section, select all four of the tools listed above.
2. Remove the hardcoded tag value from the ‘Detailed tool usage’ section that we set up earlier.
3. For the ‘List bundles’ tool, find the ‘Restrictions for property entity_type’ field and set taxonomy_term as the forced value. 
4. Finally, before saving, change the ‘Max loops’ value to 10. This gives the agent enough attempts to check for a vocabulary, create it if needed, and then add the terms.

Once you've saved the agent, test it again with a prompt like: Create a fruits vocabulary and add 4 terms.’

Our agent is now smart enough to use its full suite of tools to handle the entire request.

Default information tools

In our previous example, you might have noticed that our agent ran multiple times, perhaps 4 loops, just to create the "Fruits" vocabulary and add the terms. Each loop increases both the response time and token usage. One of the key tools our agent had to use was list_bundles, simply to get a list of existing vocabularies.

What if we could give the agent this information upfront, as part of its initial instructions? This is exactly what the Default Information Tools section is for. It lets you pre-load information for the agent, making it more efficient.

Let's try it out:

• First, edit your agent and uncheck the List bundles tool from the main Tools section. We no longer need the agent to decide to call it on its own.
• Next, scroll down to the Default Information Tools section and add the following YAML configuration:
  ‍

vocabularies:
  label: Vocabularies
  description: 'The existing Vocabularies on the system'
  tool: 'ai_agent:list_bundles'
  parameters:
    entity_type: taxonomy_term

‍

Now, save the agent and test it again with the prompt: Create a fruits vocabulary and add 4 fruits.

‍

If you run this after the vocabulary has already been created, you'll see a much faster response. The agent will likely tell you that the "Fruits" vocabulary already exists without ever explicitly calling the list_bundles tool.

This happens because the tool was invoked automatically in the background, and its output (the list of vocabularies) was sent to the LLM as part of the agent's initial context. The agent had the information it needed from the very beginning.

Create a chatbot for our Agent

Now let's build a chatbot that allows users to interact with our new taxonomy agent. The first thing you'll need to do is enable the AI Chatbot module.

To use a chatbot, first, an AI Assistant has to be created.

Step 1: Create the AI Assistant

1. Navigate to Configuration > AI > AI Assistants and click Add AI Assistant.
2. Give it the name: Taxonomy assistant.
3. For the Instructions, enter the following. This tells the assistant to simply pass the user's request directly to our agent.

Always delegate the task to the 'Taxonomy term generator' agent. Whatever response the agent provides, return it to the user. You are just a router — you do not perform any actions.

4. Under the Agents enabled section, select our Taxonomy term generator agent.
5. Click Save.

Step 2: Place the Chatbot Block

With our assistant ready, the final step is to place the chatbot block on the site.

1. Go to Structure > Block layout.
2. Select the Content region of the Olivero theme and click Place block.
3. Search for and place the AI DeepChat Chatbot block.
4. In the block configuration form, select your newly created Taxonomy assistant from the ‘AI Assistant’ dropdown.
5. Click the save block, and you're all set! You can now visit any page to interact with your agent.

And there you have it! In just a few steps, we went from a simple idea to a fully functional AI agent that can understand a request, use multiple tools to interact with our site, and even power a user-facing chatbot. If you've followed along, you've already mastered the core concepts. I encourage you to dive in and start experimenting. Don't be afraid to try different prompts, combine new tools, and see what you can create. You might be surprised at how easy it is to build an AI assistant that makes your Drupal site smarter and your workflow easier.

Wrapping Up

By now, you've seen how powerful and flexible AI Agents in Drupal can be. Starting with a simple term suggestion agent, we gradually added more functionality, allowing it to create vocabularies, avoid duplicates, and even respond through a chatbot.

What's exciting about this setup is how easy it is to extend. If you want to automate more content tasks, just add another agent. If you need smarter results, tweak the prompts. You are not locked into one use case, and you don’t need deep AI or coding knowledge to start seeing real results.

Everything you need is already in place. The interface is ready, the features are powerful, and the possibilities are wide open. So go ahead, explore and experiment. You might be surprised by how quickly you can build something truly useful.

If you get stuck or want to learn more, the Drupal community is always there to help.

‍

‍

This post is part of our AI CKEditor Integration series. If you haven’t read the previous blog on setting up the AI CKEditor module, we suggest starting there to understand the basics.

The built-in features like translation, tone adjustment, and text completion offer a strong starting point. But the real strength of the module comes from creating custom plugins that match your specific content workflows.

In this blog, we’ll walk through how to build those plugins. You’ll learn how to define custom behaviour, connect it with the editor interface, and shape AI assistance around your editorial needs.

Why create custom AI CKEditor plugins?

While the AI CKEditor module ships with a variety of powerful tools such as translation, tone change, and summarisation, there are many scenarios where teams need functionality tailored to their content workflows. This is where custom plugins shine.

Here are a few reasons you might want to build a custom plugin:

• Business-specific use cases: You may want to generate product descriptions in a specific format, suggest metadata, or summarise legal content with a custom tone, needs that generic tools don't fully support. Brands may need custom plugins that align with brand values and styles.
• Workflow automation: Automate repetitive editorial tasks like cleaning up input from clients, converting text to a brand-specific tone, or inserting dynamic content placeholders.
• Dynamic features: Some plugins can dynamically adjust based on user roles, entity types, or content fields, allowing a smarter integration between CKEditor and your Drupal backend.

Understanding the architecture

Custom AI CKEditor plugins work by:

1. Taking input (selected text, form fields, or nothing)
2. Processing that input through an AI model
3. Returning formatted HTML output
4. Allowing users to edit the result before inserting it into the editor

Setting up Your development environment

Create a custom module or use an existing one. Your plugin file should be placed in:
‍

src/Plugin/AiCKEditor/{YourPluginName}.php

Module structure
‍

/custom_module/ 
├── custom_module.info.yml
└── src/ 
└── Plugin/ 
└── AiCKEditor/
 └── ImproveClarity.php

Basic plugin structure

Every custom AI CKEditor plugin should extend the AiCKEditorPluginBase class. To make your plugin discoverable by Drupal, decorate the class with the #[AiCKEditor(...)] attribute, which provides metadata such as id, label, and description. This is essential for your plugin to appear in the AI Tools list within CKEditor.:
‍

<?php


namespace Drupal\my_custom_module\Plugin\AICKEditor;


use Drupal\ai_ckeditor\AiCKEditorPluginBase;
use Drupal\ai_ckeditor\Attribute\AiCKEditor;


/**
* Plugin to do something custom.
*/
#[AiCKEditor(
 id: 'custom_feature',
 label: new TranslatableMarkup('My Custom Feature'),
 description: new TranslatableMarkup('This is my custom feature for AI CKEditor.'),
)]
final class MyCustomFeatureCKEditor extends AiCKEditorPluginBase {


}

Key methods to implement

Configuration methods

1. buildConfigurationForm(): This method is responsible for rendering the configuration form users see when setting up the plugin.
   
   If your plugin requires no custom settings, and you’ve extended the base plugin class, you can safely skip this method. However, if your plugin needs to allow users to choose an AI provider or model, this is where you'll implement that logic.
   
   For example, let’s say your plugin uses the AIRequestCommand and you want to give users the ability to choose from available providers. Here's how you might set up a provider selection dropdown in the form:
   ‍

/**
  * {@inheritdoc}
  */
 public function buildConfigurationForm(array $form, FormStateInterface $form_state): array {
   $options = $this->aiProviderManager->getSimpleProviderModelOptions('chat');
   array_shift($options);
   array_splice($options, 0, 1);


   $form['provider'] = [
     '#type' => 'select',
     '#title' => $this->t('AI provider'),
     '#options' => $options,
     "#empty_option" => $this->t('-- Default from AI module (chat) --'),
     '#default_value' => $this->configuration['provider'] ?? $this->aiProviderManager->getSimpleDefaultProviderOptions('chat'),
     '#description' => $this->t('Select the AI provider to use.'),
   ];


   return $form;
 }

‍

2. submitConfigurationForm(): Handles saving configuration data.
3. defaultConfiguration(): Set up the default configuration before the initial setup is done.

User Interface Methods

1. buildCkEditorModalForm(): This method defines the form that end users interact with inside the CKEditor AI modal when they use the plugin.
   ‍

public function buildCkEditorModalForm(array $form, FormStateInterface $form_state, array $settings = []) {
 $storage = $form_state->getStorage();
 $selected_text = $storage['selected_text'] ?? '';
 $editor_id = $this->requestStack->getParentRequest()->get('editor_id');
 $form = parent::buildCkEditorModalForm($form, $form_state);


  // Your form elements here
  $form['response_text'] = [
   '#type' => 'text_format',
   '#title' => $this->t('AI Response'),
   '#prefix' => '<div id="ai-ckeditor-response">',
   '#suffix' => '</div>',
   '#allowed_formats' => [$editor_id],
   '#format' => $editor_id,
 ];
  return $form;
}

Processing methods

ajaxGenerate(): Handles the AI processing when users click "Generate".
‍

public function ajaxGenerate(array &$form, FormStateInterface $form_state) {
  $values = $form_state->getValues();
 
  try {
	$prompt = $this->buildPrompt($values);
	$response = new AjaxResponse();
	$response->addCommand(new AiRequestCommand(
  	$prompt,
  	$values["editor_id"],
  	$this->pluginDefinition['id'],
  	'ai-ckeditor-response'
	));
	return $response;
  }
  catch (\Exception $e) {
	// Handle errors appropriately
	$this->logger->error("Error in custom AI plugin: " . $e->getMessage());
	return $form['plugin_config']['response_text']['#value'] = "An error occurred.";
  }
}

Real-world example

Here is a plugin to improve the clarity of the selected text:
‍

 <?php


namespace Drupal\custom_module\Plugin\AICKEditor;


use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\ai_ckeditor\AiCKEditorPluginBase;
use Drupal\ai_ckeditor\Attribute\AiCKEditor;
use Drupal\ai_ckeditor\Command\AiRequestCommand;


/**
* Plugin to improve the clarity of selected text.
*/
#[AiCKEditor(
 id: 'improve_clarity',
 label: new TranslatableMarkup('Improve Clarity'),
 description: new TranslatableMarkup('Rewrite selected text to improve readability and clarity.'),
)]
final class ImproveClarity extends AiCKEditorPluginBase {


 /**
  * {@inheritdoc}
  */
 public function defaultConfiguration(): array {
   return [
     'provider' => 'NULL',
   ];
 }


 /**
  * {@inheritdoc}
  */
 public function buildConfigurationForm(array $form, FormStateInterface $form_state): array {
   $options = $this->aiProviderManager->getSimpleProviderModelOptions('chat');
   array_shift($options);
   array_splice($options, 0, 1);


   $form['provider'] = [
     '#type' => 'select',
     '#title' => $this->t('AI provider'),
     '#options' => $options,
     "#empty_option" => $this->t('-- Default from AI module (chat) --'),
     '#default_value' => $this->configuration['provider'] ?? $this->aiProviderManager->getSimpleDefaultProviderOptions('chat'),
     '#description' => $this->t('Select the AI provider to use.'),
   ];


   return $form;
 }


 /**
  * {@inheritdoc}
  */
 public function submitConfigurationForm(array &$form, FormStateInterface $form_state): void {
   $this->configuration['provider'] = $form_state->getValue('provider');
 }


 /**
  * {@inheritdoc}
  */
 public function buildCkEditorModalForm(array $form, FormStateInterface $form_state, array $settings = []): array {
   $storage = $form_state->getStorage();
   $editor_id = $this->requestStack->getParentRequest()->get('editor_id');


   if (empty($storage['selected_text'])) {
     return ['#markup' => '<p>' . $this->t('Please select some text before improving clarity.') . '</p>'];
   }


   $form = parent::buildCkEditorModalForm($form, $form_state);


   $form['selected_text'] = [
     '#type' => 'textarea',
     '#title' => $this->t('Selected text'),
     '#default_value' => $storage['selected_text'],
     '#disabled' => TRUE,
   ];


   $form['actions']['generate']['#value'] = $this->t('Improve Clarity');


   return $form;
 }


 /**
  * {@inheritdoc}
  */
 public function ajaxGenerate(array &$form, FormStateInterface $form_state) {
   $values = $form_state->getValues();


   try {
     $prompt = 'Rewrite the following text to improve clarity and make it easier to understand without changing the meaning:' . PHP_EOL . '"' . $values["plugin_config"]["selected_text"] . '"';
     $response = new AjaxResponse();
     $response->addCommand(new AiRequestCommand($prompt, $values["editor_id"], $this->pluginDefinition['id'], 'ai-ckeditor-response'));
     return $response;
   }
   catch (\Exception $e) {
     $this->logger->error("There was an error in the Improve Clarity plugin: @message", ['@message' => $e->getMessage()]);
     return $form['plugin_config']['response_text']['#value'] = "An error occurred during AI processing.";
   }
 }
}

See your plugin in action

Once you've created your custom AI CKEditor plugin, enabling it follows the same process as the built-in plugins:

• Clear cache to ensure Drupal discovers your new plugin
• Navigate to Administration → Configuration → Content authoring → Text formats and editors
• Select and configure your text format (e.g., Full HTML → Configure)
• Find your custom plugin in the "AI tools" section under "CKEditor 5 plugin settings"

• Enable and configure your plugin as needed

‍

• Your custom plugin will now appear in the AI Tools dropdown when users click the ✨ button in CKEditor, ready to enhance content with your specialized AI functionality.

‍

‍

Conclusion

Creating custom AI CKEditor plugins gives you the flexibility to shape content workflows around real editorial needs. 

Whether it’s refining tone, automating structure, or guiding writers with contextual prompts, each plugin can bring meaningful improvements to the way content is created and managed.

Start with a clear use case, build in small steps, and adjust based on real feedback. 

Drupal’s plugin architecture, combined with the AI CKEditor module, provides a strong foundation for developing tools that feel native to your workflow and make everyday writing faster, more focused, and more consistent.

‍

Artificial intelligence is changing how content gets created, reviewed, and published, and Drupal is keeping up. 

The AI CKEditor Integration module brings the capabilities of large language models (LLMs) directly into the content editing experience. Instead of jumping between external tools or copying drafts back and forth, editors can now work smarter within the CKEditor interface itself.

From translating content to checking spelling and grammar, adjusting tone, and completing sentences, the module makes everyday tasks faster and more consistent. It supports editors in maintaining quality, staying on message, and saving time, right where content is written. 

By embedding AI features directly into CKEditor, this integration simplifies content workflows and gives teams the kind of intelligent assistance that keeps pace with modern publishing demands.

AI CKEditor integration module

The AI CKEditor Integration module is a powerful extension that seamlessly integrates AI capabilities into Drupal's CKEditor 5. 

AI CKEditor Integration is a submodule available in AI Core module that provides plugins that integrate with CKEditor 5. Rather than switching between different tools or applications, content creators can access AI-powered features directly within their text editor, streamlining the content creation process.

Prerequisites and dependencies

Before diving into the setup, ensure you have the following modules installed and configured:

1. AI Core Module: The foundation that handles AI interactions
2. AI Provider Module: Such as the OpenAI Provider, Ollama ,etc, which connects to your chosen AI service
3. CKEditor 5: Drupal's default rich text editor (included in Drupal core)

Installation and configuration

Step 1: Enable the Module

First, enable the AI CKEditor Integration module through Drupal's admin interface or using Drush:

drush en ai_ckeditor

Step 2: Configure text formats

1. Navigate to Administration → Configuration → Content authoring → Text formats and editors (/admin/config/content/formats)
2. Select the text format you want to enhance (e.g., "Basic HTML")
3. Click Configure next to your chosen format

Step 3: Add the AI tools button

1. In the CKEditor toolbar configuration, locate the AI Stars ✨ widget
2. Drag it from the "Available buttons" section to your "Active toolbar"
3. Position it where you want it to appear in the editor toolbar

Step 4: Configure AI tools

1. Scroll down to CKEditor 5 plugin settings
2. Find the AI tools section
3. Configure each available tool according to your needs:
   
   1. Enable or disable individual tools
   2. Select the appropriate AI model for each tool
   3. Set specific parameters for each feature

Special plugin configurations

Setting up the tone plugin

The Tone plugin requires a custom taxonomy to define available tones:

Step 1: Create a taxonomy vocabulary

• Go to Structure → Taxonomy (/admin/structure/taxonomy)
• Add a new vocabulary (For example, name it  "Tone of voice")

Step 2: Add tone terms

• Create terms for different tones: "Friendly", "Professional", "Casual", "ELI5 (Explain Like I'm 5)", "Academic", etc.
• Optionally, add detailed descriptions for each tone in the term's description field

Step 3: Configure the plugin

• In the CKEditor AI tools configuration, select the vocabulary created in step 1.
• Enable "Use term description for tone description" if you want to use the detailed descriptions

Setting Up the Translation Plugin

Similar to the Tone of Voice plugin, the Translation feature requires a taxonomy:

‍

1. Create a taxonomy vocabulary. For example, name it “Languages”
2. Add language terms: "Spanish", "French", "German", "Japanese", etc.
3. Configure the plugin to use your Languages vocabulary

‍

Let us see our AI-powered CKeditor in action

Once configured, using AI tools is straightforward:

1. Open your content editor (node add/edit form with CKEditor)
2. Select a field that uses CKEditor

1. Click the AI Assistant button (✨) in the toolbar
2. Choose your desired AI feature from the dropdown menu

1. Provide any prompt needed in the modal that appears

6. Click "Generate" to process your request

6. Review and edit the AI-generated content

8. Click "Save changes to editor" to insert the content into your document

Conclusion

The AI CKEditor Integration module marks a meaningful upgrade in how content is created and edited in Drupal. By embedding AI features directly into the CKEditor interface, it removes the need for context switching and makes capabilities like tone adjustment, grammar correction, translation, and text completion accessible to everyone: from site editors to content strategists.

This module works within Drupal’s existing editorial workflow, so teams don’t need to learn new tools or disrupt their publishing process. With a simple setup and thoughtful defaults, you can start improving content quality immediately.

Looking ahead, the potential for deeper AI integration is just beginning. From content summarization and image generation to accessibility checks and editorial analytics, future enhancements could transform CKEditor into a true intelligent assistant for web publishing. 

As the Drupal ecosystem continues to adopt AI-powered modules, this integration sets the foundation for a smarter, more efficient content creation experience, built right into your CMS.

‍

In today's digital landscape, Search Engine Optimisation (SEO) plays a vital role in ensuring online visibility. Whether you're a small business or a large enterprise, SEO directly influences how easily users can find your content. With AI (Artificial Intelligence) transforming industries, automating SEO processes in platforms like Drupal can significantly improve efficiency and results.

Drupal, a powerful content management system (CMS), offers flexibility and scalability for building websites. When paired with AI tools, Drupal can streamline and automate many aspects of SEO, making it easier for website owners and administrators to optimise their sites without requiring extensive manual intervention.

In this blog, we will explore how AI can be utilised to automate SEO in Drupal, as well as the tools and techniques that can help you achieve better search rankings.

Why automate SEO?

Before diving into the specifics of AI, it's important to understand why automating SEO is essential. SEO is a multifaceted and time-consuming process that requires constant attention. From keyword research to content optimisation, backlink management, and technical SEO, there’s a lot to manage. Here’s why automation is crucial:

1. Efficiency: SEO requires consistent effort. Automation saves time and ensures tasks are done correctly and on time.
   
2. Data-driven insights: AI can process vast amounts of data and deliver actionable insights that can inform your SEO strategy.
   
3. Consistency: AI tools provide consistency across your entire website. Once set up, they ensure that your content and technical SEO elements are always optimized without needing constant adjustments.
   
4. Stay competitive: Search engine algorithms are constantly evolving. AI can help keep you ahead of these changes by adapting your SEO strategy based on up-to-date trends.

Introducing the AI SEO Drupal module

The AI SEO module is a contributed Drupal module that leverages AI services (e.g., OpenAI) to automate and assist with SEO tasks. It’s part of the broader AI Core ecosystem and integrates with your content types to generate:

‍

• Meta titles and descriptions
• Alt text for images
• Keyword suggestions
• Semantic improvements

Whether you're publishing articles, landing pages, or product descriptions, this module can help ensure that your content meets SEO best practices without extra manual effort.

Key features of the AI SEO module

1. Content analysis & suggestions

When you edit content, AI SEO analyzes your text and suggests improvements like better keyword use, clearer headlines, or restructuring paragraphs for SEO effectiveness.

2. Meta tag generation

The module generates contextually relevant:

• Meta titles (to improve CTR on search engines)
• Meta descriptions (to summarise page content)

This helps editors focus on writing content while AI handles the technical SEO layers.

3. Image Alt text generation

AI reads your images (file names and optionally visual description via prompts) and generates meaningful alt text, which improves accessibility and helps search engines index image content.

4. Keyword suggestions

Using Natural Language Processing (NLP), AI SEO identifies important keywords from the content and recommends additional terms that could boost search relevance.

5. Bulk optimization via Drush

AI SEO provides a Drush command for optimizing multiple nodes at once, making it perfect for retrofitting existing content.

How to use the AI SEO module in Drupal

1. Install required modules

You'll need:

• AI Core
• AI SEO
• AI Provider (e.g., OpenAI)

2. Configure API access

• Go to: /admin/config/system/keys
• Paste your OpenAI API key (or other supported providers)

• "Select the OpenAI key from the AI Providers dropdown at /admin/config/ai/providers/openai."

• Save the OpenAI key
• Go to: ‘/admin/config/ai/seo’
• Choose the Provider and Model used for SEO analysis.
• Configure the SEO prompt

3. How the AI SEO module works

When editing a content node, the module provides an "Analyse SEO" tab on the sidebar or as a local task tab. This tab allows users to analyse the node’s current content, including title, summary, and body fields, and generate a comprehensive SEO report.

4. How to generate an SEO report

Step 1: Create or Edit a Node

Navigate to Content > Add Article or edit an existing one.

Step 2: Click on the "Analyse SEO" Tab

You will see a tab titled "Analyse SEO" while editing the content. Click it to start the process.

Step 3: SEO Report Generation

Once clicked, the module:

1. Sends the content data (title, summary, body) to your AI provider
2. Analyses factors like:
   
   1. Keyword presence
   2. Meta description quality
   3. Heading structure
   4. Readability score
   5. Keyword density
3. Returns a report with scores and suggestions

This report includes:

• Good Practices: Lists what's working well
• Suggestions: What can be improved (e.g., "Consider using the keyword in your H1 heading")
•  AI Suggestions: AI-generated content rewrites or meta tags

Extra features

• Multilingual support: The report adapts to the content language
• Field mapping: You can configure which fields are analysed
• AI Generation Mode: The module can also auto-generate meta tags and summaries using AI, based on your content
  

• Below is an example of the SEO report generated by the module.

Why use AI SEO?

• Save Time: No more jumping to external tools like Yoast or SEMrush
• Consistency: Enforce uniform content quality across editors
• Smart Enhancements: AI suggestions help even non-SEO experts write better content

Conclusion

The AI SEO module for Drupal brings AI intelligence directly into the CMS, allowing editors to create search-optimized content without needing to switch between tools. Using this module, teams can generate meta descriptions, titles, alt text, and concise summaries directly in the edit screen, then refine them with real-time keyword and structure suggestions that follow the guidance in Google’s SEO Starter Guide.

Drupal’s modular architecture lets publishers scale content creation while keeping precision and consistency intact, which is crucial for large, content-heavy sites. The result is faster publishing, fewer manual errors, and stronger search performance.

Looking ahead, AI in Drupal SEO will open fresh possibilities. Expect automatic detection of content decay, AI-suggested rewrites for underperforming pages, topic prioritisation based on live search trends, and smarter internal linking and semantic clustering that adapt to competitor moves and user signals. For content-rich websites aiming to grow organic visibility, AI-driven SEO has shifted from nice-to-have to strategic imperative, and Drupal is positioned to lead this evolution.

‍