What exactly is Bricks MCP?

Bricks MCP is a Model Context Protocol (MCP) server that exposes 110+ tools for AI agents to build WordPress websites using Bricks Builder. It includes a TypeScript MCP server and a WordPress plugin that provides the REST API bridge.

Which AI agents work with it?

Any MCP-compatible agent — Claude (via Claude Code, Claude Desktop, or API), ChatGPT with function calling, and any custom agent implementing the MCP protocol. It’s model-agnostic.

Do I need to know how to code?

No. You describe your site in plain English — colors, layout, content — and the AI agent handles all the JSON structures, CSS properties, and Bricks element configuration.

Does it replace the Bricks visual editor?

No — it complements it. Use MCP to scaffold pages quickly, then fine-tune in the visual editor. Both approaches work on the same underlying data.

How does responsive design work?

Every section is built with mobile breakpoints. The bricks_auto_responsive tool can also scan and fix responsive issues across entire pages automatically.

Is it free and open source?

Yes. Bricks MCP is MIT-licensed. You need a valid Bricks Builder license ($79+) for your WordPress site.

Can I use it on existing sites?

Absolutely. Bricks MCP reads your existing design system, pages, templates, and content before making any changes. It builds on what you already have.

Open Source • 110+ MCP Tools

Build WordPress Sites with AI, Not Clicks.

Bricks MCP connects AI agents directly to Bricks Builder. Design systems, responsive pages, templates, WooCommerce stores — all generated programmatically through natural language.

Get Started View on GitHub

// One tool call → Full responsive hero section
bricks_add_section({
  page_id: 42,
  section: { type: "section", children: [...] }
})

✓ Section added: 12 elements created
✓ Global classes applied: 8 classes
✓ Responsive breakpoints: 5 configured

MCP Tools

Wireframe Categories

Guided Prompts

WordPress Native

FEATURES

Everything Your AI Agent Needs

From design tokens to WooCommerce templates, every tool your AI agent needs to build production-ready sites.

Design System First

Colors, variables, global classes, theme styles — all created before a single element is placed. Zero inline styles.

Section Builder

Build pages section by section with hierarchical JSON. The Translator handles Bricks’ flat format automatically.

Reusable Components

Define a component once with configurable properties. Use it everywhere — update once, changes propagate.

Auto-Responsive

Every grid, padding, and font size gets responsive breakpoints. The auto-responsive tool handles the rest.

Quality Audits

Built-in analysis checks heading hierarchy, color contrast, class usage, accessibility, and SEO.

WooCommerce Ready

Full WooCommerce template support — product pages, shop grids, cart, checkout, account flows.

HOW IT WORKS

From Prompt to Production in Minutes

Describe Your Vision

Tell the AI what you want: layout, colors, content, functionality. Plain English.

Design System Generated

The agent builds your color palette, typography scale, spacing variables, and reusable classes.

Pages Come to Life

Sections are assembled with proper hierarchy, responsive rules, global classes, and native Bricks elements.

Audit & Launch

Auto-responsive pass, quality audit, SEO configuration — then publish to production.

TOOLS

110+ Tools at Your Agent's Disposal

Manage colors with bricks_create_color_palette, global classes with bricks_create_classes_batch, CSS variables with bricks_create_variables_batch, theme styles with bricks_update_theme_styles, and custom fonts with bricks_upload_font. Build your entire design foundation in minutes.
Create pages with bricks_create_page, add sections with bricks_add_section, insert, update, move, and delete individual elements. Configure SEO, page settings, and set the homepage — all programmatically.
Build header and footer templates with bricks_create_template, set display conditions with scoring, and create popups with custom triggers, animations, and frequency limits.
Create reusable components with bricks_create_component and configurable properties. Track where components are used, update globally, and maintain consistency across hundreds of pages.
Set up query loops for posts, terms, and users. Connect dynamic data tags like Bricks MCP — Build WordPress Sites with AI, {featured_image_url}, and ACF fields. Build forms with 15+ field types and 8+ submission actions.
Run page audits with bricks_analyze_page, site-wide checks with bricks_audit_site, auto-fix issues, check performance, and ensure every page meets accessibility and SEO standards.

// Step 1: Create a global class
bricks_create_global_class({
  name: "heading-section",
  settings: {
    _typography: {
      font-size: "40px",
      font-weight: "700",
      color: { hex: "#F5F5F7" }
    }
  }
})

// Step 2: Use in a section
bricks_add_section({
  page_id: 42,
  section: {
    type: "section",
    children: [{
      type: "heading",
      settings: { tag: "h2", text: "Features" },
      globalClasses: ["heading-section"]
    }]
  }
})

DEVELOPER EXPERIENCE

Write JSON. Get Pixels.

Every Bricks MCP tool accepts structured JSON and translates it into native Bricks elements. The Style Mapper normalizes CSS properties, the Translator builds the element tree, and the Validator catches errors before they reach your site.

Hierarchical JSON → flat Bricks elements
Auto-remaps 50+ CSS property aliases
Responsive breakpoints in every section
Global class resolution by name

USE CASES

Built for Every Workflow

Agency Production

Build client sites 10x faster. AI handles repetitive layout work — you focus on creative direction and strategy.

Rapid Prototyping

Go from wireframe to working Bricks page in minutes. Iterate designs through conversation, not click-drag.

Design System Management

Maintain consistency across 50+ page sites. Every color, class, and component managed from a single source of truth.

Learning Bricks

New to Bricks Builder? Let the AI scaffold your first site while you learn how elements and classes work.

E-commerce Launch

Full WooCommerce store setup — product templates, shop grids, cart, checkout — all through MCP tools.

FAQ

Common Questions

What exactly is Bricks MCP?
Bricks MCP is a Model Context Protocol (MCP) server that exposes 110+ tools for AI agents to build WordPress websites using Bricks Builder. It includes a TypeScript MCP server and a WordPress plugin that provides the REST API bridge.
Which AI agents work with it?
Any MCP-compatible agent — Claude (via Claude Code, Claude Desktop, or API), ChatGPT with function calling, and any custom agent implementing the MCP protocol. It’s model-agnostic.
Do I need to know how to code?
No. You describe your site in plain English — colors, layout, content — and the AI agent handles all the JSON structures, CSS properties, and Bricks element configuration.
Does it replace the Bricks visual editor?
No — it complements it. Use MCP to scaffold pages quickly, then fine-tune in the visual editor. Both approaches work on the same underlying data.
How does responsive design work?
Every section is built with mobile breakpoints. The bricks_auto_responsive tool can also scan and fix responsive issues across entire pages automatically.
Is it free and open source?
Yes. Bricks MCP is MIT-licensed. You need a valid Bricks Builder license ($79+) for your WordPress site.
Can I use it on existing sites?
Absolutely. Bricks MCP reads your existing design system, pages, templates, and content before making any changes. It builds on what you already have.

Ready to Build with AI?

Install the WordPress plugin, connect your AI agent, and start building production-ready sites in minutes.

Get Started Read the Docs