Framer Connector for AI agents.
8 live capabilities
Update your website CMS and publish content through conversation.
Waiting for input…
Why people use Framer
Framer for CMS Content Management
This Connector lets you skip that entirely. You can just tell your agent to add the new items or update existing ones. It handles the data entry so you can stay in your flow. You get a live website that updates as fast as you can type.
What Vinkius changes
You get a conversational shortcut to your Framer CMS and publishing workflow.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
Updating a team page
A manager tells the agent to add 5 new team members to the CMS collection using natural language.
- Real-world use case 02
Syncing a blog feed
A developer asks the agent to pull 10 new articles from a headless API into the Framer CMS.
- Real-world use case 03
Publishing a campaign
A marketer finishes a content update and asks the agent to push the site live to the public.
Complete set · 8capabilities
The complete Framer capability set.
These are the exact actions your AI can choose when you ask it to work with Framer.
01—04
4 capabilities in this set.
Part of 8 available through Framer.
- 01 Capability
Get project
Get specific details for a single Framer project.
- 02 Capability
List collections
List all the CMS collections on your site.
- 03 Capability
List collection items
See every item inside a specific CMS collection.
- 04 Capability
Create collection item
Create a new entry in a CMS collection using natural language.
05—08
4 capabilities in this set.
Part of 8 available through Framer.
- 05 Capability
Publish site
Make your latest CMS changes live to the public immediately.
- 06 Capability
List pages
See every page currently on your site.
- 07 Capability
List projects
See a list of all your Framer projects in one view.
- 08 Capability
Get site info
Get the configuration details for your Framer site.
Set up in minutes
One URL. Then ask Framer to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Framer from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it Framer, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Framer for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Framer URL.
- Step 03
Save and start
Save the connection and enable Framer in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"framer": {
"url": "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp"
}
}
} - Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using Framer
Open Agent mode in chat and ask: "Using Framer, help me...". 8 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"framer": {
"url": "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp"
}
}
} - Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using Framer
Ask Copilot: "Using Framer, help me...". 8 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"framer": {
"url": "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp"
}
}
} - Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using Framer
Open Cascade and ask: "Using Framer, help me...". 8 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"framer": {
"url": "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp"
}
}
} - Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using Framer
Ask Cline: "Using Framer, help me...". 8 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add framer --transport http "https://edge.vinkius.com/vk_preview_XocPRHUqmexgPHRudnuYlV7Bh5mp6EvuOwQLlneR/mcp" - Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using Framer
Ask Claude: "Using Framer, show me...". 8 tools are ready
Where the request belongs
Work Framer can move forward.
For the marketing manager tired of manual data entry, the developer syncing headless data, and the designer who wants to keep the CMS clean without breaking the layout.
Marketing Manager
Updates blog posts and landing page content via chat instead of manual CMS entries.
Content Strategist
Manages large-scale CMS updates from spreadsheets or external databases.
Web Developer
Programmatically handles content synchronization between different platforms.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsBuilder.io
Manage your visual CMS via Builder.io. track content entries, models, and symbols directly from any AI agent.
Webflow
Manage Webflow sites, CMS collections, pages, and assets directly from your AI agent.
Builder
Automate Builder.io headless CMS workflows. generate content blocks, update models, and orchestrate visual components directly from any AI agent.
MasterGo
Collaborative design platform and UI/UX capability. manage design files, nodes, and comments via AI.
Plasmic (Visual Headless Page Builder)
Manage Plasmic projects, pages, and components via AI. list projects, inspect page structures, and trigger publishes directly.
Pixso
Collaborative design platform and UI/UX capability. manage design files, nodes, and teams via AI.
Bring your own AI
Change the model, client or framework. Keep Framer connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about Framer.
The practical details behind the request, access and result.
Can the Framer MCP update my CMS content?
Yes, it lets your agent create, update, and manage items in your CMS collections directly. You can add new entries or modify existing fields using natural language.
How do I use the Framer MCP to publish my site?
You can just tell your agent to publish the site, and it will trigger the live update for you. This makes your latest CMS changes visible to the public immediately.
Does the Framer MCP support multiple projects?
Yes, it can list and get details for all your different Framer projects, giving you a high-level view of your entire site portfolio.
Can I sync external data to Framer?
You can use the agent to pull content from other sources into your Framer CMS collections. This is ideal for syncing blog feeds or external databases.
Is the Framer MCP good for marketing teams?
It's great for marketers who need to update landing pages or blog posts without touching the design. It keeps your layouts intact while you manage the data.
How do I connect the Framer MCP?
You just need your Server API key from your Framer project settings and the Vinkius marketplace. Once connected, your agent can start managing your site.
How do I get my Framer API key?
Open your Framer project in the editor. Go to Site Settings (gear icon in the top bar), then navigate to the General tab. Scroll down to find the Server API section and click Generate API key. Copy the key and store it securely. treat it like a password. This key is specific to this project. Paste it into the configuration field below.
Can I push content from a spreadsheet into my Framer CMS?
Yes. Your AI agent can create and update CMS collection items programmatically. Describe the data you want to add, and it maps your fields to the Framer collection schema and creates the items. perfect for bulk content migrations or data-driven landing pages.
Does publishing through the API affect my Framer design?
No. The Server API only manages CMS content. it cannot modify your visual design, canvas layout, or component structure. Your designers remain in full control of the visual experience while content teams operate independently through the AI agent.
Is this suitable for agencies managing multiple Framer projects?
Yes. Each API key is bound to a specific Framer project. Configure separate integrations for each client project and your AI agent can switch between them. managing content across your entire portfolio without opening multiple browser tabs.
One connection away
Give your agent a direct line to Framer.
Connect Framer once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available