🇮🇳India @Akhil Babu

The page builder AI agent needs both the curent layout structure (Provided by the get_current_layout tool) of the page and the details of avaialble SDCs (Provided by get_sdc_info tool). Default information tools option helps to send these direct;y along with the Agent instructions as context. So it saves two extra AI calls.

The changes aren’t about creating or editing components. They’re focused on adding already existing components (Only SDC as of now) to the canvas with dynamic content to help build pages. For example: “Create a section showing three key features of Drupal” or “Add a button with the text ‘Read more.’”
In my opinion, creating entire page templates (with header, body, footer, etc.) can be handled in a separate issue after the current approach is reviewed and accepted, since we’ll need to reuse a lot of the existing logic for that.

Also, have you run npm run build after pulling the latest changes? If yes, are you seeing any errors in the console?

Currently there are 2 issues

1. The messages from the page_builder_agent are not rendering in the chatbot window.
2. Once a component is selected from the canvas, the screen automatically refreshes while typing the next message. It seems that a request is somehow being triggered to the endpoint /xb/api/v0/form/content-entity/{entity_type}/{entity}/{entity_form_mode}

akhil babu → created an issue.

Thanks @annmarysruthy. Just checked again. getReadableOutput has been moved to Drupal\ai\Base\FunctionCallBase. So this issue no longer exists. Closing this issue

akhil babu → created an issue.

This is working fine now. So merging the code

Ready for review

Tested with
AI Core 1.0.5
AI Agents 1.0.2
Gemini provider 1.0.0-beta1

Steps to use Gemini Provider

• Add your Gemini API key in Configuration > System > Keys
• Go to Configuration > AI > Provider Settings > Gemini provider and select the added key
• Go to Configuration > AI > AI Default Settings
• Select 'Gemini' as 'Default Provider' and 'Gemini 2.0 flash' as 'Default model' for 'Chat' and 'Chat with Complex JSON' operations
• Now, the assistant would work with the Gemini provider

akhil babu → created an issue.

akhil babu → created an issue.

akhil babu → made their first commit to this issue’s fork.

Thanks @wim leers. I have updated GeneratedFieldExplicitInputUxComponentSourceBase::validateComponentInput() and added a check for unexpected props.

However, no exception was thrown for the curl request mentioned in #5, and the heading component was still added to the canvas. The expected error only appeared when publishing the page (Because ValidComponentTree constratint was invoked)
Shouldn't the error have been thrown at the time of the request?

I also tried to validate 'missing' props but that resulted in many test failures as some props are not always part of user input (Like 'attribute' prop in sdc.experience_builder.my-hero component)

Thanks @wim leers🙏. I just tested this using the 'Heading' SDC, by adding an extra property 'textUnwanted' when making a curl request to the endpoint /xb/api/v0/layout/xb_page/5 and the changes were successfully saved. There were no validation errors regarding the unexpected prop

