Webflow MCP connector

1. Install the SDK

   Node.js

   npm install @scalekit-sdk/node

   Python

   pip install scalekit

   Full SDK reference: Node.js | Python

2. Set your credentials

   Add your Scalekit credentials to your .env file. Find values in app.scalekit.com > Developers > API Credentials.

   .env

   SCALEKIT_ENVIRONMENT_URL=<your-environment-url>
   SCALEKIT_CLIENT_ID=<your-client-id>
   SCALEKIT_CLIENT_SECRET=<your-client-secret>

3. Authorize and make your first call

   Node.js

   quickstart.ts

   import { ScalekitClient } from '@scalekit-sdk/node'
   import 'dotenv/config'
   
   const scalekit = new ScalekitClient(
     process.env.SCALEKIT_ENV_URL,
     process.env.SCALEKIT_CLIENT_ID,
     process.env.SCALEKIT_CLIENT_SECRET,
   )
   const actions = scalekit.actions
   
   const connector = 'webflowmcp'
   const identifier = 'user_123'
   
   // Generate an authorization link for the user
   const { link } = await actions.getAuthorizationLink({ connectionName: connector, identifier })
   console.log('Authorize Webflow MCP:', link)
   process.stdout.write('Press Enter after authorizing...')
   await new Promise(r => process.stdin.once('data', r))
   
   // Make your first call
   const result = await actions.executeTool({
     connector,
     identifier,
     toolName: 'webflowmcp_get_image_preview',
     toolInput: { url: 'https://example.com/url', siteId: 'YOUR_SITEID', context: 'YOUR_CONTEXT' },
   })
   console.log(result)

   Python

   quickstart.py

   import os
   from scalekit.client import ScalekitClient
   from dotenv import load_dotenv
   load_dotenv()
   
   scalekit_client = ScalekitClient(
       env_url=os.getenv("SCALEKIT_ENV_URL"),
       client_id=os.getenv("SCALEKIT_CLIENT_ID"),
       client_secret=os.getenv("SCALEKIT_CLIENT_SECRET"),
   )
   actions = scalekit_client.actions
   
   connection_name = "webflowmcp"
   identifier = "user_123"
   
   # Generate an authorization link for the user
   link_response = actions.get_authorization_link(
       connection_name=connection_name,
       identifier=identifier,
   )
   print("Authorize Webflow MCP:", link_response.link)
   input("Press Enter after authorizing...")
   
   # Make your first call
   result = actions.execute_tool(
       tool_input={"url":"https://example.com/url","siteId":"YOUR_SITEID","context":"YOUR_CONTEXT"},
       tool_name="webflowmcp_get_image_preview",
       connection_name=connection_name,
       identifier=identifier,
   )
   print(result)

What you can do

Connect this agent connector to let your agent:

• Builder whtml, element, component — Insert elements on the current active page from HTML and CSS strings, accepting markup and optional CSS rules
• Tool webflow guide, variable, style — Retrieve Webflow tool usage guidelines and recommended workflows before performing any actions
• Get more tools, image preview — Check for additional tools whenever your task might benefit from specialized capabilities - even if existing tools could work as a fallback
• Ai ask webflow — Ask Webflow AI any question about the Webflow API and get a direct answer

Tool list

Use the exact tool names from the Tool list below when you call execute_tool. If you’re not sure which name to use, list the tools available for the current user first.

webflowmcp_ask_webflow_ai#Ask Webflow AI any question about the Webflow API and get a direct answer.2 params▾

Ask Webflow AI any question about the Webflow API and get a direct answer.

NameTypeRequiredDescription

contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.

messagestringrequiredYour question about the Webflow API.

webflowmcp_asset_tool#Designer Tool - Asset tool to perform actions like create folder, get all assets and folders, update assets and folders, and upload image by URL3 params▾

Designer Tool - Asset tool to perform actions like create folder, get all assets and folders, update assets and folders, and upload image by URL

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_component_builder#Insert component instances onto the current active page into an element or a component instance slot.3 params▾

Insert component instances onto the current active page into an element or a component instance slot.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_data_assets_tool#Manage Webflow site assets — create folders, upload files, and retrieve asset metadata via the Data API.2 params▾

Manage Webflow site assets — create folders, upload files, and retrieve asset metadata via the Data API.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_data_cms_tool#Manage Webflow CMS collections and items including listing, creating, updating, and publishing.2 params▾

Manage Webflow CMS collections and items including listing, creating, updating, and publishing.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.

webflowmcp_data_comments_tool#Manage Webflow Designer comments — list threads by page, filter by resolution status or date, search comment authors, and reply to existing threads.2 params▾

