bricks-mcp

The most comprehensive open-source MCP server for Bricks Builder.

100+ tools to manage pages, templates, styles, SEO, content, and more — directly from Claude Code, Cursor, Windsurf, or any MCP-compatible AI assistant.

Architecture

Claude Code / Cursor / AI Assistant
        ↕ MCP Protocol (stdio)
   bricks-mcp (Node.js)
        ↕ REST API (Basic Auth)
   bricks-api-bridge (WordPress Plugin)
        ↕ PHP
   WordPress + Bricks Builder

The MCP server communicates with your WordPress site through the included REST API plugin. Your AI assistant gets full control over Bricks Builder — reading pages, updating elements, managing styles, and building sections.

Quick Start (5 Minutes)

1. Install the WordPress Plugin

The plugin/ folder in this repo contains the Bricks API Bridge WordPress plugin. Choose one of these install methods:

Option A: ZIP Upload (easiest)

1. Download the latest release ZIP or download this repo as ZIP
2. Extract and create a ZIP of just the plugin/ folder, renamed to bricks-api-bridge/
3. Go to WordPress Admin → Plugins → Add New → Upload Plugin
4. Upload the ZIP and click "Install Now"
5. Click "Activate"

Option B: Manual Upload via FTP/SSH

1. Clone this repo or download it
2. Copy the plugin/ folder to your WordPress installation:

   cp -r plugin/ /path/to/wordpress/wp-content/plugins/bricks-api-bridge/
   

3. Go to WordPress Admin → Plugins → Activate "Bricks API Bridge"

Option C: WP-CLI

# From the repo root
cd plugin && zip -r ../bricks-api-bridge.zip . && cd ..
wp plugin install bricks-api-bridge.zip --activate

After activation, the plugin registers REST API endpoints under /wp-json/bricks-bridge/v1/. No configuration needed — it works out of the box with WordPress Application Passwords.

2. Create an Application Password

In WordPress Admin → Users → Your Profile → Application Passwords:

• Enter a name (e.g., "MCP Server")
• Click "Add New Application Password"
• Copy the generated password

3. Install the MCP Server

git clone https://github.com/developer2013/bricks-mcp-open.git
cd bricks-mcp-open
npm install   # or: bun install

4. Configure Credentials

Copy .env.example to .env and fill in your details:

cp .env.example .env

WORDPRESS_URL=https://your-site.com
WORDPRESS_USER=your-username
WORDPRESS_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

5. Add to Your AI Assistant

Claude Code — add to ~/.claude/.mcp.json:

{
  "mcpServers": {
    "bricks": {
      "command": "node",
      "args": ["/path/to/bricks-mcp-open/index.js"]
    }
  }
}

Or with Bun (faster startup):

{
  "mcpServers": {
    "bricks": {
      "command": "bun",
      "args": ["/path/to/bricks-mcp-open/index.js"]
    }
  }
}

Claude Code iOS / Android App — open Settings → MCP Servers → Add Server:

1. Name: bricks
2. Command: node (or bun)
3. Arguments: /path/to/bricks-mcp-open/index.js
4. Environment Variables:
   • WORDPRESS_URL = https://your-site.com
   • WORDPRESS_USER = your-username
   • WORDPRESS_APP_PASSWORD = xxxx xxxx xxxx xxxx xxxx xxxx

This gives you full MCP access from your phone — manage pages, update styles, run SEO audits, all from the Claude Code app.

Tip: On iOS, the MCP server runs on your Mac via Claude Code's remote connection. Make sure Claude Code desktop is running and paired with the mobile app.

Cursor / Windsurf — add the same config to .cursor/mcp.json in your project.

6. Test the Connection

Ask your AI assistant:

"Use the bricks_connection_test tool to verify my WordPress connection."

Tool Categories (100+ Tools)

Multi-Site Support

Manage multiple WordPress sites from a single MCP server. Copy sites.json.example to sites.json:

{
  "default": "production",
  "sites": {
    "production": {
      "label": "Live Site",
      "url": "https://your-site.com",
      "username": "admin",
      "password": "xxxx xxxx xxxx xxxx xxxx xxxx"
    },
    "staging": {
      "label": "Staging",
      "url": "https://staging.your-site.com",
      "username": "admin",
      "password": "xxxx xxxx xxxx xxxx xxxx xxxx"
    }
  }
}

Switch sites at runtime:

"Switch to the staging site."

Usage Examples

Build a page section

"Create a hero section on page 42 with a full-width background, centered heading 'Welcome', a subtitle, and a CTA button."

Manage styles

"Update the color palette — set the primary color to #2563EB and secondary to #7C3AED."

SEO optimization

"Run an SEO audit on all published pages and auto-fix missing meta descriptions."

Backup before changes

"Create a snapshot of page 42 named 'before-redesign', then update the hero section."

Plugin Features

The included WordPress plugin (bricks-api-bridge) provides:

• REST API endpoints for all Bricks Builder data
• Security hardening — rate limiting, user enumeration protection, security headers
• Responsive inference — automatic mobile/tablet breakpoint generation
• Element validation — catches invalid IDs, broken parent-child links
• Auto-fix — corrects common CSS issues (overflow, grid, container width)
• Backup system — multi-slot backups + named snapshots
• Design token import/export — JSON, ACSS, Tailwind formats

Feature Comparison

Requirements

• Node.js >= 18 or Bun >= 1.0
• WordPress >= 6.0
• Bricks Builder >= 2.0
• PHP >= 8.0

Agent Service (Autonomous Page Builder)

The agent-service/ directory contains an autonomous agent that builds entire WordPress pages from industry briefs — using Claude + the MCP server in a 5-phase pipeline:

Industry Brief → Historian → Design → Code → Update → QA → Fix Loop

• Build from your iPhone or Android — Use the Telegram bot or the Claude Code mobile app as your control center: trigger builds, QA, fixes, and screenshots from anywhere
• CLI Mode — Single builds or overnight batch processing
• Budget Control — Per-phase cost caps, total cost tracking
• Docker Ready — Deploys to Railway, Fly.io, or any container host

See agent-service/README.md for setup instructions.

Premium

Looking for more? The premium edition includes 260+ tools with:

• AI Build Pipeline — Build entire pages from a URL in one command
• Learning System — Remembers CSS fixes and improves over time
• Math Library — 33 modules for design tokens, color harmony, spring physics
• Visual QA — Puppeteer screenshots, pixel comparison, accessibility audits
• Design Intelligence — Brand archetypes, competitive benchmarking, typography suggestions
• WooCommerce, ACF, Gravity Forms integrations
• Bio-inspired animations — Levy stagger, density-intensity, quorum sensing

Contact us for premium access

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT License. See LICENSE.