How to Use the Plasmic (Visual Headless Page Builder) MCP in Vercel AI SDK
Stream visual layouts and CMS updates straight to your Next.js frontend with Vercel AI SDK.
Works with every AI agent you already use
…and any MCP-compatible client
Connect Plasmic (Visual Headless Page Builder) MCP to Vercel AI SDK
Create your Vinkius account to connect Plasmic (Visual Headless Page Builder) to Vercel AI SDK — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.
Gemini
Key Capabilities
Fetch and render raw HTML via this MCP Server
The `render_html` tool pulls raw, pre-rendered HTML components straight from your visual design canvas. Your agent requests the exact component layout and receives the markup instantly. This means you bypass heavy build steps. Because it runs on edge functions, your users see live layout changes without waiting for a full redeploy.
Live CMS updates streamed directly to UI
The `query_cms_items` tool pulls structured database records from your visual page builder via this MCP Server. You pass these results straight to your streaming text UI. Your users watch data populate in real-time. There is no awkward loading spinner while the database queries run behind the scenes.
Programmatic project updates
The `update_project` tool modifies your project structure directly from your application code using this MCP connection. Your agent changes layout variables and updates page trees on the fly. This setup handles visual adjustments programmatically. You write code that tells your agent how to restructure pages, and it executes the layout changes instantly.
Set up Plasmic (Visual Headless Page Builder) MCP in Vercel AI SDK
Prerequisites
- Node.js 18+ and a TypeScript project
-
ai+@modelcontextprotocol/sdkpackages - Active Vinkius subscription with a valid endpoint token
- 1
Install dependencies
Run
npm install ai @modelcontextprotocol/sdkplus your preferred model provider (e.g.@ai-sdk/openai). - 2
Create the Streamable HTTP transport
Use
StreamableHTTPClientTransportwith your Vinkius endpoint URL. Replace[YOUR_TOKEN_HERE]with your token from cloud.vinkius.com. - 3
Discover and use tools
Call
mcpClient.tools()to auto-discover all Plasmic (Visual Headless Page Builder) tools. Pass them directly togenerateText()orstreamText()— no manual schema definitions needed. - 4
Works with any model provider
Swap
openai("gpt-4o")for any AI SDK provider — Anthropic, Google, Mistral. The MCP tools work identically across all supported models.
import { experimental_createMCPClient as createMCPClient } from "ai";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
const transport = new StreamableHTTPClientTransport(
new URL("https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp")
);
const mcpClient = await createMCPClient({ transport });
const tools = await mcpClient.tools();
const { text } = await generateText({
model: openai("gpt-4o"),
tools,
prompt: "List recent Plasmic (Visual Headless Page Builder) transactions",
});
console.log(text);
await mcpClient.close();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.
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 Vercel AI SDK
Use it with your favorite AI tools
Connect this server to Cursor, Claude, VS Code, and more.
Start using the Plasmic (Visual Headless Page Builder) MCP today
We host it, we monitor it, we maintain it. You just paste one token.