How to connect Webflow MCP with TypeScript

Ask Webflow AI about anything related to Webflow API.

Data tool - Manage and generate agent instructions (rules and skills) for a site. Actions: search_instructions, read_instruction, create_instruction, update_instruction, delete_instruction, move_instruction, generate_instruction. Paths must follow 'rules/<name>.md', 'rules/<name>.mdc', or '<skill-name>/SKILL.md'. Generation is asynchronous and saves a draft: call generate_instruction to start, then call it again with task_id set to the returned taskId until it finishes and read the returned resourceUri.

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.

Inspect and manage Webflow Cloud apps, GitHub sources, environments, variable metadata, deployments, domains, and logs, including destructive lifecycle changes and deployment triggers. Create GitHub-source apps; use the Webflow CLI for CLI/local-source app creation, local-source deployment, and environment variable writes. This tool does not accept environment variable values. list_variables returns plaintext non-secret values and omits secret values. Use data_variable_tool for Designer variables. Raw build-phase/runtime logs may contain secrets.

Campaign Hub sites, campaigns, page-variation personalization, and campaign analytics. Discover sites via list_campaign_hub_sites (workspace from list_sites/get_site). Create campaigns from a confirmed markdown_brief; page content generates async — get_campaign_task_status is the only completion signal. Reads return metadata (id, name, brief, markdownBrief, state, timestamps, landingPage.pageId); updates are metadata-only; delete_campaign hard-deletes campaign/assets (page archived). Page variations: suggestions, create, list field matrix, bulk fieldValues update, delete. personalize_property creates and binds PlainText to ComponentInstance props; personalize_element creates and binds PlainText to non-component element settings (key from get_settings); unlink_delete_personalized_field permanently removes a field across all variations; update_personalized_field renames a field display name (slug/type can't be changed). Analytics: time series, form submits, engaged accounts, opportunity summary (optional page_variation_id).

Data tool - CMS tool to manage collections, collection fields (static/option/reference), collection field groups, and collection items (list, create, update, publish, unpublish, delete)

Data tool for localizing pages and components into secondary locales. Read and update static page content, component content, and component property overrides for any non-primary locale. Writes target secondary locales only — the primary (default) locale cannot be edited through this tool. Also includes list_components for discovering component IDs to localize.

Data tool - Pages tool to perform actions like list pages, get page metadata, update page settings, create a page, bulk update page settings, manage page branches and their staging previews (page-branch actions require Enterprise), list or create site-scope branches / Releases via list_site_branches and create_site_branch (beta MCP only), and read or write JSON-LD schema markup for pages in bulk.

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.

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

Data tool - A comment in Webflow is user feedback attached to a specific element or page inside the Designer, stored as a top-level thread with optional replies. Each comment includes author info, timestamps, content, resolved state, and design-context metadata like page location and breakpoint. Use this tool to inspect feedback discussions, filter threads by page, resolution status, or creation date, search for comment users by email, and create replies to existing threads.

Data tool - Enterprise tool to perform actions like manage 301 redirects, manage robots.txt and more. This tool only works if User's workspace plan is Enterprise or higher, else tool will return an error.

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.

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.

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

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.

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.

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.

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

Data tool - Component tool to manage component definitions and instances: create, query, transform, insert, unlink.

Data tool - Component props tool to manage prop definitions and set or reset prop values on component instances.

Data tool - Component variants tool to manage variants and per-variant style overrides.

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.

Manage IX3 interactions (animations) on a site: list, get, create, update, and delete. Creates take the full definition (object-format triggers and inline timelines) in one call. Animate opacity under wf:transform (e.g. ["0%","100%"]), not wf:style. Headless; does not require Designer or the MCP Bridge. For legal payload shapes, call action guide or read MCP resource webflow://guides/interactions.

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.

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.

Data Tool - Element builder to create elements on a page via the public-mcp headless surface.

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.

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.

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.

Designer Tool - Element snapshot tool to perform actions like get element snapshot. helpful to get element snapshot for debugging and more and visual feedback.

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.

Provides essential guidelines and best practices for effectively using the Webflow tools. Call this tool to understand recommended workflows and important considerations before performing actions. ALWAYS CALL THIS TOOL FIRST BEFORE CALLING ANY OTHER TOOLS. ALWAYS CALL THIS TOOL FIRST BEFORE CALLING ANY OTHER TOOLS.

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