> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developers.webflow.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server. # Webflow MCP server > Webflow's MCP server and AI tools for building with Webflow APIs MCP Hero Image The Webflow MCP server connects agents and AI tools directly to your Webflow projects. Import designs, create pages, analyze site activity, work with the CMS and more from your preferred AI environment. For developers using AI-powered tools like [Claude Code](https://claude.com/product/claude-code), [Claude Desktop](https://claude.ai/download), [ChatGPT](https://chatgpt.com/), [Codex](https://openai.com/codex/) or [Cursor](https://www.cursor.com/), the MCP server enhances an agent's understanding of your Webflow projects. It's built on Webflow's APIs, exposing them as tools your AI agent can use to create elements, styles, components, and variables, manage collections, custom code, assets, and other site data, and read your site's analytics. Every agent works within your existing Webflow permissions and roles, and each site can provide its own Agent Instructions to guide how agents work on it. **Why use the MCP server?** Skip writing API calls and managing authentication. Just describe what you want in natural language, and your AI agent handles the implementation. ## What you can do #### Design and build Create and modify a site's visual design: * **Responsive layouts**: Build sections, containers, and grids that adapt across breakpoints * **Elements**: Add, arrange, and remove elements like rich text, buttons, form fields, images, and media embeds, and edit their text, tags, attributes, and settings. Find elements by type, text, style, tag, attribute, or component to target changes precisely * **Styles**: Reuse or create classes and combo classes, edit CSS properties, build styles from raw CSS, and manage styles across breakpoints * **Components**: Create and manage components with full support for props, variants, slots, and metadata * **Page branches**: Create, inspect, and delete page branches to work on changes in isolation * **Custom code**: Read and write freeform site- and page-level custom code, and manage registered scripts * **Custom fonts**: Upload, replace, update, and remove a site's custom font files * **Design systems**: Define variables, color schemes, typography scales, and spacing systems #### Manage Manage your site's content, pages, and assets: * **CMS**: Create collections, define fields, manage items with bulk updates, publish and unpublish CMS items * **Pages**: Create pages, bulk-update page settings, and manage schema markup and structured data * **Assets**: List, organize, update, and delete assets and folders, and run compression jobs to optimize file sizes * **Forms**: Read forms and their schemas, list submissions, and update or delete them * **Sitemap**: Control sitemap inclusion for pages and CMS items, individually or in bulk * **SEO**: Update meta titles, descriptions, and Open Graph tags across pages * **Comments**: Read and add site and element comments, list threads and replies, reply to threads, and look up workspace users by email * **Content audits**: Scan for broken links, missing alt text, and outdated information #### Example: Standardize collection fields Ensure all items in my collection have featured images, complete descriptions, and SEO metadata. Add placeholder content where fields are empty. Your AI agent will: 1. Fetch the collection schema and all items 2. Identify items with missing featured images, descriptions, or meta tags 3. Generate appropriate placeholder content based on existing item data 4. Update items with the new content #### Analyze Read traffic and engagement data from Webflow Analyze, Webflow's built-in site analytics: * **Traffic**: Track sessions, users, and pageviews over any time window * **Top pages**: Rank pages by sessions, users, or pageviews * **Top dimensions**: Break down traffic by country, browser, traffic source, and more * **Engagement events**: Surface the most frequent events and the pages where they happen * **Time on page**: Measure average time on a page or across the whole site These capabilities require [Webflow Analyze](https://webflow.com/feature/analyze), an optional add-on available on paid Site plans. #### Automate Chain multiple steps into repeatable, automated workflows: * **Design to production**: Access designs, variables and styles from Figma, Claude Design and other tools and apply them to your site * **Content analysis**: Review blog posts, identify trends, and suggest new topics with SEO keywords * **Style refactoring**: Migrate legacy styles to design variables and modern breakpoint configurations * **Quality assurance**: Run automated checks for accessibility, performance, and SEO best practices * **Cross-site management**: Apply consistent changes across multiple Webflow projects #### Example: Site-wide quality audit Audit my site for broken links, missing alt text, and incomplete meta descriptions, then fix what you can automatically Your AI agent will: 1. Scan all pages and CMS items for common issues 2. Check internal and external links for broken references 3. Identify images without alt text 4. Find pages missing SEO metadata 5. Automatically fix issues where possible 6. Generate a detailed report with recommendations #### Governance Control what agents can do on your site and track the changes they make: * **Agent Instructions**: Give agents site-specific rules and skills that shape how they work on a site. Instructions can reference the site's own variables, styles, components, pages, CMS collections, and locales, and can travel across a workspace through Shared Libraries * **Permissions and roles**: Every agent works within your existing Webflow permissions and roles, including custom roles. An agent can do only what you can do in the Designer, and nothing more * **Site activity log**: The changes agents make are recorded in your site's activity log, so you can review exactly what an agent did and when ## Limitations The MCP server cannot automate all Webflow developer tools. Here are some of its major limitations: * The MCP server cannot yet create or apply Webflow Interactions (IX3); build and edit interactions manually in the Designer. * The MCP server manages uploaded custom font files only. Remotely hosted Google and Adobe Fonts are managed in site settings; for Google Fonts, download the files and upload them through the MCP server. * The MCP server does not support creating new localized CMS items, though it can read and update existing CMS items and static content in secondary locales. * The MCP server cannot change a site or Workspace's access settings, such as adding users or assigning roles. It works within your existing permissions and roles. * Each authorization grants access to a single workspace. To use a different workspace, re-authenticate. For connector-based clients like Claude and ChatGPT, this means removing and reinstalling the connector. * A few capabilities require the Webflow Designer open with the Bridge App connected: capturing visual snapshots of elements, and reading or changing the current selection, page, mode, branch, canvas, and breakpoints. Everything else works without the Designer open. ## Get started #### [Explore the prompt library](/mcp/examples) Browse ready-to-use prompts for image optimization, SEO audits, style refactoring, and more. #### [Use skills](/mcp/reference/skills) Install skills that help you accomplish common Webflow tasks through natural language. #### [Learn how it works](/mcp/reference/how-it-works) Understand the architecture, authentication, and how the MCP server connects to Webflow's APIs.