curl --location 'https://starshot.ddev.site/xb/api/v0/layout/xb_page/5' \
--header 'accept: */*' \
--header 'accept-language: en-US,en-GB;q=0.9,en;q=0.8' \
--header 'content-type: application/json' \
--header 'origin: https://starshot.ddev.site' \
--header 'priority: u=1, i' \
--header 'referer: https://starshot.ddev.site/xb/xb_page/5/editor/component/fdc18261-ef6e-41bd-bdba-99ecc72bf359' \
--header 'sec-ch-ua: "Chromium";v="136", "Google Chrome";v="136", "Not.A/Brand";v="99"' \
--header 'sec-ch-ua-mobile: ?0' \
--header 'sec-ch-ua-platform: "Linux"' \
--header 'sec-fetch-dest: empty' \
--header 'sec-fetch-mode: cors' \
--header 'sec-fetch-site: same-origin' \
--header 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36' \
--header 'x-csrf-token: PIqRn04kuCGgm5leY3w_pc0Oq9ZGv0mzWXds0SE7cmg' \
--header 'Cookie: SSESS1a128ff57fee5bd2b5663cea7bd52db5=n4epfmoesptq7m91dcj6skrvtl' \
--data '{
  "layout": [
    {
      "nodeType": "region",
      "id": "content",
      "name": "Content",
      "components": [
        {
          "slots": [],
          "nodeType": "component",
          "type": "sdc.experience_builder.heading",
          "uuid": "fdc18261-ef6e-41bd-bdba-99ecc72bf359"
        }
      ]
    }
  ],
  "model": {
    "fdc18261-ef6e-41bd-bdba-99ecc72bf359": {
      "name": "Heading",
      "resolved": {
        "text": "A heading element new text",
        "style": "primary",
        "element": "h1",
        "textUnwanted": "An unwanted heading" // Invalid prop
      },
      "source": {
        "text": {
          "expression": "ℹ︎string␟value",
          "sourceType": "static:field_item:string",
          "value": [
            {
              "value": "A heading element new text"
            }
          ]
        },
        "textUnwanted": { // Invalid prop
          "expression": "ℹ︎string␟value",
          "sourceType": "static:field_item:string",
          "value": [
            {
              "value": "An unwanted heading"
            }
          ]
        },
        "style": {
          "expression": "ℹ︎list_string␟value",
          "sourceType": "static:field_item:list_string",
          "value": [
            {
              "value": "primary"
            }
          ],
          "sourceTypeSettings": {
            "storage": {
              "allowed_values": [
                {
                  "value": "primary",
                  "label": "primary"
                },
                {
                  "value": "secondary",
                  "label": "secondary"
                }
              ]
            }
          }
        },
        "element": {
          "expression": "ℹ︎list_string␟value",
          "sourceType": "static:field_item:list_string",
          "value": [
            {
              "value": "h1"
            }
          ],
          "sourceTypeSettings": {
            "storage": {
              "allowed_values": [
                {
                  "value": "div",
                  "label": "div"
                },
                {
                  "value": "h1",
                  "label": "h1"
                },
                {
                  "value": "h2",
                  "label": "h2"
                },
                {
                  "value": "h3",
                  "label": "h3"
                },
                {
                  "value": "h4",
                  "label": "h4"
                },
                {
                  "value": "h5",
                  "label": "h5"
                },
                {
                  "value": "h6",
                  "label": "h6"
                }
              ]
            }
          }
        }
      }
    }
  },
  "entity_form_fields": {
    "langcode[0][value]": "en",
    "revision_log[0][value]": "",
    "title[0][value]": "Untitled page",
    "path[0][alias]": "",
    "path[0][source]": "/page/5",
    "path[0][langcode]": "en",
    "image[media_library_selection]": "",
    "description[0][value]": ""
  }
}'

Just to confirm, does this mean validateComponentInput() currently allows unexpected properties (i.e., garbage values) for SDCs?

Could you please give an example for 'garbage value'?

I have created an MR based on the patch in #4 with some additional changes
1. Got the following error for blocks
When a #lazy_builder callback is specified, no properties can exist; all properties must be generated by the #lazy_builder callback. You specified the following properties: #prefix, #suffix, #access

So updated the lazybuilder callback to include the #access, #prefix and #suffix properties. But the Drupal\Tests\experience_builder\Kernel\Plugin\ExperienceBuilder\ComponentSource\BlockComponentTest::testRenderComponentLive fails as #prefix and #suffix are not included in the assertion. Should the test be updated, or is there a better approach?

akhil babu → made their first commit to this issue’s fork.

Please review

akhil babu → created an issue.

I have tested the changes in https://git.drupalcode.org/project/ai_agents/-/merge_requests/124/diffs?... and https://git.drupalcode.org/project/ai_agents/-/merge_requests/124/diffs?... and its working fine.

• [ai_agent:agent_instructions] token is properly added for content type and taxonomy agents
• The [agent_instructions] token is correctly updated to [ai_aent:agent_instructions] in previously created agents, after running drush updb

MR 1008 adds an error message when the code component does not exist.

However user can't navigate to a new code component from the left side bar. The URL changes, but the code editor is not renderd unless 'Try again' is clicked. The error boundary needs to be reset. I belive 'resetBoundary' should be used, but it didn't work (I probably implemented it incorrectly. still learning react 😅)

akhil babu → created an issue.

akhil babu → made their first commit to this issue’s fork.

Looks like this is already being implemented in ✨ Add the actual agents as configs Active

Please review

akhil babu → created an issue.

Will try to create the agents

Looking at the available tools, all tools mentioned in the issue summary are already there

'List Bundles' tool already provides bundle types for an entity type.
'Get Content Type Info' provides information about any node types.
'Create Content Type' for Creating content types
'Edit Content Type' for editing content types
'Delete Content Type' for deleting content types.

Please review

I was able to reproduce this issue. When the page title is updated, the entity_form_fields store the correct value, but the HTML section in the autosave data does not get updated.

