Elemental series March 30, 2026

Respira × Bricks Builder

Respira 5.4 Elemental: Bricks Deep Intelligence

172 MCP tools — 20 dedicated to Bricks Builder. Cross-site element search. Page health diagnostics. Automatic.css integration. Query loop discovery. Style profiling. Design system export. Optimistic locking for safe concurrent edits.

Plugin 5.4.0 MCP Server 5.4.0 7 new tools
Download 5.4.0 Read the full story
Total MCP tools
172
New in this release
7
Bricks-dedicated tools
20
New capability
ACSS integration

Problem 1

Finding a Bricks element means scanning every page manually

Shipped fix

Cross-site search finds any element by type, class, or content across all pages

Problem 2

No way to detect broken references or orphaned elements

Shipped fix

Page health check diagnoses missing parents, empty containers, and broken IDs

Problem 3

Automatic.css classes are invisible to AI tools

Shipped fix

ACSS detection and import bring framework classes into the AI workflow

Inspired by the competition

This release was driven by a competitive analysis of AgentToBricks — a dedicated Bricks-only MCP tool. Every gap identified became a shipped feature. Respira now matches or exceeds every Bricks-specific capability while supporting all 11 page builders.

The Bricks logo and brand identity are the property of Jeremias Jenal / Jeremywebsites. Their use here is purely illustrative of product compatibility. Respira is not affiliated with, endorsed by, or an officially recognised solution of Bricks. All trademarks belong to their respective owners.

The Elemental series continues

Bricks Builder deserved more than basic support. Now it gets deep intelligence.

The Elemental series is about giving every page builder the intelligence it deserves. Respira 5.2 Elemental laid the foundation — surgical element editing, per-builder intelligence modules, and 13 dedicated Bricks tools for global classes, theme styles, color palettes, typography, and components. That was a strong start. But a competitive analysis revealed gaps: no way to search across pages, no health diagnostics, no Automatic.css integration, and no protection against concurrent edits.

5.4 closes every gap. Seven new tools bring Bricks to 20 dedicated MCP tools — more than any other builder in Respira. Cross-site element search lets AI find any heading, image, or button across your entire site in one call. Page health check diagnoses structural problems before they become visible bugs. And Automatic.css integration means AI can use your design framework instead of hardcoding pixel values.

The headline feature that benefits all builders is optimistic locking. Every content extraction now includes a hash of the current content. When you inject changes, including that hash triggers conflict detection — if someone else edited the page between your read and write, you get a clear error instead of silently overwriting their work. It is backward-compatible: skip the hash and nothing changes.

What changed

AI searches for all hero headings across a 40-page Bricks site — one call, results in seconds.

AI runs a health check before editing — catches 3 orphaned elements and a duplicate ID before they cause layout issues.

AI detects Automatic.css and imports utility classes — uses text--lg instead of font-size: 18px.

Two AI agents edit the same page — the second one gets a conflict error instead of silently overwriting the first.

Every scenario above works automatically in 5.4. Bricks tools activate when Bricks is detected.

Problem 1 to Fix 1

Finding a specific element meant reading every page one by one.

A Bricks site with 40 pages has hundreds of elements. Finding all instances of a specific heading, a CSS class, or a widget type required reading every page individually and scanning through the element tree. For AI agents, that is 40 API calls before any editing begins.

  • What the user experienced

    Slow site-wide searches. AI had to read pages sequentially, consuming tokens and time to find a single element.

  • Why it happened

    Element search was page-scoped. No cross-page query existed for Bricks content stored in _bricks_page_content_2 post meta.

  • What shipped

    search_bricks_elements queries all Bricks pages in one call. Search by element name (heading, image, button), CSS class, or text content. Returns matching elements with page IDs and tree positions.

  • Benefit

    One API call replaces 40. AI finds every instance of a heading style, a CSS class, or a text string across the entire site instantly.

Search approach comparison

Finding all hero headings across a 40-page Bricks site

New in 5.4
Before (page-by-page) API calls
list_pages()

