Products
MCP Integration
Generate and modify Bricks Builder sections from a plain conversation: describe what you need and your AI client builds it and pushes it straight to your WordPress site. No API keys required, and it works with Claude Desktop, Claude Code, Codex, Cursor, VS Code and Windsurf.
What you need
- A Pro LTD license. MCP is not available on the Essential plan. See pricing
- An AI subscription, separate from Bricksfusion: Claude Pro or Max from claude.ai, or ChatGPT Plus, Pro, Business, Edu or Enterprise from chatgpt.com
- The Bricksfusion Animations and Studio plugins installed and activated on your WordPress site. Not there yet? Follow the Installation guide first
- Node.js, but only for Cursor, VS Code and Windsurf. Claude Desktop and Claude Code connect directly without it
Common setup
Three steps, identical for every AI client. Do them once, then jump straight to your client's section below.
Install Node.js (only if your client needs it)
Claude Desktop and Claude Code connect to Bricksfusion directly, no Node.js involved. Cursor, VS Code and Windsurf need it. If you already have it, or you are on 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 every screen without changing any settings.
Windows
Download the .msi file. Double-click it, click Next on every screen, then Finish.
Mac
Download the .pkg file. Double-click it, click Continue on every screen, then Install.
Verify it: open a terminal and type node --version. A number like v20.x.x or higher means you are ready.
Configure your Design System
Open Dashboard → Design System on Bricksfusion and make sure your framework, colors and spacing are set. This is what the AI reads every time it generates a section for your project.
Already configured it for the wireframe library or Studio? You are done here. If not, select your CSS framework and customize the settings; changes save automatically.
Create your MCP connection
Open Dashboard → MCP. First time? Click Add site and give it a name; your MCP token is generated automatically.
In the Design System section, click Sync to this site. That sends your framework, colors and spacing to the MCP server.
Sync after every Design System change
Design System edits do not reach the AI on their own. Click Sync to this site again every time you change something.
That is the shared part done. Now pick your AI client and follow its setup below.
Claude Desktop
Install Claude Desktop
Already use the Claude Desktop app? Skip to step 5. If you only use Claude in the browser at claude.ai, you need the desktop app: download it for your operating system from claude.com/download, install it and sign in with the same account you use at claude.ai.
Add Bricksfusion as a Custom ConnectorRecommended
The simplest way to connect. No config files, no terminal, no Node.js, no dependencies:
- In your MCP dashboard, open the Claude Desktop tab and copy the URL shown in the Recommended section.
- In Claude Desktop, go to Settings, then Connectors.
- Click +, then Add custom connector.
- Paste the URL and click Add. The Bricksfusion tools appear immediately.
Works on the web too
The same steps connect Bricksfusion in claude.ai and Cowork.
Alternative: edit the config file manually (requires Node.js)
In the Claude Desktop tab of your MCP dashboard, expand the manual config section and click Copy.
The easiest way to open the config file is from Claude Desktop itself: go to Settings → Developer and click Edit Config. Or open it directly:
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. With 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 Anthropic's command-line AI tool. It connects directly over HTTP, so there are no dependencies to install.
Run the connect command
Open the Claude Code tab in your MCP dashboard, copy the command shown and run it in your terminal. It connects directly over HTTP; no Node.js bridge needed.
Then 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 and runs on your existing ChatGPT subscription. The same MCP token and design system work with all clients.
Install Codex Desktop
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, install it and sign in with the same ChatGPT account you use at chatgpt.com.
Add Bricksfusion in Codex settings
Codex has a built-in UI for adding MCP servers, so this is simpler than editing config files. 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, adding arguments one by one with + Add argument. Click Save.
Restart Codex and verify
Close Codex completely (Cmd + Q on Mac, not just closing the window) and reopen it. In a new chat, 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 (see step 1). Open your MCP dashboard, select the tab that matches your client and copy the config block into the settings file it points to. Each tab shows the exact file path and format for that client.
Multi-Site MCP for agencies
Managing multiple client sites? Create a separate MCP profile for each one. Every profile carries its own unique token, its own framework and design system, its own Site Connection and its own generation settings.
It all lives behind 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 coexist without overwriting each other.
A different framework for every client
Switch to that client's 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
Optional, but this is where MCP earns its keep. Connecting your WordPress site lets your AI client read your existing pages and add, replace or remove sections directly, with no copy and paste. It also reads your content structure (post types, taxonomies and custom fields) so it can generate sections connected to your real content. The steps are the same for every AI client.
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.
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 and open Settings → Bricksfusion MCP in the left sidebar. Paste the Site Token you just copied into the token field and click Save Token.
The same token must live in both places, your Bricksfusion dashboard and your WordPress settings. That pair creates the secure connection between your AI client and your site.
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 connects to your WordPress site and shows every page that uses Bricks Builder. From here you can read any page, add new sections at any position, replace existing sections or remove them:
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
Refresh Bricks to see the changes
Pushed changes are not visible in real time. Open your page in Bricks Builder, or refresh the editor, after the AI writes.
Generation context
The MCP dashboard includes a Generation Context section with optional settings that raise the quality of every generated section. Set them now or come back later.
Language
Set the language for all generated text. 23 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 390+ 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 5 frameworks supported
Vanilla, ACSS, Core Framework, AT Framework and Bricks Builder Design Tokens. Sections are generated with 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, and 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 Settings → 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 it 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.
Where to go next
Studio
The AI studio inside the Bricks editor: providers, modes and every feature.
Library & Layouts
Browse 390+ wireframes with filters, tags and framework switching.
Installation
From checkout to your first pasted section, in about five minutes.
Design System
Configure the framework, colors, spacing and typography MCP syncs from.