Skip to main content

Connect Marker.io MCP to Webflow

Updated today

Someone reports a broken link on your Webflow site through Marker.io. Instead of switching between tabs, your AI tool reads the issue and fixes the content directly in Webflow. This guide shows how to connect both Marker.io MCP and Webflow MCP to the same AI tool.

What you can do

When both servers are connected, your AI tool can:

  • Read Marker.io issues, screenshots, properties, and technical context

  • Update Webflow pages, CMS collection items, and custom code

  • Fix typos, broken links, and outdated content from a single prompt

  • Mark issues as resolved in Marker.io when the fix is done

For a full list of Marker.io MCP tools, see MCP Integration (Model Context Protocol).

Before you start

  • A Marker.io account with at least one website project

  • Marker.io MCP connected to your AI tool. Follow MCP setup guides if you haven't done this yet.

  • A Webflow site

  • An MCP-compatible AI tool (Claude Code, Cursor, VS Code, or similar)

Webflow setup

Webflow has an official remote MCP server. No plugin or API token needed. Authentication happens through OAuth in your browser. See the Webflow MCP documentation for details.

The Webflow MCP server URL is:

https://mcp.webflow.com/mcp

Add to your AI tool

Example for Claude Code

claude mcp add --transport http marker-io https://connect.marker.io/mcp
claude mcp add --transport http webflow https://mcp.webflow.com/mcp

On first use, both servers will open a browser window to authorize access.

Using a different AI tool? See MCP setup guides for Marker.io and add the Webflow server URL alongside it.

Designer API access (optional)

The Webflow MCP server can also modify elements directly on the Webflow canvas. To enable this:

  1. Open your site in the Webflow Designer

  2. Press E to open the Apps panel

  3. Launch the Webflow MCP Bridge App

  4. Keep it open during your session

This is only needed for design changes. Content updates (pages, CMS items) work without it.

Workflow: fix a content issue

Here's what a typical workflow looks like once both servers are connected.

  1. A reporter submits an issue in Marker.io: "The pricing page still says '$9/month' but we updated it to '$12/month'."

  2. In your AI tool, ask: "List open issues from Marker.io."

  3. The AI reads the issue details and screenshot.

  4. Ask: "Fix the pricing mentioned in this issue on Webflow."

  5. The AI finds the page in Webflow and updates the content.

  6. Ask: "Mark the Marker.io issue as resolved."

That's it. No tab switching, no copy-pasting.

Tips

  • You can ask the AI to handle multiple issues in a single prompt.

  • The AI can read Marker.io screenshots to understand visual context, not just text descriptions.

  • For code-level bugs (not content), pair Marker.io MCP with your code editor instead of Webflow MCP.

  • To install the Marker.io reporting widget on your Webflow site, see Webflow Integration.

Need Help?

If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.

Did this answer your question?