MCP Integration

Your AI client needs a small program called Node.js to connect to Bricksfusion. This is a one-time installation. If you already have Node.js installed, 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.

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.

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.

Go to Dashboard, MCP on Bricksfusion. You will see three sections: Connection, Design System, and Generation Context.

In the Connection section, your MCP token is already generated. Check that it shows Active with a green dot. If it shows Inactive, click Activate.

In the Design System section, click Sync to MCP. This sends your framework, colors, and spacing to the MCP server. You need to click this button every time you change your Design System.

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.

This is the most important step. You need to edit a small configuration file on your computer to tell Claude Desktop about Bricksfusion.

First, go to the Connection section of your MCP dashboard. Select the Claude Desktop tab and click the Copy button to copy the JSON configuration.

Now you need to find and edit the Claude Desktop configuration file on your computer:

If your file is empty or does not exist, paste the entire JSON from the dashboard. It looks like this:

{
  "mcpServers": {
    "bricksfusion": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://studio.bricksfusion.com/api/mcp?token=YOUR_TOKEN"
      ]
    }
  }
}

If your file already has other MCP servers, add Bricksfusion inside the existing mcpServers block with a comma separating entries:

{
  "mcpServers": {
    "other-tool": {
      "command": "...",
      "args": ["..."]
    },
    "bricksfusion": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://studio.bricksfusion.com/api/mcp?token=YOUR_TOKEN"
      ]
    }
  }
}

After saving the configuration file, fully close and reopen Claude Desktop.

Open Claude Desktop and start a new conversation. Look at the bottom of the chat input for a small B icon among the connected tools. That icon means Bricksfusion is connected.

Type your first prompt to test:

Using bricksfusion, generate a hero section for a fitness gym with dark background

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.

This is simpler than Claude Desktop because Codex has a built-in UI for adding MCP servers. No configuration files to edit.

Go to Settings (bottom left), then MCP servers, then click + Add server.

Fill in the following fields:

Add arguments one by one using + Add argument. Copy the full URL with your token from the MCP dashboard (select the Codex Desktop tab for the exact URL). Click Save.

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

You should see all 8 tools listed. From there, you can generate sections, search wireframes, and manage your WordPress pages in natural language.

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.

Log in to your WordPress admin panel. In the left sidebar, go to Settings, BricksFusion MCP. Paste the Site Token you copied in Step 8 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.

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

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.