MCP Integration
Generate and modify Bricks Builder sections directly from your AI client. Describe what you need in a conversation, and the AI creates the section and pushes it to your WordPress site. No API keys required. Works with Claude Desktop, Claude Code, Codex, Cursor, VS Code, and Windsurf.
Before you start
- A Pro LTD license. MCP is not available on the Essential plan. See pricing
- An AI subscription: Claude Pro or Max from claude.ai, or ChatGPT Plus, Pro, Business, Edu, or Enterprise from chatgpt.com. This is your AI subscription, separate from Bricksfusion.
- Bricksfusion Animations and Studio plugins installed and activated on your WordPress site. If you have not done this yet, follow the Installation guide first.
- Node.js is only required for Cursor, VS Code, and Windsurf. Claude Desktop and Claude Code connect directly without it.
Common setup
These steps are the same regardless of which AI client you use.
Install Node.js (only if needed)
Claude Desktop and Claude Code connect to Bricksfusion directly without Node.js. If you use Cursor, VS Code, or Windsurf, you need Node.js installed. If you already have it or are using Claude, skip to Step 2.
Go to nodejs.org and download the version labeled LTS (the one on the left). Run the installer and click Next through all steps. Do not change any settings.
Windows
Download the .msi file. Double-click it. Click Next on every screen. Click Finish.
Mac
Download the .pkg file. Double-click it. Click Continue on every screen. Click Install.
To check that it installed correctly, open a terminal and type node --version. If you see a number like v20.x.x or higher, you are ready.
Configure your Design System
Go to Dashboard, Design System on Bricksfusion and make sure your framework, colors, and spacing are set up. This is what the AI uses when generating sections for your project.
If you already configured your Design System for the wireframe library or Studio, you are ready. If not, select your CSS framework and customize the settings. Changes save automatically.
Set up your MCP connection
Go to Dashboard, MCP on Bricksfusion. If this is your first time, create your first site by clicking Add site and giving it a name. Your MCP token is generated automatically.
In the Design System section, click Sync to this site. This sends your framework, colors, and spacing to the MCP server. You need to click this button every time you change your Design System.
Now choose your AI client and follow the setup instructions below.
Claude Desktop
Install Claude Desktop
If you already use the Claude Desktop app on your computer, skip to Step 5. If you only use Claude in the browser at claude.ai, you need the desktop app.
Go to claude.ai/download, download Claude Desktop for your operating system, and install it. Sign in with the same account you use at claude.ai.
Connect Claude Desktop to Bricksfusion
Custom Connector (no Node.js needed)
The simplest way to connect. No config files, no terminal, no dependencies.
- 1.Go to your MCP dashboard and select the Claude Desktop tab. Copy the URL shown in the Recommended section.
- 2.In Claude Desktop, go to Customize, then Connectors.
- 3.Click +, then Add custom connector.
- 4.Paste the URL and click Add. You will see the Bricksfusion tools appear immediately.
This also works in claude.ai and Cowork with the same steps.
▶Alternative: add to config file manually (requires Node.js)
Go to the Claude Desktop tab in your MCP dashboard, expand the manual config section, and click Copy.
Tip: The easiest way to open the config file is through Claude Desktop: go to Settings, Developer, and click Edit Config.
Windows
Press Win + R, type notepad %APPDATA%\Claude\claude_desktop_config.json and press Enter.
Mac
Open Terminal and run open -a TextEdit "$HOME/Library/Application Support/Claude/claude_desktop_config.json"
Paste the JSON, save the file, and fully restart Claude Desktop. This method requires Node.js installed.
Verify the connection
Open Claude Desktop and start a new conversation. If you used the Custom Connector method, your tools are already active. Type your first prompt to test:
Using bricksfusion, generate a hero section for a fitness gym with dark background
Claude Code
Claude Code is a command-line AI tool from Anthropic. It connects directly over HTTP with no dependencies needed.
Connect Claude Code to Bricksfusion
Go to your MCP dashboard and select the Claude Code tab. Copy the command shown and run it in your terminal.
The command connects directly over HTTP. No Node.js bridge is needed. After running it, start Claude Code by typing claude in your terminal and your Bricksfusion tools are ready.
Test with:
List my pages
Codex Desktop
Codex is the AI client from OpenAI. It uses your existing ChatGPT subscription. The same MCP token and design system work with all clients.
Install Codex Desktop
If you already have the Codex Desktop app, skip to Step 5. Codex is included in ChatGPT Plus ($20/mo), Pro ($200/mo), Business, Edu, and Enterprise plans.
Download Codex Desktop for your operating system from OpenAI and install it. Sign in with the same ChatGPT account you use at chatgpt.com.
Add Bricksfusion in Codex settings
This is simpler than editing config files because Codex has a built-in UI for adding MCP servers.
Go to Settings (bottom left), then MCP servers, then click + Add server.
Fill in the fields shown in the Codex tab of your MCP dashboard. Add arguments one by one using + Add argument. Click Save.
Restart Codex and verify
Close Codex completely (Cmd + Q on Mac, not just closing the window) and reopen it.
Open a new chat and type /mcp. You should see bricksfusion listed as Authenticated and Enabled.
Test with a prompt:
List all available tools from the bricksfusion MCP server
Cursor, VS Code, and Windsurf
These clients use a JSON config file and require Node.js installed. Go to your MCP dashboard, select the matching tab, and copy the config block into the settings file indicated. Each tab shows the exact file path and format for that client.
Multi-Site MCP for agencies
If you manage multiple client sites, you can create a separate MCP profile for each one. Every profile has its own unique token, its own framework and design system, its own Site Connection, and its own generation settings.
Manage your sites from the site switcher at the top of the MCP Connection page. Add a site, give it a name, sync its design system, and configure its Site Connection independently. Switch between sites and everything below updates: the token, the config blocks, the design system, and the generation context.
In your AI client, you add one connection per client site, each with its own token. For Claude Desktop, add each site as a separate Custom Connector. For Claude Code, run the add command once per site. Each site generates a unique config key so multiple connections can coexist without overwriting each other.
To give each client site a different framework, switch to that site in the dashboard, change your Design System to match, and click Sync to this site. Each profile keeps its design independently.
Connect your WordPress site
This step is optional but recommended. Connecting your WordPress site lets your AI client read your existing pages, add sections, replace sections, and remove sections directly. No copy and paste needed. It also lets the AI read your content structure: post types, taxonomies, and custom fields, so it can generate sections connected to your real content. This works the same way with all AI clients.
Generate a Site Token
Go to Dashboard, MCP and scroll down to the Site Connection section. Click Generate to create a secure Site Token. Then click Copy to copy it.
In the Site URL field, enter your WordPress site address. For example: https://yoursite.com. This saves automatically.
Add the token to WordPress
Log in to your WordPress admin panel. In the left sidebar, go to Settings, BricksFusion MCP. Paste the Site Token you copied in the previous step into the token field and click Save Token.
This creates a secure connection between your AI client and your WordPress site. The same token must be in both places: your Bricksfusion dashboard and your WordPress settings.
Test the connection
In your AI client, start a new conversation and ask it to list your pages:
Using bricksfusion, list my Bricks pages
It will connect to your WordPress site and show you all pages that use Bricks Builder. From here you can ask to read any page, add new sections, replace existing sections, or remove sections:
Add a testimonials section to my homepage
Replace the hero section on page About with a more modern version
Remove the FAQ section from page Services
Add a grid with my latest properties showing price and bedrooms
After changes are pushed, open your page in Bricks Builder or refresh the editor to see the updates. Changes are not visible in real time. You need to refresh.
Generation context
The MCP dashboard has a Generation Context section with optional settings that improve the quality of generated sections. You can set these now or come back later.
Language
Set the language for all generated text. 22 languages available including English, Spanish, German, French, Portuguese, Japanese, and Chinese.
Wireframe Mode
Controls how the AI uses the wireframe library. Auto lets the AI decide whether to start from a template or generate from scratch. Always uses a wireframe template first. Never generates everything from scratch. Auto is recommended for most users.
Style Instructions
Describe your visual preferences in plain language. For example: "clean minimal aesthetic, rounded corners on cards, tight spacing, subtle borders instead of shadows".
Project Brief
Describe your project, brand, and audience. The AI uses this to write realistic, relevant content instead of generic placeholder text.
What you can do
Generate any type of section
Heroes, feature grids, pricing tables, testimonials, FAQs, contact forms, footers, CTAs, team sections, and more. Your design system, framework, and colors are applied automatically.
Use wireframe templates
The AI can browse the wireframe library with 374 wireframe templates, pick the best one for your request, and customize it with your content and branding.
Read and modify your WordPress pages
With your site connected, the AI can list all your Bricks pages, read their structure, add new sections at any position, replace existing sections, remove sections, or rebuild an entire page from scratch.
Generate sections connected to your content
With your site connected and the latest Bricksfusion AI plugin installed, the AI reads your post types, taxonomies, and custom fields, with the exact Bricks tag for each. Ask for a grid of your latest properties and it builds a native Query Loop wired to your real content. Fields from ACF, Meta Box, JetEngine, and Pods are detected automatically.
All five frameworks supported
Vanilla, ACSS, Core Framework, AT Framework, and Bricks Builder Design Tokens. Sections are generated using the correct variables, spacing tokens, and color system for your framework.
Manage multiple client sites
Create a separate MCP profile for each client, each with its own token, framework, and design system. Connect them all to your AI client simultaneously. See Multi-Site MCP.
Troubleshooting
Bricksfusion tools do not appear in Claude Desktop
If you used the Custom Connector method, go to Customize, Connectors and check that your connector is listed and enabled. If you used the config file method, make sure you fully closed and reopened Claude Desktop after editing the file. On Windows, check the system tray near the clock and quit Claude from there. On Mac, press Cmd+Q.
Claude Code says unknown option
Make sure you are using the command from the Claude Code tab in the dashboard, which uses direct HTTP transport. The older command with npx and mcp-remote may not work on all systems.
Bricksfusion does not show in Codex /mcp
Close Codex completely and reopen it. Verify that the arguments are correct and in order. Check that Type is set to STDIO, not HTTP. Verify Node.js is installed.
Invalid or inactive token error
Go to Dashboard, MCP and check that your token shows Active with a green dot. If you recently regenerated your token, update the token in your AI client configuration and restart the client.
Colors or framework variables are wrong
After changing anything in your Design System, go to Dashboard, MCP and click Sync to this site. Changes to your Design System do not reach the AI automatically.
Cannot list pages or push changes to WordPress
Check three things: your Site URL is correct in the MCP dashboard, the same Site Token is saved in WordPress at Settings, BricksFusion MCP, and your WordPress site is publicly accessible (not running on localhost).
Changes do not appear in Bricks Builder
After the AI pushes changes, refresh the Bricks Builder editor. If you had Bricks open, close the editor without saving, then reopen the page. If you save in Bricks after the AI writes, Bricks will overwrite the changes.
Tools disconnect between sessions
Start a new conversation. MCP tools sometimes disconnect between sessions. If the connection drops, close your AI client completely and reopen it.