Webflow

Build and manage Webflow sites with AI through Webflow's official MCP server.

Features

• 42 tools auto-generated from Webflow's official MCP server
• OAuth authentication - no API key required, just authorize via browser
• Full CMS support - manage collections, items, and fields
• Designer tools - create elements, styles, components, and pages
• Site management - list sites, publish, manage scripts

Quick Start

1. Add to your opencode.json

{
  "plugins": ["@openpets/webflow"]
}

2. Run a command

opencode run "list all my Webflow sites"

On first use, a browser window will open for OAuth authentication. Authorize access to your Webflow sites, and you're ready to go.

Authentication

This plugin uses OAuth authentication via Webflow's official MCP server. No API key is required.

First-time setup:

1. Run any Webflow command
2. A browser window opens automatically
3. Log in to Webflow and authorize access
4. Return to your terminal - authentication is complete

Credentials are cached in ~/.mcp-auth/ for future use.

To reset authentication:

rm -rf ~/.mcp-auth

Available Tools

CMS Collections

• webflow-collections-list - List all CMS collections in a site
• webflow-collections-get - Get detailed collection information
• webflow-collections-create - Create a new CMS collection
• webflow-collection-fields-create-static - Create static fields
• webflow-collection-fields-create-option - Create option fields
• webflow-collection-fields-create-reference - Create reference fields
• webflow-collection-fields-update - Update field properties

CMS Items

• webflow-collections-items-list-items - List items in a collection
• webflow-collections-items-create-item - Create draft items
• webflow-collections-items-create-item-live - Create and publish items
• webflow-collections-items-update-items - Update draft items
• webflow-collections-items-update-items-live - Update and publish items
• webflow-collections-items-publish-items - Publish draft items
• webflow-collections-items-delete-item - Delete items

Sites

• webflow-sites-list - List all accessible sites
• webflow-sites-get - Get site details
• webflow-sites-publish - Publish a site

Pages

• webflow-pages-list - List all pages
• webflow-pages-get-metadata - Get page metadata and SEO settings
• webflow-pages-update-page-settings - Update page settings
• webflow-pages-get-content - Get page content structure
• webflow-pages-update-static-content - Update static page content

Components

• webflow-components-list - List all components
• webflow-components-get-content - Get component content
• webflow-components-update-content - Update component content
• webflow-components-get-properties - Get component properties
• webflow-components-update-properties - Update component properties

Designer Tools

• webflow-element-builder - Create elements on current page
• webflow-element-tool - Manage page elements
• webflow-style-tool - Create and manage styles
• webflow-de-component-tool - Designer component operations
• webflow-de-page-tool - Designer page operations
• webflow-asset-tool - Manage assets and folders
• webflow-variable-tool - Manage design variables

Scripts

• webflow-site-registered-scripts-list - List registered scripts
• webflow-site-applied-scripts-list - List applied scripts
• webflow-add-inline-site-script - Add inline scripts
• webflow-delete-all-site-scripts - Remove all custom scripts

AI & Guidance

• webflow-guide-tool - Get best practices and guidelines
• webflow-ask-webflow-ai - Ask Webflow AI about the API
• webflow-get-image-preview - Get image previews from URLs

Example Workflows

List and explore sites

opencode run "list all my Webflow sites"
opencode run "get details for site abc123"
opencode run "list all collections on that site"

Manage blog content

opencode run "list items in the blog collection"
opencode run "create a new blog post titled 'Getting Started with AI'"
opencode run "publish the new blog post"

Update page SEO

opencode run "get SEO metadata for the home page"
opencode run "update the home page title to 'Welcome to My Site'"

Designer operations

opencode run "create a hero section on the home page"
opencode run "add a new style for buttons"
opencode run "list all components on the site"

Regenerating Tools

If Webflow updates their MCP server with new tools:

cd pets/webflow
pets generate-mcp --verbose

This will regenerate mcp.ts with the latest tools from Webflow's MCP server.

Troubleshooting

OAuth popup doesn't appear

• Check that your default browser can open automatically
• Look for the authorization URL in the terminal and open it manually

"Request timed out" during OAuth

• Run the command again
• Complete browser authorization quickly (within 60 seconds)

Authentication issues

# Clear cached credentials and try again
rm -rf ~/.mcp-auth/

Tools not working

• Ensure you've authorized the correct Webflow sites
• Check that the site is accessible in your Webflow account
• Review the error message for specific issues

Resources

• Webflow MCP Documentation
• Webflow Data API Docs
• OpenPets Documentation