Release
NO. 136
Date
Read
≈ 5 MIN
Tags
InteractionsCMSCloud

Webflow MCP, released 21 September 2026

Who approved that bounce? In Webflow, the Interactions panel knows

Webflow's MCP update lets a chat client build scroll, hover, load, and click interactions on GSAP that land in the Interactions panel as editable objects, query the CMS in a single request, and deploy a Webflow Cloud app without leaving the conversation. Plus a Tailwind runtime that lets a visual editor finally touch shadcn. A deep olive product changelog with a painted stage behind the latest release.

Read the release post
v136Art direction

The Release Notes

A product changelog on deep olive, with a painted stage under the latest release and a sticky version column beside every entry.

  • Release entry
  • Sticky version column
  • Version tag
  • Filled tag
  • Halftone screen
  • Date rail masthead
  • Live trigger demo
  • Painted ground

A changelog is the most honest page a product ships: dated entries, a version, a tag that says what kind of change it was, and the detail beside it. This issue is built as one. The masthead is the first entry's date rail. Each entry carries its version and tag at the head of a column that stays put, with the title, summary, and example prompts under it, while the items scroll past on the right.

The register is web-native, so nothing is dressed as a printed object. What carries the atmosphere is the ground: a deep warm olive, one chartreuse for tags and links, and a painting of a small stage with cards hanging from the fly bar, screened into the page through a halftone so the image gives way to flat colour instead of ending at a hard edge. Gloock, a high-contrast display serif, sits over Instrument Sans for reading and IBM Plex Mono for every label the changelog needs.

v2.1Added

Prompted motion, filed where a person can edit it

Webflow's MCP server now builds native interactions. The agent writes the animation; the Interactions panel keeps it.

  • TryAdd a fade-in on scroll to the hero section
  • TryMake this card lift and add a shadow on hover
  • TryBuild a staggered entrance for these three columns when the page loads

Scroll, hover, load, and click triggers, built on GSAP

Until this update an MCP client could lay out a Webflow page but could not animate it; motion meant custom code or a person in the Interactions panel. Now a prompt like "animate this card to rise into view on scroll" produces a real interaction with scroll triggers, hover states, load animations, and multi-step timelines, all running on GSAP, per Webflow's release post.

The panel shows the work

The interactions are native objects, not code hidden in an embed. They appear in the Interactions panel like anything built by hand, so timing and easing can be changed afterwards on the canvas. Webflow says the API can only build what the panel could build itself, which is the part worth noticing: nothing an agent creates ends up somewhere a designer cannot reach.

Trigger demoCSS only
HoverLift four pixels, tighten the shadow, brighten the border. 160ms.
LoadThis card rose into place 250ms after the page loaded, one keyframe, 700ms.

Hover the first card. The second ran once on load. Both stand still under a reduced-motion preference.

The four triggers on one line

The shorter product update lists the release as four capabilities: interactions built on IX3 and GSAP with scroll, hover, load, and click triggers; CMS sort, filter, and paging in one request; Webflow Cloud deploy, status, and debug from the MCP client; and a branch lifecycle (pull main, merge, preview to staging, check conflicts) for Enterprise plans. The engine underneath is the one documented at gsap.com.

FieldTechnique

Why no visual editor could touch shadcn

The code is yours, but the class names only exist after a build step. CrossUI's fix is to read them from the DOM instead.

  • Layer 1Official Tailwind engine running in the browser, no build step
  • Layer 2Class bridge: shadow DOM classes rewritten into light DOM
  • Layer 3MutationObserver catching classes composed at render time

Tailwind scans source text; shadcn assembles classes at runtime

Tailwind generates only the rules for class names it finds in your files, and scanning files is a build step. A shadcn button does not carry its classes as text at all; they come out of a CVA variant map and the props at render time. In a browser with no build, the classes are present in the DOM and mean nothing, which is why visual tooling has stopped at the door, as CrossUI's post lays out.

Collect classes from the DOM, not the source

CrossUI runs the official Tailwind engine in the browser, then bridges class names out of shadow DOM into light DOM where the runtime can see them, and watches the tree with a MutationObserver so classes composed by CVA maps, ternaries, or API-driven values still get their rules. The takeaway for anyone building an editor over a component library is the same one the Webflow story makes: the styling layer decides what a tool can and cannot reach.

The API only builds what the panel itself could build by hand, so nothing an agent creates ends up somewhere you can't reach.

Webflow, MCP release post, 21 September 2026
v2.1Improved

One call for the CMS, one chat for the deploy

The rest of the release removes the two places an agent had to leave the chat: the collection list and the hosting dashboard.

  • TryShow me the 10 most recently updated blog posts written by an editor
  • TryFind every product where the category is 'sale' and stock is under 5
  • TryPull the next 20 items after the last batch you gave me

Sort, filter, and page the CMS in a single call

Before this update an agent could sort and filter only a small set of fields, and only with the exact field name; anything more specific meant pulling the whole collection and sifting it, which burned tokens and sometimes broke the workflow. Now a sort on a custom field, a filter across a reference field, and a page limit can travel in one request, so an audit or a bulk edit asks for exactly the items it needs. The MCP reference carries the shape of the calls.

Deploy, check status, and debug without leaving the chat

Webflow Cloud is where full apps ship, and getting one live used to mean stepping outside MCP to a dashboard and its logs. The update lets the client deploy, read the deployment status, and debug from the same conversation. For a freelancer this is the workflow story of the day: the page, its motion, its content queries, and its deploy now share one transcript a client can read.

