Version 1.2 of the Webflow MCP server adds new element tools, expanded CSS coverage, full variable management, webhook support, and MCP Bridge App improvements. If you are already using the MCP server, your agents and prompts automatically use this new version.

Elements

• Element builder v2: Agents can now construct arbitrarily deep element trees in a single call. The previous 3-level depth limit is removed, execution is faster, and more element types are supported.

• Before/after placement: Element builder, WHTML builder, and Component tools now support before and after positioning on creation. This gives agents precise control over where elements are inserted relative to siblings.

• Create elements from raw HTML: A new tool accepts a raw HTML string and converts it directly to Webflow elements.

• Element query: A new query tool lets agents search and filter elements by type, class, tag, or attribute. Results are returned as a structured tree, not a flat array.

• Cleaner get_all_elements response: The response is now a hierarchical tree with only essential data per node, reducing payload size.

• Child depth control on get_selected_element: A new optional depth parameter controls how many levels of children are returned. When omitted, the parameter defaults to the existing behavior.

• remove_element: Agents can now delete elements from the canvas. The tool returns a clear error when the target element does not exist.

Components

• Component editor with slot support: A new component editor supports no depth limit and slot definition on edit, mirroring the capabilities of element builder v2.

• unregister_component: Agents can now remove a component from a site. The tool returns a clear error when the component does not exist or has active instances.

• Read component instance slots: Agents can now read all slots defined on a component instance.

Styles

• 500+ CSS properties: The Style tool now covers 500+ CSS properties. Properties that were previously unsupported no longer fail silently.

• Improved style search: Style search now supports filtering by property, value, tag, and class name, returning more relevant results with less noise.

• remove_style: Agents can now delete a style from a site. The tool returns a clear error when the style does not exist or is currently in use.

Variables

• Custom variable creation: Agents can now create custom variables, including support for color-mix() and calc() expressions.

• Read custom variables: Agents can now read all custom variables defined on a site, including their expressions and resolved values.

• Search variables: A new search action on the Variable tool lets agents filter variables by name, type, or collection ID.

• Rename and delete variables: Agents can now rename or delete variables. The tool returns a clear error when the variable does not exist or is currently in use.

Webhooks

• data_webhook_tool: A new tool covers webhook management.

Enterprise

• list_site_activity: A new action on the Enterprise tool lets agents query site activity logs.

MCP Bridge App

• Improved UI and observability: The MCP Bridge App now surfaces tool execution stages, status, and timing in real time. Agents and engineers can view tool arguments and responses, export logs, and access quick links for common debugging actions.

• Improved heartbeat: The heartbeat interval is reduced to prevent premature timeouts. Agents are notified on connection loss and can reconnect without losing state.

Bug fixes

• Asset: corrupt asset silent failure: Tools that accept asset IDs now return a clear error when the asset does not exist, instead of failing silently. This update applies across all tools.

• CMS: locale ID required error: Fixed an error where the CMS tool incorrectly required a locale ID in contexts where it was not needed.

• Site: custom domain required error on publish: Fixed an error where publishing failed when no custom domain was set on the site.

• Styles: combo class creation bug: Creating a combo class when the base class already exists no longer fails. This behavior now matches the expected in-product behavior.

Resources

• Getting started guide - Setup instructions
• How it works - Tool reference and capabilities
• Skills - Agent skills
• Prompt library - Example prompts

These new functions are now available in the Designer API:

• webflow.getCurrentComponent(): Get the component that is currently being edited (Beta)
• element.getParentComponent(): Get the component that contains a given element (Beta)
• component.getSettings(): Get the name, group, and description of a component (Beta)
• component.setSettings(): Update one or more settings on a component (Beta)

Getting the selected component

You can now retrieve the component that is currently being edited with the new webflow.getCurrentComponent() function (Beta). If no component is being edited, the method returns null.

1
const component = await webflow.getCurrentComponent();
2
if (component) {
3
  const name = await component.getName();
4
  console.log(`Currently editing component: ${name}`);
5
  // Example: get all elements inside the active component
6
  const root = await component.getRootElement();
7
  const children = await root.getChildren();
8
  console.log(`Root has ${children.length} child element(s)`);
9
} else {
10
  console.log('Not currently editing a component.');
11
}

