- [Home page](https://www.brimit.com/) - [Blog](https://www.brimit.com/blog) # AI Layout Builder for Sitecore: Generate Pages and Emails with Your Components [Tech Talks](https://www.brimit.com/blog?categories=Tech%20Talks) [DXP](https://www.brimit.com/blog?platforms=DXP) [Igor Zharikov](https://www.brimit.com/blog/author?authors=Igor%20Zharikov) on September 16, 2025 ![Logo](https://www.brimit.com/-/jssmedia/images/blog/sitecore/ai-layout-builder/ai-layout-builder-logo.png?h=775&iar=0&w=1373&hash=CAFE66F799CA3196A3877366A5149B6D) 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: [https://www.youtube.com/watch?v=Z-ItDqidWBk](https://www.youtube.com/watch?v=Z-ItDqidWBk) #### 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 ##### Extending Claude Code for Sitecore XP Development September 14, 2026[Extending Claude Code for Sitecore XP Development](https://www.brimit.com/blog/sitecore-xp-claude-setup) ##### Sitecore 10.5 Release August 7, 2026[Sitecore 10.5 Release](https://www.brimit.com/blog/sitecore-10-5-whats-new) ##### Sitecore Marketplace SDK Integration with Vercel AI SDK February 25, 2026[Sitecore Marketplace SDK Integration with Vercel AI SDK](https://www.brimit.com/blog/sitecore-marketplace-sdl-integration-with-vercel-ai-sdk) ###### 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 [Igor Zharikov](https://www.brimit.com/blog/author?authors=Igor%20Zharikov) ###### More By Categories [#Events](https://www.brimit.com/blog?categories=#Events) [#How-to](https://www.brimit.com/blog?categories=#How-to) [#News](https://www.brimit.com/blog?categories=#News) [#Guides](https://www.brimit.com/blog?categories=#Guides) ###### More by Platform [Data and AI](https://www.brimit.com/blog?platforms=Data%20and%20AI) [DXP](https://www.brimit.com/blog?platforms=DXP) [E-commerce](https://www.brimit.com/blog?platforms=E-commerce) [Internet of Things](https://www.brimit.com/blog?platforms=Internet%20of%20Things) [Sales and marketing automation](https://www.brimit.com/blog?platforms=Sales%20and%20marketing%20automation) #### 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-to DXP E-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 [How Vercel Will Help You Save Effort When Deploying Sophisticated Sitecore Projects](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-to DXP ##### 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 [Training Up Tomorrow's Sitecore MVPs: a Mentoring Success Story](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-to DXP E-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 [Going Headless. Part 2: When a Headless CMS Is Your Best Bet (if you have Sitecore)](https://www.brimit.com/blog/going-headless-part-2-when-a-headless-cms-is-your-best-bet-if-you-have-sitecore)