How to Use the Builder.io (Visual CMS) MCP in Windsurf

Q: How does the Builder.io (Visual CMS) MCP Server handle draft content in Windsurf?

Cascade uses getcontent to fetch draft states when you ask it to inspect unpublished changes. It reads the raw JSON draft data, allowing you to edit or preview content before pushing it live using the update tools.

Q: Can Windsurf Cascade upload images to Builder.io (Visual CMS) on its own?

Yes, Cascade chains the uploadasset tool when you point it to a local image file in your workspace. It sends the file to your CMS bucket and returns the hosted URL so your component can use it immediately.

Q: What happens if a GraphQL mutation fails during a Cascade run?

Cascade intercepts the error returned by admingraphql or querygraphql. It then rewrites the query or fixes the schema payload and retries the operation automatically without stopping your session.

Let Windsurf Cascade autonomously build, update, and manage your Builder.io visual layouts and assets without leaving your editor.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect Builder.io (Visual CMS) MCP to Windsurf

Create your Vinkius account to connect Builder.io (Visual CMS) to Windsurf and route execution through our secure gateway. The platform manages server hosting, runtime updates, and security layers. Configuration requires no manual server provisioning.

GDPR Free for Subscribers

Setup Builder.io (Visual CMS) with Windsurf

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Automate Content Generation in Windsurf

The `create_content` tool lets you write new marketing layouts or landing page entries directly from your workspace. Cascade takes your prompt, drafts the JSON schema, and pushes it to your Builder.io space in one shot. No more manual clicking through the web editor to set up a basic promo banner. If you need to tweak the layout later, Cascade uses `update_content` to modify fields on the fly. You just tell the agent what to change, and it handles the API payload structure behind the scenes.

Query and Render Visual Layouts via MCP Server

The `get_html` tool pulls raw, pre-rendered HTML straight from your Builder.io models so you can preview changes instantly. This MCP Server exposes your live CMS structures directly to Windsurf, giving the editor full visibility into what your users will actually see. When you need raw JSON data instead of markup, Cascade invokes `get_content` to inspect the exact payload. It chains these fetches to verify that your front-end components map perfectly to your CMS fields.

Run Complex GraphQL Operations in Windsurf

The `admin_graphql` tool runs custom mutations and queries against your Builder.io space to manage complex content relationships. Cascade uses this tool to execute administrative tasks that would normally require a dedicated API client or postman setup. For standard content fetching, the agent falls back to `query_graphql` to pull specific localized fields or nested assets. It lets you test complex queries in real-time right next to your active codebase.

Setup guide

Set up Builder.io (Visual CMS) MCP in Windsurf

Prerequisites

Windsurf IDE installed (macOS, Windows, or Linux)
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Click the Cascade assistant icon in the sidebar, then click the hammer icon (🔨) at the top of the panel. Select "Configure" to open ~/.codeium/windsurf/mcp_config.json.
2

Add the Builder.io (Visual CMS) MCP

Paste the JSON snippet shown on the right into the mcpServers object. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Refresh MCPs

Go back to the hammer icon (🔨) in Cascade and click "Refresh". Windsurf will detect the new server. No full restart is needed — the connection is hot-reloaded.
4

Verify in Cascade

Start a new Cascade conversation and ask something like "Show my Builder.io (Visual CMS) payment history." If connected, Cascade will call the Builder.io (Visual CMS) tools directly. You will see a green dot next to the server name in the MCP panel.

mcp_config.json

{
  "mcpServers": {
    "builderio-visual-cms-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by Builder.io. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect Builder.io (Visual CMS) now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about Builder.io (Visual CMS) MCP in Windsurf

Cascade uses `get_content` to fetch draft states when you ask it to inspect unpublished changes. It reads the raw JSON draft data, allowing you to edit or preview content before pushing it live using the update tools.

Yes, Cascade chains the `upload_asset` tool when you point it to a local image file in your workspace. It sends the file to your CMS bucket and returns the hosted URL so your component can use it immediately.

You need a Private API Key configured in your MCP settings to run write operations like `create_content` or `admin_graphql`. Standard public queries can run with basic read permissions, but write actions require secure token setup.

Cascade intercepts the error returned by `admin_graphql` or `query_graphql`. It then rewrites the query or fixes the schema payload and retries the operation automatically without stopping your session.

Vinkius runs the server in an isolated sandbox where your private API keys never leak to the LLM provider. Only the raw JSON payloads, asset files, and schema definitions required for your active queries pass through the secure transport layer.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript