Choose your builderLesson 1 of 11 · 7 steps

Build with Bricks

Create a native draft and reuse existing Bricks design styles.

Video coming soon

Your next step is ready.

Follow the complete written guide below.
The video will join it here when it’s ready.

Start the written lesson

Before you start

EMCP Pro and a verified AI connection.
Active Bricks theme in the documented supported range; Bricks 2.4.x requires EMCP 3.18.0+.
A practice site and a draft page.

Let’s do this, step by step.

Step 01

Select and save the builder

Open Setup → Page Builders. Select Bricks under 1. Standalone builder. Choose Save changes. A Not detected card lists missing requirements.

Start with the required plugin or theme active. Select this builder and click Save changes. This does not convert existing content.

Step 02

Enable the actions and reconnect

Open Setup → Tools → Bricks. Inspect read and write switches; enable the actions needed for this practice task, then Save changes and reconnect your AI app.

Open this integration’s Tools tab. Check both read and write actions; Pro read tools can also start off on a fresh install. Save your choices and reconnect the app so it reads the updated list.

Step 03

Inspect before building

Ask the AI to read Bricks's context, supported element controls, and existing design settings.

Ask what this installed version can actually edit. Seeing an element in the catalog does not always mean EMCP can create or change it.

Step 04

Create a native draft

Ask for a small services-page draft using sections, headings, and a contact button.

Create one draft and keep its returned ID. The AI should assemble real Bricks elements and use the latest saved version for each change.

Copy and adapt

                    Inspect Bricks context, element controls, and existing design styles. Create a draft services page with a hero, three services and a contact introduction. Use native elements, preserve global settings, and do not publish.

Step 05

Reuse existing styles

Reference available global classes and variables without changing their definitions.

Reuse the site's design where it fits. In this integration, global design data is available for reference; changing it is outside the supported workflow.

Step 06

Refine the phone layout

Preview the draft and request one targeted change to spacing or image crop on mobile.

Name the existing page and element so the AI edits that result. Do not start another page just to adjust the phone view.

Step 07

Read back and preview

Read the saved page again. Open the native editor, then inspect the frontend at desktop and phone widths.

Check the saved content, editing controls, images, and links. If a newer edit is detected, read it before trying again. A save response alone does not prove the page looks right.

You’re done when…

The Bricks result remains natively editable and the intended save/publication state is verified.

Keep the reference handy.

The docs cover tool details and requirements for this lesson.

You only need the guide for the app or builder you use. Ready to build? Try an Elementor draft or use Gutenberg.