Rather than adding '/' to paths that dont start with it, we should add validation to the entity form fields

Validation for entity fields are not yet impletemted
file: experience_builder/ui/src/components/form/inputBehaviors.tsx

  const validateNewValue = (e: React.ChangeEvent, newValue: any) => {
    // @todo Implement this.
    return { valid: true, errors: null };
  };

This should be updated to

  const validateNewValue = (e: React.ChangeEvent, newValue: any) => {
    const target = e.target as HTMLInputElement;
    if (target.id === 'edit-path-0-alias' && typeof newValue === 'string') {
      if (newValue && !newValue.startsWith('/')) {
        return {
          valid: false,
          errors: [
            {
              keyword: 'value',
              instancePath: '',
              schemaPath: '',
              params: {},
              message: 'The alias path has to start with a slash',
            },
          ],
        };
      }
    }
    // @todo Implement for other entity fields.
    return { valid: true, errors: null };
  };

hestenet → credited akhil babu → .

"#2 is no longer valid.

The module's architecture has completely changed. It now leverages utility functions defined by the XB UI, such as addNewComponentToLayout, to place components rather than updating the autosave data. This is inspired by the code of the ConceptProvider extension added in XB.

The current implementation has only one agent with two sub-agents. The new version has the following agents:

• Main Agent – An orchestration agent that parses the user request and assigns the task to the corresponding sub-agents.
• Template Designer Agent: Used as a tool by the main agent. Responsible for building an entire page (e.g. a template for a news article).
• Layout Editor: Used as a tool by the main agent. Responsible for adding new components to an already created page (e.g. "Add a paragraph with text explaining 5 new features of Drupal.")
• Contextual Editor: Used as a tool by the main agent. Can update content or child components of a selected component placed on the page (e.g. the user selects a 2 column layout and asks, "Add 2 images to both columns").

The module now supports creating code components from Figma design, using the Figma MCP Server. These new agents have been created for that:

• Figma Agent: Creates Preact code from Figma data.
• Figma Image Decoder Agent: Used as a tool by the Figma agent when the code component should use the exact images present in the Figma design, if any."

These are not yet published.

I have raised a PR. Please review

akhil babu → created an issue.

Please review

akhil babu → created an issue.

This is an early version of the workflow plan. It may change as development progresses.

akhil babu → created an issue.

Not sure if this is the correct way:

To show the warning, first add

    if (isset($this->agentsManager->getDefinition($default_agent)['custom_type']) && $this->agentsManager->getDefinition($default_agent)['custom_type'] === 'config') {
      if (empty($this->providerManager->getSimpleProviderModelOptions('chat', FALSE, TRUE, [AiModelCapability::ChatTools]))) {
        $this->messenger->addError($this->t('This agent will not work with the selected model as function calling is not supported.'));
      }
    }

to Drupal\ai_agents_explorer\Form\AiAgentExplorerForm::buildForm

But for this to work,

      if (in_array(AiModelCapability::ChatTools, $capabilities)) {
        continue;
      }

should be added to Drupal\ai_provider_openai\Plugin\AiProvider\OpenAiProvider::getModels in the
1.0.2 version code

marcus_johansson → credited akhil babu → .

Merged. Thanks

akhil babu → made their first commit to this issue’s fork.

akhil babu → created an issue.

akhil babu → created an issue.

The module will not work with the 0.2.0-alpha6 version of experience builder. Could you try with the latest dev release of experience builder?
https://www.drupal.org/project/experience_builder/releases/0.x-dev →

Fixed

Now the dev release of experience builder would get downloaded when the module is downloaded using composer

akhil babu → created an issue. See original summary → .

Merged

Working now

akhil babu → created an issue. See original summary → .

akhil babu → created an issue.

akhil babu → created an issue.

Raised a PR

griffynh → credited akhil babu → .

akhil babu → created an issue. See original summary → .

kristen pol → credited akhil babu → .

kristen pol → credited akhil babu → .

kristen pol → credited akhil babu → .

kristen pol → credited akhil babu → .

kristen pol → credited akhil babu → .

kristen pol → credited akhil babu → .

griffynh → credited akhil babu → .

This warning was appearing in logs while running the tests. So I have updated the AutoSaveManager::save() method to check if $data["entity_form_fields"] exists or not.

/var/www/html/web/modules/contrib/experience_builder/src/AutoSave/AutoSaveManager.php:34
Undefined array key "entity_form_fields"

Please review