Connect Framebrick to Windsurf

Add the Framebrick MCP server (https://mcp.framebrick.co, free, no account, no key) to Windsurf. The steps follow Windsurf’s own documentation (Windsurf: Cascade MCP); we have not run Windsurf ourselves. We tested the server with the official MCP TypeScript client.

Add the server

Open the Cascade panel, click the … (Actions) menu and then the Open MCP config file icon in the MCPs section. Add:

{
  "mcpServers": {
    "framebrick": {
      "serverUrl": "https://mcp.framebrick.co"
    }
  }
}

Windsurf’s remote servers use serverUrl (or url). The file is ~/.codeium/windsurf/mcp_config.json in the Windsurf editor; Windsurf’s documentation has moved to docs.devin.ai and the location can differ by version, so use the button above to find the right file.

Check it

The MCPs section lists each server with the number of enabled tools; use the refresh button after editing and the toggle to switch a server on or off.

Then

• Add the registry to your project’s components.json so the install commands resolve: see the MCP server page.
• Install the Agent Skills: curl -fsSL https://framebrick.co/install | node -.
• Ask in plain language: “Plan a landing page for a branding studio from Framebrick blocks.”