MCP for Claude Desktop

Claude Desktop 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.

If you already use the Claude Desktop app on your computer, skip to Step 3. 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.

Go to Dashboard, Design System on Bricksfusion and make sure your framework, colors, and spacing are set up. This is what Claude 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 so Claude can use them. You need to click this button every time you change your Design System.

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. You will see a block labeled Claude Desktop Configuration with a JSON code snippet. Click the Copy button to copy it.

Now you need to find and edit the Claude Desktop configuration file on your computer. Follow the instructions for your operating system:

If your file is empty or does not exist, paste the entire JSON you copied 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, you need to add Bricksfusion inside the existing mcpServers block. For example, if you already have a server called "other-tool", the file should look like this:

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

Note the comma after the closing } of "other-tool". Every server entry needs a comma after it except the last one.

After saving the configuration file, you must fully close and reopen Claude Desktop. This is important because Claude only reads the configuration file when it starts.

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 and ready.

Type your first prompt to test:

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

Claude will load your design system, use your framework and colors, and generate a complete Bricks Builder JSON section. You can copy the result and paste it into Bricks Builder, or connect your WordPress site to push changes directly.

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 Claude Desktop and your WordPress site. The same token must be in both places: your Bricksfusion dashboard and your WordPress settings.

In Claude Desktop, start a new conversation and type:

Using bricksfusion, list my Bricks pages

Claude will connect to your WordPress site and show you all the pages that use Bricks Builder. From here you can ask Claude to read any page, add new sections, replace existing sections, or remove sections. For example:

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 Claude makes changes, 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.