Webflow MCP
Vendor MCP40 toolsOAuth 2.1/DCRDesignDeveloper ToolsProductivityConnect to Webflow. Build and manage websites, pages, components, styles, assets, CMS collections, and site settings through the Webflow Designer and Data...
Webflow MCP connector
-
Install the SDK
Section titled “Install the SDK”Terminal window npm install @scalekit-sdk/nodeTerminal window pip install scalekit -
Set your credentials
Section titled “Set your credentials”Add your Scalekit credentials to your
.envfile. 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> -
Authorize and make your first call
Section titled “Authorize and make your first call”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.actionsconst connector = 'webflowmcp'const identifier = 'user_123'// Generate an authorization link for the userconst { 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 callconst result = await actions.executeTool({connector,identifier,toolName: 'webflowmcp_get_asset_preview',toolInput: { asset_id: 'YOUR_ASSET_ID', context: 'YOUR_CONTEXT' },})console.log(result)quickstart.py import osfrom scalekit.client import ScalekitClientfrom dotenv import load_dotenvload_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.actionsconnection_name = "webflowmcp"identifier = "user_123"# Generate an authorization link for the userlink_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 callresult = actions.execute_tool(tool_input={"asset_id":"YOUR_ASSET_ID","context":"YOUR_CONTEXT"},tool_name="webflowmcp_get_asset_preview",connection_name=connection_name,identifier=identifier,)print(result)
What you can do
Section titled “What you can do”Connect this agent connector to let your agent:
- Get asset preview, more tools, image preview — Get an image preview of a site asset by its asset ID
- Tool designer, data variable, data style — Interact with the user’s live Webflow Designer session — select an element on the canvas or read which element is currently selected, navigate the canvas between pages and component canvases, switch to or read the current page, list a page’s branches, read the current branch ID, parent page ID, and Designer mode, enter, exit, or inspect the current component view, and read all breakpoints (media queries) configured for the site
- Builder data whtml, data element, data component — Data Tool - WHTML builder to insert elements from HTML and CSS strings on a page via the public-mcp headless surface
- Ai ask webflow — Ask Webflow AI any question about the Webflow API and get a direct answer
Tool list
Section titled “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.
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 - Upload an image from a publicly accessible URL as a Webflow asset. Other asset and folder management is handled by data_assets_tool.3 params
Designer Tool - Upload an image from a publicly accessible URL as a Webflow asset. Other asset and folder management is handled by data_assets_tool.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.siteIdstringrequiredWebflow site ID. Discover with list_sites.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.
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_agent_instructions_tool#Data tool - Manage agent instructions (rules and skills) for a site. Actions: search_instructions, read_instruction, create_instruction, update_instruction, delete_instruction, move_instruction. Paths must follow 'rules/<name>.md', 'rules/<name>.mdc', or '<skill-name>/SKILL.md'.2 params
Data tool - Manage agent instructions (rules and skills) for a site. Actions: search_instructions, read_instruction, create_instruction, update_instruction, delete_instruction, move_instruction. Paths must follow 'rules/<name>.md', 'rules/<name>.mdc', or '<skill-name>/SKILL.md'.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_analyze_tool#Read Webflow Analyze report data for a site, including traffic timeseries, ranked pages, ranked dimensions, ranked engagement events, and aggregate or bucketed time on page. Includes guide actions for building Analyze queries and resolving engagement event rows to page elements, component instances, and CMS context.2 params
Read Webflow Analyze report data for a site, including traffic timeseries, ranked pages, ranked dimensions, ranked engagement events, and aggregate or bucketed time on page. Includes guide actions for building Analyze queries and resolving engagement event rows to page elements, component instances, and CMS context.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_assets_tool#Data tool - Manage Webflow site assets and asset folders via the Data API. Creates asset metadata entries and returns presigned S3 upload information (uploadUrl and uploadDetails) used to upload the file bytes, and supports listing, updating, organizing, and deleting assets and asset folders, plus compressing image assets to webp or avif via async tasks.2 params
Data tool - Manage Webflow site assets and asset folders via the Data API. Creates asset metadata entries and returns presigned S3 upload information (uploadUrl and uploadDetails) used to upload the file bytes, and supports listing, updating, organizing, and deleting assets and asset folders, plus compressing image assets to webp or avif via async tasks.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_cms_tool#Data tool - CMS tool to manage collections, collection fields (static/option/reference), collection field groups, and collection items (list, create, update, publish, unpublish, delete)2 params
Data tool - CMS tool to manage collections, collection fields (static/option/reference), collection field groups, and collection items (list, create, update, publish, unpublish, delete)
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.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.
actionsarrayrequiredNo description.contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).webflowmcp_data_component_builder#Data Tool - Component builder to insert component instances on a page via the public-mcp headless surface. Supports inserting into an element (insert_in_element) or into a component instance's slot (insert_in_slot), with recursive nested-component trees via component_schema.slots.4 params
Data Tool - Component builder to insert component instances on a page via the public-mcp headless surface. Supports inserting into an element (insert_in_element) or into a component instance's slot (insert_in_slot), with recursive nested-component trees via component_schema.slots.
actionsarrayrequiredComponent insertion actions executed sequentially.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id that exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_component_props_tool#Data tool - Component props tool to manage prop definitions and set or reset prop values on component instances.4 params
Data tool - Component props tool to manage prop definitions and set or reset prop values on component instances.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_component_tool#Data tool - Component tool to manage component definitions and instances: create, query, transform, insert, unlink.4 params
Data tool - Component tool to manage component definitions and instances: create, query, transform, insert, unlink.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_component_variants_tool#Data tool - Component variants tool to manage variants and per-variant style overrides.4 params
Data tool - Component variants tool to manage variants and per-variant style overrides.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_element_builder#Data Tool - Element builder to create elements on a page via the public-mcp headless surface.4 params
Data Tool - Element builder to create elements on a page via the public-mcp headless surface.
actionsarrayrequiredElement creation actions executed sequentially. Each item creates one element at the requested position.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id that exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_element_settings_tool#Read and write element settings and data bindings on a Webflow page: get or set settings, discover bindable sources, and set tag, visibility, and DOM id via static values or prop bindings.4 params
Read and write element settings and data bindings on a Webflow page: get or set settings, discover bindable sources, and set tag, visibility, and DOM id via static values or prop bindings.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredWebflow page ID. Use list_pages to discover page IDs.siteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_element_tool#Inspect and modify elements on a Webflow page: query the element tree, move or remove elements, and edit text, styles, links, images, heading levels, attributes, and display names.4 params
Inspect and modify elements on a Webflow page: query the element tree, move or remove elements, and edit text, styles, links, images, heading levels, attributes, and display names.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredWebflow page ID. Use list_pages to discover page IDs.siteIdstringrequiredWebflow site ID. Discover with list_sites.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.
actionsarrayrequiredNo description.contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).webflowmcp_data_fonts_tool#Data tool - Manage a site's uploaded custom fonts: list and inspect them, register new fonts and replace their files (a two-step upload flow), update font metadata, and remove fonts individually or in batches.2 params
Data tool - Manage a site's uploaded custom fonts: list and inspect them, register new fonts and replace their files (a two-step upload flow), update font metadata, and remove fonts individually or in batches.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_forms_tool#Data tool - Read forms and manage form submissions on a site. Actions: list_forms, get_form, list_site_form_submissions, list_form_submissions, get_form_submission, update_form_submission, delete_form_submission.2 params
Data tool - Read forms and manage form submissions on a site. Actions: list_forms, get_form, list_site_form_submissions, list_form_submissions, get_form_submission, update_form_submission, delete_form_submission.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.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.
actionsarrayrequiredNo description.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_pages_tool#Data tool - Pages tool to perform actions like list pages, get page metadata, update page settings, create a page, bulk update page settings, manage branches and their staging previews (branch actions require the site's workspace to be on an Enterprise plan), and read or write JSON-LD schema markup for pages in bulk.2 params
Data tool - Pages tool to perform actions like list pages, get page metadata, update page settings, create a page, bulk update page settings, manage branches and their staging previews (branch actions require the site's workspace to be on an Enterprise plan), and read or write JSON-LD schema markup for pages in bulk.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_scripts_tool#Data tool - Scripts tool to manage custom code scripts. Register, apply, update, and remove scripts at the site or page level, and read or write freeform head/footer custom code blocks.2 params
Data tool - Scripts tool to manage custom code scripts. Register, apply, update, and remove scripts at the site or page level, and read or write freeform head/footer custom code blocks.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.webflowmcp_data_sitemap_tool#Data tool - Manage sitemap indexing status for CMS collection items and static pages. Read and update whether pages and collection items appear in a site's generated sitemap. All endpoints are under the /beta namespace. Folder pages, collection template pages, and utility pages are not supported for page endpoints.2 params
Data tool - Manage sitemap indexing status for CMS collection items and static pages. Read and update whether pages and collection items appear in a site's generated sitemap. All endpoints are under the /beta namespace. Folder pages, collection template pages, and utility pages are not supported for page endpoints.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.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
actionsarrayrequiredNo description.contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).webflowmcp_data_style_tool#Data Tool - Style tool to perform actions like get all styles, create a new style, update a style, query styles, remove a style, and manage style variable modes4 params
Data Tool - Style tool to perform actions like get all styles, create a new style, update a style, query styles, remove a style, and manage style variable modes
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.webflowmcp_data_variable_tool#Data Tool - Variable tool to perform actions like create variable, get all variables, query variables, update variable, rename and delete variables, and reorder variable collections.4 params
Data Tool - Variable tool to perform actions like create variable, get all variables, query variables, update variable, rename and delete variables, and reorder variable collections.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.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.
actionsarrayrequiredNo description.contextstringrequiredBrief description of why this tool is being called in context of the user goal (15-25 words, third-person).webflowmcp_data_whtml_builder#Data Tool - WHTML builder to insert elements from HTML and CSS strings on a page via the public-mcp headless surface. Accepts HTML markup and optional raw CSS rules, constructs WHTML, and inserts it into a parent element.4 params
Data Tool - WHTML builder to insert elements from HTML and CSS strings on a page via the public-mcp headless surface. Accepts HTML markup and optional raw CSS rules, constructs WHTML, and inserts it into a parent element.
actionsarrayrequiredWHTML insertion actions executed sequentially. Each item inserts one HTML/CSS fragment at the requested position.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.pageIdstringrequiredAny valid page id that exists in the sitesiteIdstringrequiredWebflow site ID. Discover with list_sites.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.
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.
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_designer_tool#Interact with the user's live Webflow Designer session — select an element on the canvas or read which element is currently selected, navigate the canvas between pages and component canvases, switch to or read the current page, list a page's branches, read the current branch ID, parent page ID, and Designer mode, enter, exit, or inspect the current component view, and read all breakpoints (media queries) configured for the site.3 params
Interact with the user's live Webflow Designer session — select an element on the canvas or read which element is currently selected, navigate the canvas between pages and component canvases, switch to or read the current page, list a page's branches, read the current branch ID, parent page ID, and Designer mode, enter, exit, or inspect the current component view, and read all breakpoints (media queries) configured for the site.
actionsarrayrequiredExecuted sequentially. Each item must include label and exactly one action property.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.siteIdstringrequiredWebflow site ID. Discover with list_sites.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.
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.
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
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_asset_preview#Get an image preview of a site asset by its asset ID. Fetches the asset's metadata, downloads the smallest available image variant (or the original file when no variants exist), and returns the image content. Works with any image content type (e.g. JPG, PNG, GIF, WEBP); non-image files and files larger than 2 MB return an error instead of an image. Returns a 404 error if the asset does not exist or has been deleted.2 params
Get an image preview of a site asset by its asset ID. Fetches the asset's metadata, downloads the smallest available image variant (or the original file when no variants exist), and returns the image content. Works with any image content type (e.g. JPG, PNG, GIF, WEBP); non-image files and files larger than 2 MB return an error instead of an image. Returns a 404 error if the asset does not exist or has been deleted.
asset_idstringrequiredThe asset ID to preview. Discover asset IDs via data_assets_tool > list_assets.contextstringrequiredDescription of what the user is trying to accomplish, used to select the right action.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.
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 fromwebflowmcp_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.
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
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.
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.
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.
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.