How to Use the Framer MCP in Vercel AI SDK

Q: How does the Vercel AI SDK handle Framer publishing errors?

When publishsite fails due to an invalid project ID, the error returns as a tool result. The SDK streams this failure state back to your React components, letting you handle the error state gracefully in the UI.

Build Next.js interfaces that stream live Framer CMS updates and publishing events directly to your users with the Vercel AI SDK.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect Framer MCP to Vercel AI SDK

Create your Vinkius account to connect Framer to Vercel AI SDK 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 Framer with Vercel AI SDK

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Stream CMS updates live with Vercel AI SDK

Stop making users wait for heavy page reloads when updating content. When your users request a new blog post, this MCP Server lets your Next.js frontend stream the progress of `create_collection_item` in real-time. You get a live feed of the backend operations directly in your React components. The Vercel AI SDK handles the active stream, rendering the transition from draft to published state without forcing a single spinner on your visitors.

Zero-latency project discovery on the Edge

Run your content dashboards on Vercel Edge Functions without worrying about cold starts. Your agent can instantly call `list_projects` and `get_project` to fetch layout details, keeping your serverless execution costs down. This setup bypasses the usual API middleware lag by connecting your edge runtime directly to the Framer API. You pull down active site configurations and display them to your users in milliseconds.

Instant site publishing without UI lag

Trigger production deployments directly from your user interface. Your application calls `publish_site` behind the scenes, letting your custom dashboard reflect the live status of the web project immediately. Instead of polling the server for updates, your AI client receives the raw confirmation payload. It feeds this data straight into your UI stream, giving your users instant feedback that their changes are live.

Setup guide

Set up Framer MCP in Vercel AI SDK

Prerequisites

Node.js 18+ and a TypeScript project
ai + @modelcontextprotocol/sdk packages
Active Vinkius subscription with a valid endpoint token

1

Install dependencies

Run npm install ai @modelcontextprotocol/sdk plus your preferred model provider (e.g. @ai-sdk/openai).
2

Create the Streamable HTTP transport

Use StreamableHTTPClientTransport with 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 Framer tools. Pass them directly to generateText() or streamText() — 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.

index.ts

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 Framer transactions",
});

console.log(text);
await mcpClient.close();

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 Framer. 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 Framer 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 Framer MCP in Vercel AI SDK

Install @ai-sdk/mcp and use createMCPClient to connect to the server. Pass the tools directly into streamText to let your LLM call create_collection_item and stream the status.

Yes, the MCP client is fully compatible with edge runtimes. It uses standard HTTP transports to call list_collections and list_pages without requiring Node.js-specific APIs.

When publish_site fails due to an invalid project ID, the error returns as a tool result. The SDK streams this failure state back to your React components, letting you handle the error state gracefully in the UI.

No, the Vinkius platform handles the underlying API credentials. Your application simply points the MCP client to the managed endpoint, allowing secure access to list_projects without manual token storage.

Your Framer API tokens, CMS items, and project structures never touch external databases. Vinkius runs the server in an isolated, ephemeral V8 sandbox, ensuring your private content remains strictly between Vercel's runtime and the Framer API.

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