AI Layout Builder for Sitecore: Generate Pages and Emails with Your Components

Let AI build emails and pages with your components.

Introduction

Building layouts with AI is a powerful way to create website pages. Imagine an LLM knowing your components, your data structure, and assisting you in building a page.

Now this is possible with the tool AI Layout Builder.

Description

When everything is connected, you can simply write a prompt, and the tool will automatically create the layout using the components defined in your system.

Check out the video demo here:

Usage

The tool is available as an npm package.

  Usage
      $ npx @build-ai/cli [options]

  Options
      --config, -c    config file path (default: config.json)
      --help          display help for command

To fully use the tool you need to create a .env file and a config.json file. Refer to the README for more details.

Architecture

Note: A Provider is an external service that supplies components. Currently sitecore and send are supported.

• Sitecore → XM Cloud integration

• Send → Sitecore Send integration

• The Provider gives a list of components to the @build-ai/cli.

• @build-ai/cli sends a request to the LLM to build a layout. The Structured output feature is used to get the layout. The web_search tool (powered by exa.ai) is also available.
• The result is processed and saved locally.
• The user has the option to save the result to the Provider (e.g., Sitecore).

The AI conversation flow is shown in the diagram below.

Features

Generate layout with datasources

This tool not only generates a layout using provided components, but also generates content for the page.

Providers

Currently two providers are supported:

• send → Sitecore Send integration. The app generates a JSON email layout, which can be imported as a design in Sitecore Send.
• sitecore → XM Cloud integration. The app generates a page layout, which can be pushed into Sitecore (using the GraphQL API).

In general, the tool is provider-agnostic, so you can use it with any provider by implementing the required interfaces.

Component structure

Components are retrieved from the Provider (with caching enabled by default, so they are fetched only once) and are then used to build a layout.

Example component (for the XM Cloud provider):

{
    "id": "9c6d53e3-fe57-4638-af7b-6d68304c7a94",
    "name": "RichText",
    "description": "Sitecore rendering under 'Feature/JSS Experience Accelerator/Page Content/RichText'",
    "instructions": "",
    "placement": {
      "allowedChildPlaceholders": [],
      "allowedParentPlaceholders": [
        "__main__",
        "container-{*}"
      ]
    },
    "datasource": {
      "templateId": "0a7aa373-5ed1-4e9b-9678-22d3c5faf6df",
      "name": "Text",
      "fields": [
        {
          "name": "Text",
          "type": "html"
        }
      ]
    }
}

Prompts

Default system prompts are available here. You can easily override them — see this section.

Layout preview

When a layout is generated, it is stored locally, and you can preview it before saving it to a Provider (saving is currently supported in the sitecore provider only).

Preview, save, and open are available through CLI commands.

Scrollable preview directly in the terminal:

Save and preview (in XM Cloud)

When the layout is generated, it can be saved (directly via the CLI) in Sitecore XM Cloud.

Conclusion

AI Layout Builder is a great tool to create layouts. Try it out and let me know your feedback!