Get all 40 page IDs

1
find_element(page_1) ... find_element(page_40)

Search each page individually for heading elements

40

41 API calls, sequential execution, thousands of tokens to find elements spread across the site.

After (cross-site search) API calls
search_bricks_elements({type: "heading"})

Finds all headings across all pages in one query

1

1 API call. Results include page ID, element ID, content preview, and tree position for every match.

Cross-site search uses direct database queries on _bricks_page_content_2 meta for efficiency. Search by element type, CSS class name, or text content.

Problem 2 to Fix 2

Broken element references and structural issues were invisible until the page broke.

Bricks stores elements as a flat array with parent/children references. When an element points to a non-existent parent, or a container has no children, or two elements share the same ID — the page looks fine until an edit triggers a cascade of layout issues.

  • What the user experienced

    AI edits caused unexpected layout shifts. Elements appeared in wrong positions or disappeared entirely after seemingly unrelated changes.

  • Why it happened

    No diagnostic tool existed for Bricks page structure. Orphaned elements, broken references, and duplicate IDs accumulated silently over time.

  • What shipped

    bricks_health_check runs a full structural diagnostic. Detects orphaned elements, empty containers, duplicate IDs, and broken parent references. Returns severity levels and specific fix recommendations.

  • Benefit

    AI can diagnose and fix structural issues before they cause visible problems. Run health check before editing, fix issues first, then make content changes on a clean foundation.

Diagnostic behavior comparison

Editing a page with hidden structural issues

New in 5.4
Before (no diagnostics) Outcome
AI edits heading in a section

Page has 3 orphaned elements and a duplicate ID

Edit
Edit triggers re-render

Orphaned elements shift layout, duplicate ID causes wrong element to update

Broken

The edit itself was correct, but hidden structural issues caused cascading failures.

After (health check first) Outcome
bricks_health_check(page_id)

Finds 3 orphaned elements and 1 duplicate ID

Diagnosed
AI fixes structural issues first

Removes orphans, resolves duplicate ID

Fixed
AI edits heading on clean page

Edit applies cleanly with no side effects

Clean
Health check returns a structured report with severity levels (error, warning, info) and specific fix recommendations for each issue found.

Problem 3 to Fix 3

AI hardcoded pixel values instead of using the design framework already on the site.

Automatic.css is the most popular CSS framework for Bricks Builder. It provides utility classes for spacing, typography, colors, and layout. But AI tools could not see these classes — they would set font-size: 18px instead of applying the text--lg class that the design system defines.

  • What the user experienced

    AI edits created one-off styles that drifted from the design system. The site looked inconsistent, and updating the ACSS config did not affect AI-created elements.

  • Why it happened

    ACSS classes existed only in the CSS framework, invisible to Bricks global classes and therefore invisible to AI tools browsing the design system.

  • What shipped

    bricks_detect_acss identifies Automatic.css via three fallback methods. bricks_import_acss brings utility classes into Bricks global classes where AI can discover and apply them.

  • Benefit

    AI edits use the same design tokens as hand-crafted elements. When you update your ACSS configuration, AI-created elements update automatically.

Styling approach comparison

AI sets a heading size on a Bricks + ACSS site

New in 5.4
Before (hardcoded values) Result
AI sets font-size: 18px

Inline style, ignores ACSS design tokens

Hardcoded
User updates ACSS --text-lg to 20px

AI element stays at 18px — design drift

Broken

AI-created elements drift from the design system. Every ACSS config change leaves AI elements behind.

After (ACSS integration) Result
AI applies class “text--lg”

Uses ACSS utility class from imported global classes

Token-based
User updates ACSS --text-lg to 20px

AI element updates automatically — design stays consistent

Consistent
ACSS detection uses three fallback methods: active plugins list, PHP class existence check, and WordPress option keys. If Automatic.css is present in any form, Respira finds it.

Closing

The deepest Bricks integration in any AI WordPress tool.