Manage Webflow Designer comments — list threads by page, filter by resolution status or date, search comment authors, and reply to existing threads.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_data_enterprise_tool#Manage enterprise-tier Webflow settings including 301 redirects and robots.txt. Requires an Enterprise workspace plan.2 params▾

Manage enterprise-tier Webflow settings including 301 redirects and robots.txt. Requires an Enterprise workspace plan.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_data_localization_tool#Localize Webflow pages and components into secondary locales by reading and updating static content.2 params▾

Localize Webflow pages and components into secondary locales by reading and updating static content.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.

webflowmcp_data_pages_tool#List pages, get page metadata, update page settings, and manage branches via the Webflow Data API.2 params▾

List pages, get page metadata, update page settings, and manage branches via the Webflow Data API.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.

webflowmcp_data_scripts_tool#Register, apply, update, and remove custom code scripts at the site or page level in Webflow.2 params▾

Register, apply, update, and remove custom code scripts at the site or page level in Webflow.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.

webflowmcp_data_sites_tool#Data tool - Sites tool to perform actions like list sites, get site details, and publish sites2 params▾

Data tool - Sites tool to perform actions like list sites, get site details, and publish sites

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_data_webhook_tool#Data tool - Webhook tool to perform actions like list webhooks, create webhooks, get webhook details, and delete webhooks for a Webflow site.2 params▾

Data tool - Webhook tool to perform actions like list webhooks, create webhooks, get webhook details, and delete webhooks for a Webflow site.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_de_component_tool#Designer tool - Component tool to perform actions like create component instances, get all components and more.3 params▾

Designer tool - Component tool to perform actions like create component instances, get all components and more.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_de_page_tool#Manage Designer pages — create pages and folders, switch pages, open components, and inspect branch and mode state.3 params▾

Manage Designer pages — create pages and folders, switch pages, open components, and inspect branch and mode state.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_element_builder#Designer Tool - Element builder to create element on current active page.3 params▾

Designer Tool - Element builder to create element on current active page.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_element_snapshot_tool#Capture a visual snapshot of a Designer element for debugging and visual feedback.3 params▾

Capture a visual snapshot of a Designer element for debugging and visual feedback.

NameTypeRequiredDescription

actionobjectrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_element_tool#Designer Tool - Element tool to perform actions like get all elements, get selected element, select element on current active page. and more3 params▾

Designer Tool - Element tool to perform actions like get all elements, get selected element, select element on current active page. and more

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_get_image_preview#Designer Tool - Get image preview from url. this is helpful to get image preview from url. Only supports JPG, PNG, GIF, WEBP, WEBP and AVIF formats.3 params▾

Designer Tool - Get image preview from url. this is helpful to get image preview from url. Only supports JPG, PNG, GIF, WEBP, WEBP and AVIF formats.

NameTypeRequiredDescription

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

urlstringrequiredThe URL of the image to get the preview from

webflowmcp_get_more_tools#Check for additional tools whenever your task might benefit from specialized capabilities - even if existing tools could work as a fallback.3 params▾

Check for additional tools whenever your task might benefit from specialized capabilities - even if existing tools could work as a fallback.

NameTypeRequiredDescription

briefstringrequiredDescribe the use case, what the user wants to accomplish, why existing tools are insufficient, and any relevant Webflow context.

categorystringrequiredThe category of the capability you are looking for.

contextstringrequiredA short description of your goal and what kind of tool would help accomplish it.

webflowmcp_style_tool#Designer Tool - Style tool to perform actions like create style, get all styles, update styles, remove styles3 params▾

Designer Tool - Style tool to perform actions like create style, get all styles, update styles, remove styles

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_variable_tool#Manage Webflow Designer variables — create, list, update, rename, delete, and manage style variable modes.3 params▾

Manage Webflow Designer variables — create, list, update, rename, delete, and manage style variable modes.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.

webflowmcp_webflow_guide_tool#Retrieve Webflow tool usage guidelines and recommended workflows before performing any actions.1 param▾

Retrieve Webflow tool usage guidelines and recommended workflows before performing any actions.

NameTypeRequiredDescription

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

webflowmcp_whtml_builder#Insert elements on the current active page from HTML and CSS strings, accepting markup and optional CSS rules.3 params▾

Insert elements on the current active page from HTML and CSS strings, accepting markup and optional CSS rules.

NameTypeRequiredDescription

actionsarrayrequiredNo description.

contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).

siteIdstringrequiredThe unique ID of the Webflow site. Get it from the data_sites_tool if not known.