For more information, see Get the selected component.

Getting an element’s parent component

You can now retrieve the component that directly contains a given element with the new element.getParentComponent() function (Beta). If the element is not inside a component, the method returns null.

1
const element = await webflow.getSelectedElement();
2
if (element) {
3
  const parentComponent = await element.getParentComponent();
4
  if (parentComponent) {
5
    const name = await parentComponent.getName();
6
    console.log(`Element is inside component: ${name}`);
7
  } else {
8
    console.log('Element is not inside a component.');
9
  }
10
}

For more information, see Get the parent component.

Getting and setting component settings

The new component.getSettings() and component.setSettings() functions let you read and update a component’s name, group, and description in a single call:

1
const components = await webflow.getAllComponents();
2
const component = components[0];
3
4
// Read all settings at once
5
const settings = await component.getSettings();
6
console.log(settings.name);        // 'Hero Section'
7
console.log(settings.group);       // 'Sections'
8
console.log(settings.description); // 'A reusable hero with heading and CTA'
9
10
// Update only the description
11
await component.setSettings({
12
  description: 'Updated hero layout with video background',
13
});
14
15
// Update all settings at once
16
await component.setSettings({
17
  name: 'Hero Section v2',
18
  group: 'Sections',
19
  description: 'Redesigned hero component',
20
});

For more information, see:

• Get component settings
• Set component settings

You can now use the webflow.searchComponents(options) method (Beta) to search for Components by name or description. If you don’t provide a search parameter, the method returns all Components. If you provide a string search parameter as in the following example, the method returns Components with matching names or descriptions.

1
// Get all Components
2
const allComponents = await webflow.searchComponents();
3
/*
4
[
5
  {
6
    id: 'xxxx',
7
    name: 'Hero section',
8
    group: 'Sections',
9
    description: 'Lorem ipsum',
10
    instances: 3,
11
    canEdit: true,
12
    library: null,
13
  },
14
  {
15
    id: 'yyyy',
16
    name: 'Nav Bar',
17
    group: 'Navigation',
18
    description: '',
19
    instances: 5,
20
    canEdit: false,
21
    library: { name: 'Core Library', id: 'lib_123' },
22
  },
23
]
24
*/
25
26
// Search for Components by query
27
const heroes = await webflow.searchComponents({ q: 'Hero' });
28
/*
29
[
30
  {
31
    id: 'xxxx',
32
    name: 'Hero section',
33
    group: 'Sections',
34
    description: 'Lorem ipsum',
35
    instances: 3,
36
    canEdit: true,
37
    library: null,
38
  },
39
]
40
*/

For more information, see Search for Components.

You can now programmatically open a Component’s canvas or navigate to a page with the new webflow.openCanvas() method (Beta).

1
// Open a component canvas by ID
2
await webflow.openCanvas({ componentId: 'component-id' });
3
4
// Open a component canvas by reference
5
const components = await webflow.getAllComponents();
6
await webflow.openCanvas(components[0]);
7
8
// Navigate to a page by ID
9
await webflow.openCanvas({ pageId: 'page-id' });

Previously, Designer Extensions and MCP agents that needed to modify a Component’s internal structure had to rely on the user manually navigating to the component canvas. The openCanvas() method removes that manual step and enables fully automated Component workflows.

openCanvas() accepts a Component ID, a Component reference, or a ComponentElement (instance) reference to open the component canvas. It also accepts a page ID or Page reference to navigate to a page — equivalent to calling webflow.switchPage().

For more information, see Open a canvas.

These new and updated functions are now available in the Designer API:

• webflow.getComponentByName(name): Get a component by its name and optionally its group (Beta)
• component.getVariants(): Get all variants of a component (Beta)
• component.getSelectedVariant(): Get all variants of a component (Beta)

Retrieving a component by name

You can now retrieve a component by its name and optionally its group with the new webflow.getComponentByName() function (Beta):