20 dedicated tools. Cross-site search. Health diagnostics. ACSS integration. Query loop awareness. Style profiling. Full design system export. No other AI tool — not AgentToBricks, not any WordPress MCP server — comes close to this level of Bricks-specific intelligence.

And unlike single-builder tools, these capabilities sit alongside Respira’s 131 core tools and 21 WooCommerce tools. The same AI assistant that deep-edits your Bricks site can also manage your WooCommerce store, run accessibility audits, analyze SEO, and handle media operations. One tool, one MCP connection, full WordPress control.

Optimistic locking is the quiet hero of this release. It protects every builder, not just Bricks. When two people — or two AI agents — edit the same page, the second write gets a clear conflict error instead of silently overwriting the first. It is the kind of safety feature you never notice until you need it.

What shipped in 5.4

Seven new tools, one optimistic lock, and a complete design system API.

The cross-site search and health check are the headline features, but the design system tools matter for daily use. Style profiling and design system export let AI understand your site’s visual language before making changes — no more guessing at colors and spacing.

Feature 1

Cross-site element search

Before this release, finding a specific Bricks element meant reading every page one by one. Now search_bricks_elements scans all pages with Bricks content in a single call. Search by element type (heading, image, button), CSS class, or text content. Returns the element, its page, and its position in the tree.

  • Search by element type, CSS class, or text content
  • Returns element details, page ID, and tree position
  • Scans all Bricks pages in one API call

Feature 2

Page health check and diagnostics

bricks_health_check runs a full diagnostic on any Bricks page. It detects orphaned elements (children pointing to non-existent parents), empty containers, duplicate element IDs, and broken parent references. The health report includes severity levels and specific fix recommendations.

  • Detects orphaned elements and broken parent references
  • Finds empty containers and duplicate element IDs
  • Returns severity levels with actionable fix recommendations

Feature 3

Automatic.css integration

Bricks sites using Automatic.css now get full AI integration. bricks_detect_acss identifies the ACSS installation and its configuration. bricks_import_acss brings ACSS utility classes into Bricks global classes where AI tools can discover and apply them. The AI can now use your design framework instead of fighting it.

  • Auto-detects Automatic.css via plugins, PHP class, and options
  • Imports ACSS utility classes as Bricks global classes
  • AI uses your existing design framework instead of hardcoded values

  • Query loop discovery

  • Style profile analysis

  • Full design system export

  • Optimistic locking

Try it

Example prompts you can use today

These are real prompts you can paste into Claude, Cursor, or any MCP-connected AI agent. Each one maps to one or more Bricks Deep Intelligence tools under the hood.

Cross-site element search

search_bricks_elements

Prompt

Find every heading on my Bricks site that contains the word “2025” — I need to update them all to “2026”.

What happens

  1. search_bricks_elements scans all pages for headings containing “2025”
  2. Returns each match with page ID, element ID, and full text content
  3. AI uses update_element on each match to change “2025” to “2026”
  4. One search call replaces 40+ individual page reads

Pre-edit health check

bricks_health_check

Prompt

Before you edit the homepage, run a health check to make sure there are no structural issues. Fix anything you find, then update the hero section.

What happens

  1. bricks_health_check scans the page for orphaned elements, duplicate IDs, and empty containers
  2. AI reviews the diagnostic report and fixes any issues found
  3. With a clean page structure, AI proceeds to edit the hero section
  4. No surprise layout shifts from hidden structural problems

ACSS-aware styling

bricks_detect_acss + bricks_import_acss

Prompt

Check if this site uses Automatic.css. If it does, import the utility classes and then build a new testimonial section using ACSS classes for spacing and typography.

What happens

  1. bricks_detect_acss confirms Automatic.css is active and returns its config
  2. bricks_import_acss imports ACSS utility classes into Bricks global classes
  3. AI builds the testimonial section using ACSS classes (space--m, text--lg) instead of inline styles
  4. New section inherits the design system and responds to ACSS config changes

Query loop analysis

bricks_query_loops

Prompt

Show me all the query loops on the blog page. I want to understand what data sources they're pulling from before I modify the layout.