Branches, for Enterprise plans only

The branch lifecycle (pull main into a branch, merge it back, publish a preview to staging, check for conflicts first) is the one item in the release gated to Enterprise. Everyone else gets the interactions, the CMS queries, and the Cloud tools.

MoveBorrow this

The sticky release column

Give every changelog entry a narrow left column that stays on screen while its items scroll by.

Borrow this pattern

Lay each entry out as a two-column grid, two parts to three, and make the left column sticky. It holds the version, the date, the tag, the entry title, and a two-line summary; the right column holds the items. As the reader scrolls a long entry, the version and title ride along, so a screenshot taken anywhere in the entry still says which release it belongs to.

Use it on product changelogs, release notes, and any dated feed where each entry has several sub-items: a docs "what's new" page, a studio's project log, a course syllabus. What keeps it honest: the sticky column must be shorter than the viewport or it never sticks, so cap it at a title, a summary, and one short list; drop the stickiness under about 860px where the columns stack; and head the column with a one-line version tag (version, filled tag, date) so the entry reads as a release even when the column is not moving.

Grid
grid-template-columns: 2fr 3fr; align-items: start
Column
position: sticky; top: 24px on the left cell only
Marker
version, filled tag, date on one mono line at the head of the column
Mobile
one column, sticky removed, version line stays on top
NextPrompt Lab

Build the changelog yourself

One prompt that reproduces the release-notes page above, with its palette, type, markers, and the halftone screen.

Works in Claude Code, Cursor, Beaver Builder AI, Lovable, Bolt, v0, and Webflow's own MCP client.

prompt.mdCopy the whole block
Build a single-page product changelog (release notes) for a design tool. Register: web-native, dark warm ground. It must read as a real product surface, not a poster.

Ground and palette: deep warm olive #1F2318 for the page, panels one step lighter (#2B3121, #343B27), cream text #EEE9D6, secondary text #D5D2BC, labels #A9AE92, hairlines #454C36. One accent: chartreuse #C6DA46 for links, filled tags, and kickers, with dark olive text on any filled tag. A single ochre #D9A441 tag for one entry type. No gradients, no glow, no cyan, no purple.

Type: Gloock (display serif, weight 400) for the headline and entry titles only; Instrument Sans for body at 19px with line-height 1.7 on a 66ch measure; IBM Plex Mono at 12.5-15px for every label, marker, tag, and the date rail. Italics only in the deck's closing sentence and one pullquote.

Top bar: brand at left in the display serif, three mono uppercase links at right, one hairline under it.

Hero band ("latest release"): a full-bleed painted image as the ground (a dark stage with cut-paper cards hanging from a fly bar, olive and chartreuse), darkened by a left-to-right scrim so the right side reads as flat page colour, and screened into the page with a CSS halftone: a 7px radial-gradient dot pattern in the page colour, masked with a linear gradient so dots grow toward the right and bottom edges. Inside the band a two-column grid, 2fr 3fr. Left column is the masthead as a changelog date rail: a mono definition list with hairline rows for Release (issue number in the display serif), Date, Read time, and Tags (one filled chartreuse tag, two outlined). Right column: a mono chartreuse kicker naming the product and release date, the headline in the display serif at about 60px on a 17ch measure, a 21px deck, and one mono link with a hairline underline. On mobile the hero stacks and the rail moves below the headline.

Entries: each section is a release entry separated by a hairline, on the same 2fr 3fr grid with no header strip. The left column is sticky at top 24px and heads with a one-line mono version tag: version (cream, 15px), a filled tag (Added, Improved, Technique), and the date. Under it the entry title in the display serif (about 36px, 16ch), an 18px summary, and an optional "Try" list of example prompts as hairline-separated mono rows. Right column holds the items on a 66ch measure: a 22px semibold title, one or two sentences, one inline link per paragraph, hairline between items. Include one live demo panel in the first entry: two cards in a lighter panel, one with a hover lift (translateY(-4px), tighter shadow, 160ms) and one that rises into place once on load (700ms keyframe, 250ms delay), both guarded by prefers-reduced-motion.

Add one italic pullquote between entries at 28-32px in the quiet lime #CDD592 with a mono citation. Add a Design Move entry whose right column is a panel with a mono chartreuse label, two paragraphs, and a small mono definition list of the CSS. Add a Prompt Lab entry whose right column is a bordered panel with a mono header row (file name left, instruction right), a pre with wrapped 14.5px mono text capped at 620px tall, and a hairline footer. End with a Field Note on a second full-bleed painting (the stage floor from above) as a translucent olive box on the same 2fr 3fr grid (version tag and a short serif title left, one paragraph right), a numbered Sources list with hairline rows, a three-cell issue nav, and a mono colophon.

Guardrails: body never below 18px, line-height at least 1.6, no justified text, all small labels at WCAG AA against their real surface, no fake toggles or search fields, no pill radius except tags at 4px, panels at 10px, no accent left borders, no emoji, no readable text inside images, restrained motion only.
Block: scrolls past 620px. Read the whole prompt before pasting.
NoteField note

Read the limit, not the feature

The interesting clause in Webflow's post is the limit, not the feature: the API can only build what the panel can build. A capability that stays inside the surface a designer already edits is the version of this that survives a handoff.

RefsSources

Sources

Everything linked above, in order.

  2. Webflow MCP: interactions, faster CMS queries, and Webflow CloudWebflow product updates, launched 21 September 2026
  3. Webflow MCP server referenceWebflow developer docs