1
// Fetch a component by name only
2
const heroSection = await webflow.getComponentByName('Hero');
3
console.log(heroSection.id);
4
5
// Fetch a component scoped to a group
6
const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
7
console.log(marketingHero.id);

For more information, see Get component by name (Beta).

Getting component variants

The new functions component.getVariants() and component.getSelectedVariant() get the variants of a component and the selected variant of a component, as in these examples:

1
const component = (await webflow.getAllComponents())[0];
2
const variants = await component.getVariants();
3
console.log(variants);
4
// [
5
//   { id: 'base', name: 'Primary', isSelected: true },
6
//   { id: 'xxxx', name: 'Secondary', isSelected: false },
7
// ]
8
// Find which variant the user is currently editing
9
const activeVariant = variants.find(v => v.isSelected);
10
console.log(`Currently editing: ${activeVariant?.name}`);

1
const selectedVariant = await heroComponent.getSelectedVariant();
2
/*
3
{
4
  id: 'variant-123',
5
  name: 'Secondary Hero',
6
  isSelected: true,
7
}
8
*/
9
// When no variant is explicitly selected, returns base
10
const base = await heroComponent.getSelectedVariant();
11
/*
12
{
13
  id: 'base',
14
  name: 'Primary',
15
  isSelected: true,
16
}
17
*/

For more information, see:

• Get all variants of a component: Get all variants of a component
• Get selected variant: Get all variants of a component

These new and updated functions are now available in the Designer API:

• webflow.registerComponent(): You can now create a component without passing a root element (Beta)
• webflow.getComponent(id): This new function returns a component by its ID (Beta)
• component.getInstanceCount(): This new function gets the total number of (Beta)instances of a component across an entire site

Also, these functions are updated to accept a tag name such as div, h2, or section instead of only a component or element preset:

• element.before(newElement)
• element.after(newElement)
• element.prepend(newElement)
• element.append(newElement)

Creating functions without passing a root element

You can now create a component with the webflow.registerComponent() function without passing a root element. Instead, you can pass an object with the name for the new component and optionally a group and description, as in this example:

1
// Create a hero component in the Sections group that is not within an existing element
2
const hero = await webflow.registerComponent({
3
  name: 'Hero Section',
4
  group: 'Sections',
5
  description: 'A reusable hero section with heading and CTA',
6
});

For more information, see Create a component.

Getting components by ID

Previously, to access a component in the Designer API, you had to get a list of components with the webflow.getAllComponents() function and filter by ID. Now you can use the webflow.getComponent(id) function to get a component by its ID, as in this example:

1
const componentId = '4a669354-353a-97eb-795c-4471b406e043';
2
const component = await webflow.getComponent(componentId);
3
console.log(component.id); // '4a669354-353a-97eb-795c-4471b406e043'
4
5
const componentName = await component.getName();
6
console.log(componentName); // 'Component Name'

For more information, see Get component by ID.

Getting the number of instances of a component

You can now get the total number of instances of a component across an entire site with the webflow.getInstanceCount() function:

1
// Audit component usage across the site
2
const components = await webflow.getAllComponents();
3
for (const component of components) {
4
  const name = await component.getName();
5
  const count = await component.getInstanceCount();
6
  console.log(`${name}: ${count} instances`);
7
}
8
// Guard against removing a component that's still in use
9
const hero = components[0];
10
const instanceCount = await hero.getInstanceCount();
11
if (instanceCount > 0) {
12
  console.log(`Cannot safely remove — ${instanceCount} instances exist`);
13
} else {
14
  await webflow.unregisterComponent(hero);
15
}

For more information, see Get component instance count.

Inserting elements by tag name

Previously, when you used one of these functions to insert an element, you had to pass a component object or a preset from the webflow.elementPresets object:

• element.before(newElement)
• element.after(newElement)
• element.prepend(newElement)
• element.append(newElement)

Now, you can pass an element to create by the name of the tag, such as div, h2, or section, as in these examples:

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement();
3
4
if (selectedElement) {
5
  // Insert DIV after selected Element
6
  const newDiv = await selectedElement.after('div');
7
8
  // Print element details
9
  console.log(`${JSON.stringify(newDiv)}`);
10
}

