Skip to main content
Book a demo

Connect Webflow to VS Code

Give VS Code governed access to Webflow’s 34 tools through Runlayer, with identity, policy, scanning, and audit on every call.

Book a demo VS Code setup guide

Set up

Add Webflow to VS Code in four steps

Admins approve the server once. Everyone in VS Code then gets it through the same governed connection.

  1. 1

    Approve Webflow in Runlayer

    Add Webflow from the catalog and choose who can use it and which of its tools are allowed.

  2. 2

    Connect VS Code to Runlayer

    Runlayer’s CLI installs the Runlayer Plugin natively in VS Code; users can also add it over MCP. With direct tool listing turned on for your deployment, Webflow’s 34 tools show up in VS Code’s own tool list (VS Code 1.103 or newer).

    VS Code setup guide
  3. 3

    Sign in to Webflow

    Sign in the way Webflow requires. Runlayer holds the credentials so they stay out of the client’s configuration.

  4. 4

    Use Webflow from VS Code

    Webflow’s approved tools appear in VS Code. Every call is checked against policy and recorded.

Tools

34 Webflow tools in VS Code

Runlayer policy decides which of these VS Code users can call. 4 read data only.

  • Ask Webflow AI

    Ask Webflow AI about anything related to Webflow API.

  • Designer asset tool

    Designer Tool - Upload an image from a publicly accessible URL as a Webflow asset.

  • Data agent instructions tool

    Data tool - Manage and generate agent instructions (rules and skills) for a site.

  • 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.

  • Data apps tool

    Inspect and manage Webflow Cloud apps, GitHub sources, environments, variable metadata, deployments, domains, and logs, including destructive lifecycle changes and deployment triggers.

  • Data assets tool

    Data tool - Manage Webflow site assets and asset folders via the Data API.

  • Data campaigns tool

    Campaign Hub sites, campaigns, page-variation personalization, and campaign analytics.

  • 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)

See all 34 Webflow tools

Control

What Runlayer can see and stop in VS Code

Some controls apply to every client at the gateway. Others depend on what VS Code exposes to Runlayer.

  • Gateway policy (available)

    Every Webflow call from VS Code passes through Runlayer, where your policies can allow, alert, mask, or block it.

  • Audit trail (available)

    Each call is recorded with the user, VS Code as the client, the tool, and the policy and scanner decisions.

  • Client hooks (available)

    Capture supported prompts, reasoning, local and MCP tool calls, responses, and scanner decisions in real time.

  • Stop a call before it runs (available)

    Runlayer can deny a tool call before VS Code runs it.

  • Block output after it runs (available)

    Runlayer can block a tool’s output before VS Code’s model sees it.

  • Redact output in place (available)

    Runlayer can mask sensitive parts of a tool’s output in VS Code and pass the rest through.

Frequently asked questions

Connect more

Find another combination