Bricks MCP: build editable pages with your existing styles.

Bricks content your team can keep editing

A Bricks page is a flat list of elements linked by parents and children. EMCP Pro gives your MCP client access to that structure, the live element catalog and native controls, so a heading remains a Bricks heading you can edit in the builder.

See the tested Bricks AI tutorial for a reference-inspired landing page built with EMCP Pro 3.18.0 and Bricks 2.4.1: 98 native elements, actual editor screenshots, and desktop, tablet and mobile review. The fresh demo site used page-level styling; it did not test reuse of an existing global design system.

Work with the native design model

Read global classes, variables, palettes, theme styles and breakpoints before building. Existing local templates can be inspected and their content, header or footer elements edited in the correct area. Global design data is available for reference; this adapter does not change it.

Connect your AI to the right tools

Open EMCP Tools > Page Builders and select this standalone builder. Gutenberg and enabled block packs remain available. Reconnect your MCP client, read context and schemas, and enable the write tools needed for the task. Start with a draft and inspect the native editor. Available in EMCP 3.17.0. Check compatibility before updating the vendor builder; an unsupported version can prevent its tools from appearing.

Read the Bricks tool reference for operations and tested boundaries. The page-builder setup guide explains selection and Gutenberg coexistence.

Bricks skill attribution

The bundled Bricks authoring skill credits Gaurav Tiwari (@wpgaurav), the original author of bricks-skills, and retains its MIT attribution. EMCP adds its own integration workflow. Broader upstream examples do not expand the adapter’s write scope.

Walkthrough: a services page using existing Bricks styles

With EMCP Pro and supported Bricks active, try: “Create a draft services page with a hero, three service cards and a contact link. Reuse my existing global classes. Leave the live site and global styles unchanged.”

1. Read bricks-get-context, discover the installed elements and inspect their schemas. Read bricks-get-design-system to identify existing class IDs and breakpoints.
2. Create the draft with bricks-create-page. Keep its returned page ID and content_hash; use that hash as expected_hash when adding the native element tree. Re-read the page before subsequent edits.
3. Inspect the result with bricks-get-page, then open the draft in Bricks and check the frontend at desktop and mobile widths. Confirm the cards remain editable and the contact link has the intended destination.

This is an illustrative walkthrough based on the Bricks tool contract, not a recorded execution. Global class creation, component authoring and template conditions are outside this adapter. A successful save still needs visual review.