What happens

  1. bricks_query_loops discovers all loops with hasLoop/query settings
  2. Returns source type (posts, products, taxonomy), pagination, and filter config
  3. AI understands the dynamic content structure before touching the layout
  4. Editing the loop template becomes informed instead of guesswork

Design replication

bricks_style_profile

Prompt

Analyze the design of my About page — colors, fonts, spacing, layout patterns. Then build a new Careers page that matches the same visual style.

What happens

  1. bricks_style_profile extracts the color palette, typography scale, and spacing rhythm
  2. AI creates a design brief from the profile data
  3. build_page generates the Careers page using the extracted design tokens
  4. New page is visually consistent with the existing About page

Design system audit

bricks_design_system

Prompt

Export the full design system for this Bricks site — I want to see all global classes, theme styles, colors, and typography in one place. Are there any inconsistencies?

What happens

  1. bricks_design_system exports global classes, theme styles, color palette, typography, and components
  2. AI analyzes the export for inconsistencies: unused classes, conflicting colors, mismatched fonts
  3. Returns a design system audit with specific recommendations
  4. One call replaces five separate API calls for each design system component

Technical details

What shipped

  • Cross-site element search — find any Bricks element by type, CSS class, or text content across all pages in one call
  • Page health check — diagnose orphaned elements, empty containers, missing parents, and duplicate IDs on any Bricks page
  • Automatic.css detection — multi-fallback detection via active plugins, PHP class existence, and option keys
  • ACSS class import — bring Automatic.css utility classes into Bricks global classes for AI-accessible styling
  • Query loop discovery — find all Bricks query loops with their source types, pagination settings, and filter configurations
  • Style profile analysis — extract the design DNA of any page: color palette, typography scale, spacing rhythm, and layout patterns
  • Full design system export — one-call export of global classes, theme styles, color palette, typography, and components
  • Optimistic locking — contentHash on extract, conflict detection on inject prevents concurrent edit overwrites (backward-compatible)

Breaking changes

None in this release

  • No breaking changes. New Bricks tools activate automatically when Bricks is detected.
  • Optimistic locking is backward-compatible — skip the contentHash and behavior is unchanged.
  • All existing Respira settings, snapshots, and configurations are preserved.

Migration guide

What to do next

  • Update the plugin to 5.4.0 from your WordPress dashboard.
  • Update MCP server: npm i -g @respira/wordpress-mcp-server@5.4.0
  • New Bricks tools activate automatically — no configuration needed.
  • ACSS detection works if Automatic.css is active — no setup required.
  • Optimistic locking is backward-compatible — existing workflows are unaffected.

How to upgrade

Coordinated release — update both plugin and MCP server.

Plugin

WordPress Admin -> Plugins -> Update Respira for WordPress to 5.4.0

MCP Server

# Update to 5.4.0 for Bricks Deep Intelligence
npm i -g @respira/wordpress-mcp-server@5.4.0
# Or use npx (always runs latest):
npx -y @respira/wordpress-mcp-server

Verify Bricks Deep Intelligence

  1. Update to 5.4.0 from your WordPress dashboard.
  2. Ask your AI assistant to run get_builder_info and confirm Bricks shows “Full Intelligence” with 20 tools.
  3. Test cross-site search: ask AI to find all headings across your site.
  4. If using Automatic.css, ask AI to detect and import ACSS classes.

Previous release

Before 5.4 went deep on Bricks, 5.2 taught AI to speak every builder’s language.

The first release in the Elemental series. Surgical element-level editing, per-builder intelligence modules for 11 builders, declarative page creation in one call, and the first 13 dedicated Bricks tools that made 5.4 possible.

Read the 5.2 Elemental story

Thank you

Built by studying the competition

This release started with a competitive analysis. AgentToBricks showed what a dedicated Bricks MCP tool could look like. Every gap identified became a shipped feature. The result is the deepest Bricks integration in any multi-builder AI tool — 20 dedicated tools that match or exceed what single-builder tools offer, while still supporting all 11 page builders.