![]()

#### 

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](https://github.com/izharikov/build-ai).

#### 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.

![AI Layout Builder in Action: from request into layout](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/demo.png)

Check out the video demo here:

#### Usage

The tool is available as an [npm](https://www.npmjs.com/package/@build-ai/cli) 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](https://github.com/izharikov/build-ai?tab=readme-ov-file#usage) for more details.

#### Architecture

![Layout builder architecture](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/architecture.png)

*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](https://platform.openai.com/docs/guides/structured-outputs) feature is used to get the layout. The `web_search` tool (powered by [exa.ai](https://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.

![AI conversation flow](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/ai-flow.png)

#### 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](https://github.com/izharikov/build-ai/blob/main/packages/core/src/index.ts#L54). You can easily override them — see [this section](https://github.com/izharikov/build-ai?tab=readme-ov-file#promts).

##### 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.

![Available Commands](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/commands.png)

Scrollable preview directly in the terminal:

![Layout preview](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/layout-preview.png)

##### Save and preview (in XM Cloud)

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

![Save and Preview AI generated layout](https://www.brimit.com/-/media/images/blog/sitecore/ai-layout-builder/save-preview.png)

#### Conclusion

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

###### More From Author

[##### Sitecore Marketplace SDK Integration with Vercel AI SDK
February 25, 2026](https://www.brimit.com/blog/sitecore-marketplace-sdl-integration-with-vercel-ai-sdk)[##### Sitecore Marketplace Updates (December 2025)
December 16, 2025](https://www.brimit.com/blog/sitecoreai-marketplace-december-updates)[##### SitecoreAI, Marketer MCP, Agents API, Marketplace — Sitecore Symposium 2025 Recap
November 11, 2025](https://www.brimit.com/blog/sitecoreai-mcp-marketplace-symposium2025-recap)

###### Author

[!\[Igor Zharikov - Senior Sitecore Developer, Sitecore MVP\](https://www.brimit.com/-/jssmedia/feature/blogs/authors/igor-zharikov-2.jpg?h=700&iar=0&w=700&hash=292A84E8CB3E5CE57CA743385CFB1464)
Igor Zharikov
Sitecore MVP / Senior Sitecore Developer](https://www.brimit.com/blog/author?authors=Igor%20Zharikov)

#### More on Sitecore

[!\[How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2024/vercel_cover-image.png)
#Guides#How-toDXPE-commerce
##### How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects
Optimize and accelerate the development and deployment of complex multisite Sitecore projects.
Alexei Vershalovich on July 17, 2024](https://www.brimit.com/blog/how-vercel-will-help-you-save-effort-when-deploying-sophisticated-sitecore-projects)

[!\[Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2023/sitecore-mentoring---cover-image.png)
#How-toDXP
##### Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story
How to participate in the Sitecore Mentor program and help younger colleagues jump-start a career in Sitecore development.
Sergey Baranov on October 2, 2023](https://www.brimit.com/blog/training-up-tomorrows-sitecore-mvps)

[!\[Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)\](https://www.brimit.com/-/jssmedia/project/brimit/blog/2022/headless/adobestock_456986731.jpg)
#How-toDXPE-commerce
##### Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)
Discover how a headless CMS can benefit organizations that use Sitecore.
Daniil Raschupkin, Palina Trokhautsava on September 15, 2022](https://www.brimit.com/blog/going-headless-part-2-when-a-headless-cms-is-your-best-bet-if-you-have-sitecore)

![](https://bat.bing.net/action/0?ti=187017043&tm=gtm002&Ver=2&mid=1f7a49cf-cfac-4975-b3eb-ac78afa0a021&bo=2&gtm_tag_source=1&pi=0&lg=en-US&sw=800&sh=600&sc=24&nwd=1&tl=AI%20Layout%20Builder%20for%20Sitecore%3A%20Generate%20Pages%20and%20Emails%20with%20Your%20Components&kw=Sitecore,%20Sitecore%20XM%20Cloud,%20Sitecore%20Send,%20AI%20Layout%20Builder,%20layout,%20cli,%20npm,%20integration,%20LLM,%20agent&p=https%3A%2F%2Fwww.brimit.com%2Fblog%2Fsitecore-ai-layout-builder&r=&lt=343&evt=pageLoad&sv=2&asc=D&cdb=AQAY&rn=115599)