Framer
CommunityPopularFramer MCP server. Generate, edit, and publish Framer sites. Work with components, CMS, and design systems via Framer's platform API.
| Publisher | framer |
| Repository | framer-mcp |
| Language | TypeScript |
| Forks | 0 |
| Stars | 1.5K |
| Available tools | 18 |
| Transport type | stdio |
| Categories | |
| License | MIT |
| Links |
- Connect tools to AI workflows
Framer exposes MCP capabilities that can be used by compatible AI clients and agents.
- 18 available tools
Browse the callable actions below, including names and descriptions when provided by the server.
- Ready-to-copy setup
Use the installation snippets to configure this server in your preferred MCP client.
- Open source signals
1.5K stars and 0 forks from the linked repository.
Installation
Node.js 18+
{
"mcpServers": {
"framer": {
"command": "npx",
"args": [
"-y",
"framer-mcp"
],
"env": {
"FRAMER_API_TOKEN": "<YOUR_TOKEN>"
}
}
}
}Available Tools
- list_sites
List all Framer sites in the workspace with their basic metadata
- create_site
Create a new Framer site with specified name and configuration
- get_site_details
Get detailed information about a specific Framer site including pages and settings
- update_site_settings
Update site-level settings such as domain, SEO metadata, and publishing configuration
- delete_site
Delete a Framer site and all associated content
- list_pages
List all pages within a specific Framer site
- create_page
Create a new page in a Framer site with specified layout and content
- update_page_content
Update the content and layout of an existing page
- delete_page
Remove a page from a Framer site
- list_components
List all custom components available in the design system
- create_component
Create a new reusable component with specified properties and styling
- update_component
Modify an existing component's design or properties
- get_cms_collections
Retrieve all CMS collections and their schema definitions
- create_cms_item
Add a new item to a specified CMS collection
- update_cms_item
Update content of an existing CMS collection item
- search_assets
Search for images, videos, and other media assets in the site library
- upload_asset
Upload new media assets to the Framer site library
- publish_site
Publish the current version of a Framer site to make it live
Use Framer MCP with multiple AI models
TypingMind connects MCP tools at the workspace level, so once Framer is connected, you can use it with different AI models in TypingMind instead of setting it up separately for each model. This MCP runs locally through the TypingMind MCP connector on your device.
Setup guide to use the local connector
Use this when the MCP server needs access to local files, apps, or private resources on your computer.
Open the MCP settings
In TypingMind, go to Settings, Advanced Settings, then Model Context Protocol and choose Setup Connector.
- Open TypingMind in your browser.
- Click the Settings icon.
- Go to Advanced Settings.
- Open the Model Context Protocol section.
- Click Setup Connector and choose This Device.
Run the connector command
Choose This Device, copy the command from TypingMind, and run it in Terminal. Keep the process running while you use MCP.
- Copy the setup command shown by TypingMind.
- Open Terminal on macOS or Windows Terminal on Windows.
- Paste and run the command.
- Approve the package install if Terminal asks you to proceed.
- Keep the Terminal window running while using MCP tools.
Add Framer as a server
When the connector status is Ready, click Edit Servers and paste the MCP server configuration.
- Wait until the connector status shows Ready.
- Click Edit Servers.
- Paste the Framer MCP server configuration.
- Save the server list.
- Refresh if you want to confirm the connector is still ready.
{
"mcpServers": {
"framer": {
"command": "npx",
"args": [
"-y",
"framer-mcp"
]
}
}
}Use it across models
Save the server list, open Plugins, enable the Framer MCP tools, then select any supported AI model in TypingMind and use the tools in chat or assign them to an AI agent.
- Open the Plugins page in TypingMind.
- Enable the Framer MCP tools.
- Start a chat and choose the AI model you want to use.
- Use the MCP tools in chat or assign them to an AI agent.
- Switch to another AI model whenever needed without reconnecting MCP.
Here is what I found using Framer.
Frequently asked questions
What is the Framer MCP server used for?
Framer is an MCP server that lets compatible AI clients connect to external tools and context. In TypingMind, you can add this MCP server once and make its tools available in your AI workspace.
Can I use Framer MCP with multiple AI models in TypingMind?
Yes. TypingMind connects MCP tools at the workspace level, so you can use Framer with different AI models such as Claude, ChatGPT, Gemini, or other models you have configured in TypingMind without setting up the MCP server separately for each model.
Why use Framer MCP with TypingMind?
TypingMind is one of the best frontends for LLM chat because it brings multiple AI models, prompts, plugins, AI agents, API keys, and MCP tools into one workspace. With Framer connected, you can use its MCP tools across your preferred models while keeping your chat workflow organized in TypingMind.
How do I connect Framer MCP to TypingMind?
Framer runs through the TypingMind local MCP connector. This is best when the MCP server needs access to local files, desktop apps, command-line tools, or private resources on your computer.
What tools does Framer MCP provide in TypingMind?
Framer exposes 18 MCP tools that can be enabled from the TypingMind Plugins page and used in chat or assigned to AI agents.
Do I need to share my API keys with TypingMind to use Framer MCP?
No. TypingMind is local-first and lets you keep your model providers, API keys, prompts, and MCP configuration under your control. If Framer requires authentication, add the required headers, OAuth settings, or local configuration for that MCP server when you create the connection.
Related MCP Servers
View all
Knowledge Graph Memory
Model Context Protocol Servers
Context7
Context7 Platform -- Up-to-date code documentation for LLMs and AI code editors
Blender
Experience seamless AI-powered 3D modeling by connecting Blender with Claude AI via the Model Context Protocol. BlenderMCP enables two-way communication, allowing you to create, modify, and inspect 3D scenes directly through AI prompts. Control objects, materials, lighting, and execute Python code in Blender effortlessly. Access assets from Poly Haven and generate AI-driven models using Hyper3D Rodin. This integration enhances creative workflows by combining Blender’s robust tools with Claude’s intelligent guidance, making 3D content creation faster, interactive, and more intuitive. Perfect for artists and developers seeking AI-assisted 3D design within Blender’s environment.
Google GenAI Toolbox
MCP Toolbox for Databases is an open source MCP server for databases.
