BugHerd MCP with Webflow | BugHerd Help Center

Use this guide to connect your BugHerd project to your Webflow website via MCP.

This will allow your AI coding agent to:

Prerequisites

Before connecting, ensure:

You have a BugHerd account and you have access to at least one BugHerd organization
You have an AI coding agent or IDE that allows for MCP configuration (e.g. Claude Code, Cursor, Gemini)
You have a Webflow account with Designer access to the website you want to edit

Find the install guide for the AI coding agent you use in this link and follow the steps:

Once you've installed the BugHerd MCP, you can verify the connection by trying this prompt:

“List my BugHerd projects”

If you see results, the connection is working.

Find the install guide for the AI coding agent you use in this link and follow the steps: https://developers.webflow.com/mcp/reference/getting-started

In this example, we detail the steps to install the Webflow MCP for Claude Code:

In your terminal, run:
```
claude mcp add --transport http webflow https://mcp.webflow.com/mcp
```
This will install the Webflow MCP in Claude Code.
Next, start Claude Code (type 'Claude' in your Terminal) and use the /mcp command to manage MCP servers:
```
/mcp list
```
Select the Webflow MCP server from the list and authenticate access for Claude Code.
Open your website in the Webflow Designer > Go to the Apps panel > launch the “Webflow MCP Bridge” app. Wait for the App to connect to the MCP Server.

Once you've installed the Webflow MCP, you can verify the connection by trying this prompt:

“List all my collections and show me their field structures”

If you see results, the connection is working.

This is where the magic happens. With the BugHerd MCP and Webflow MCP connected to your AI coding agent, try the following prompts:

First pull your todo tasks from BugHerd.
Try this prompt:
```
Show me all the tasks in the todo column for BugHerd project [your project ID]
```
(Note: you can try this with any status column, such as the Backlog)
Next, apply the fixes in Webflow.
Try this prompt:
```
Fix all the todo tasks. Call out anything that needs clarification. Move the tasks you've fixed to done.
```
(Note: In your browser, ensure you have your website opened in Webflow Designer and the “Webflow MCP Bridge” app launched. This is needed to make any edits on the canvas)

BugHerd will provide your AI coding agent with the necessary context to make the changes in your Webflow website.

Task type	Can AI fix these?
Text changes (i.e. Spelling, grammar, copy rewrites)	✅ (Generally reliable)
Styling changes	✅ (Generally reliable. Works better with specific values – e.g. "make font size 24px")
Image replacement	✅ (Requires image to be provided)
Functional change requests	⚠️ (May require more direction)
Bug fixes	⚠️ (May require more direction)

For a full list of what you can do with BugHerd's MCP, check out Getting Started with the BugHerd MCP server.

Need help? Contact [email protected] or start a chat from the app.