How to Use the Plasmic (Visual Headless Page Builder) MCP in Windsurf

Q: How do I install this MCP Server in Windsurf?

Open your /.codeium/windsurf/mcpconfig.json file and add this server under the mcpServers block. Alternatively, use the Settings UI under Cascade to add the server URL. Once added, Cascade instantly discovers the visual builder tools.

Q: Can Windsurf edit my Plasmic (Visual Headless Page Builder) components directly?

Yes, Cascade uses the updateproject tool to modify layout configurations programmatically. It reads your project structure, makes the requested visual changes, and updates the canvas without you opening a browser.

Q: How does Plasmic (Visual Headless Page Builder) handle bulk CMS edits in Windsurf?

Cascade chains querycmsitems to fetch your target records, runs updatecmsitem on each match, and then calls publishcmsitem. Your MCP server handles the entire loop autonomously based on your single prompt.

Q: What is the fastest way to preview a visual component?

Cascade runs renderhtml to grab the actual markup of your component from the visual builder. It inserts this directly into your local workspace, giving you a live preview without manual exports.

Build, update, and publish visual pages autonomously by letting Windsurf chain your Plasmic design edits and CMS updates.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers — Included with Plan

Connect Plasmic (Visual Headless Page Builder) MCP to Windsurf

Create your Vinkius account to connect Plasmic (Visual Headless Page Builder) to Windsurf — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.

GDPR Included with Plan

Setup Plasmic (Visual Headless Page Builder) with Windsurf

Ask AI about this MCP

ChatGPT

Claude

Perplexity Vinkius runs on Gemini

Gemini

Grok

Multi-Step CMS Updates with Cascade

This MCP server lets you run multi-step CMS updates directly inside Cascade. The `query_cms_items` tool lets Cascade search your current content database, find stale records, and queue up updates without you writing boilerplate code. Cascade takes that data, feeds it into `update_cms_item`, and finishes the loop by triggering `publish_cms_item` in one continuous run. You give Cascade a single direction like "find all draft blog posts and publish them." It chains these three tools back-to-back, shows you the final count, and reports back when the live site updates.

Programmatic Layout Adjustments and Syncing

The `update_project` tool modifies your visual layouts directly from Cascade's workspace based on real-time feedback. Cascade reads your local workspace files, compares them with your remote visual configurations, and pushes the changes directly to the visual builder. Instead of manually clicking through a web interface, your agent updates component structures in the background. It keeps your code base and your visual canvases aligned without manual drift.

Instant UI Code Generation via MCP Server

The `render_html` tool pulls raw, pre-rendered HTML for any specific visual component straight into your editor. Cascade reads this markup to understand how your visual components are structured, allowing it to write clean CSS and layout logic that matches your production build. This MCP server connection removes the guesswork when integrating visual designs with your hardcoded application code. Cascade inspects the `get_model` output to map out your component tree and instantly writes the exact integration code you need.

Setup guide

Set up Plasmic (Visual Headless Page Builder) 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 Plasmic (Visual Headless Page Builder) 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 Plasmic (Visual Headless Page Builder) payment history." If connected, Cascade will call the Plasmic (Visual Headless Page Builder) tools directly. You will see a green dot next to the server name in the MCP panel.

mcp_config.json

{
  "mcpServers": {
    "plasmic-visual-headless-page-builder-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 Plasmic. 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 Plasmic (Visual Headless Page Builder) 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 Plasmic (Visual Headless Page Builder) MCP in Windsurf

Open your `~/.codeium/windsurf/mcp_config.json` file and add this server under the `mcpServers` block. Alternatively, use the Settings UI under Cascade to add the server URL. Once added, Cascade instantly discovers the visual builder tools.

Yes, Cascade uses the `update_project` tool to modify layout configurations programmatically. It reads your project structure, makes the requested visual changes, and updates the canvas without you opening a browser.

Cascade chains `query_cms_items` to fetch your target records, runs `update_cms_item` on each match, and then calls `publish_cms_item`. Your MCP server handles the entire loop autonomously based on your single prompt.

Cascade runs `render_html` to grab the actual markup of your component from the visual builder. It inserts this directly into your local workspace, giving you a live preview without manual exports.

Your CMS records and project structures pass directly between your local client and the visual builder's API via a secure V8 sandbox. No data is stored on external servers, keeping your raw layout models and schema details strictly private.

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