For more information, see:

• Insert element before target element
• Insert element after target element
• Nest element as first child
• Nest element as last child

Similar to how it renames exported components and props, DevLink now renames or filters out exported custom attributes to ensure that the exported React code is valid.

• HTML5 standard names such as tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLength
• Attributes that have a React equivalent, such as class and for, are converted to the React equivalent, in this example className and htmlFor
• Attributes that match event handler names such as onClick and onMouseOver are filtered out, regardless of case
• Attributes that start with numbers are filtered out
• Attributes that are incomplete, such as data- and aria- are filtered out
• Attributes named with an empty string are filtered out
• Attributes containing invalid characters, such as my-😀-attr, are filtered out
• Any other invalid HTML5 attributes are filtered out

DevLink prints a warning to your CLI console, and adds JSDoc Invalid Attribute comments, when it filters out attributes due to these rules, except when removing attributes with an empty string as their name. For example, this exported code shows a warning about a custom attribute that was filtered out:

1
/**
2
 * ComponentWithInvalidAttributes
3
 *
4
 * @warning
5
 * The component could not be fully exported:
6
 * - Invalid attribute: \`onClick\`
7
 */
8
export function ComponentWithInvalidAttributes() {
9
  return <Builtin.Block tag="div" data-testid="my-block" aria-label="My Block" />;
10
}

For more information, see What DevLink Exports.

You can now update page-level metadata for up to 100 pages in a single request using the new bulk update page metadata endpoint.

Key capabilities

• Batch updates: Update title, slug, seo, and openGraph fields for multiple pages at once.
• Localization support: Target different secondary locales by including a localeId per page entry. The same page ID can appear multiple times with different locales.
• Validation: Duplicate id + localeId combinations return a 400 error. All pages must belong to the same site.

DevLink now renames exported components and props to ensure that the generated React code has valid, collision-free identifiers. Here is a summary of the changes that it makes:

Components

DevLink sanitizes exported component names to handle:

• Emojis and special characters: My 😀 Component → MyComponent
• Numbers at the start: 123 → UnknownComponent123, 1Component → UnknownComponent1Component
• Reserved words: class → UnknownComponentClass
• Empty or whitespace-only names: "" or " " → UnknownComponent
• Collisions: Multiple components named MyComponent → MyComponent, MyComponent2, MyComponent3

Props

DevLink sanitizes exported prop names to handle:

• Emojis and special characters: 😀 → unknownProp
• Numbers at the start: 123 → unknownProp123, 1prop → unknownProp1Prop
• Reserved words: return → returnProp, private → privateProp
• React reserved props: key → keyProp, ref → refProp
• HTML attributes for component props: class → classProp, for → forProp
• Empty or whitespace-only names: "" or " " → unknownProp

Note: HTML attributes like data-* and aria-* are preserved as-is and not sanitized.

What’s Fixed

This update fixes several critical issues in the previous system:

• No more leading underscores: Previously, names starting with numbers like 123 would become _123 or __123, which violates JavaScript naming conventions
• Better handling of reserved words: Component props named class or for now become classProp and forProp instead of _class and _for
• React conflicts resolved: Props named key or ref now become keyProp and refProp to avoid conflicts with React’s special props
• Fallback for invalid names: Empty or whitespace-only names now get meaningful fallback names instead of breaking

For more information, see What DevLink Exports.

Data API bug fix

Previously, when a component prop was bound to a custom attribute, the Data API did not return that content as an override for the component instance as it did for other props. Now, the API returns that override data like other overrides and allows you to update it.

This fix affects these endpoints:

• GET /v2/pages/:page_id/dom
• POST /v2/pages/:page_id/dom
• GET /v2/sites/:site_id/components/:component_id/dom
• POST /v2/sites/:site_id/components/:component_id/dom
• GET /v2/sites/:site_id/components/:component_id/properties
• POST /v2/sites/:site_id/components/:component_id/properties