How to integrate Webflow MCP with OpenCode

Trusted by teams at
AWS
Glean
Zoom
Airtable
GET STARTED FOR FREEGET A DEMO

30 min · no commitment · see it on your stack

Webflow logo
OpenCode logo
divider

How to integrate Webflow MCP with OpenCode

This guide explains how to connect Webflow MCP to OpenCode using Composio Connect, which simplifies OAuth, API changes, and reliability concerns.

There are two ways to set this up:

Also integrate Webflow with

Why use Composio?

Composio provides a single MCP server or CLI tool that exposes a set of meta-tools, allowing you to:

  • Connect to 1,000+ apps with on-demand tool loading, so you do not fill your LLM context window with unnecessary tool definitions.
  • Use programmatic tool calling through a remote Bash tool, letting LLMs write their own code to handle complex tool chaining. This reduces back-and-forth for frequent tool calls.
  • Handle large tool responses outside the LLM context to keep conversations lean.

Connect Webflow with OpenCode

Option 1: Using Composio CLI

1. Install Composio CLI

Install the Composio CLI, authenticate, and initialize your project:

bash
# Install the Composio CLI
curl -fsSL https://composio.dev/install | bash

# Authenticate with Composio
composio login

During login, you will be redirected to the sign-in page. Finish the flow and you are all set.

Composio CLI authorization screen

2. Authorize Webflow

Once the CLI is installed, it is essentially done. Give OpenCode access to your apps with these steps:

  1. Launch OpenCode.
  2. Prompt it to "Authenticate with Webflow Composio".
  3. Complete the authentication and authorization flow, and your Webflow integration is all set.
  4. Start asking anything you want.

Option 2: Using Composio MCP

You can also connect Webflow to OpenCode by adding Composio as an MCP server through the OpenCode CLI.

1. Add the Composio MCP server

bash
opencode mcp add

This launches an interactive prompt.

2. Fill in the fields

FieldValue
Namecomposio
Typeremote
URLhttps://connect.composio.dev/mcp
Require OAuthYes
Have client IDNo
OpenCode MCP server interactive prompt for Composio

Alternatively, you can skip the interactive prompt and paste the configuration directly into your OpenCode config file.

Open your global OpenCode config:

bash
open ~/.config/opencode/opencode.json

Add this under the mcp key and save the file.

bash
{
  "mcp": {
    "composio": {
      "type": "remote",
      "url": "https://connect.composio.dev/mcp",
      "enabled": true
    }
  }
}

3. Authenticate

Authenticate the Composio MCP server you just added:

bash
opencode mcp auth composio

This opens a browser session. Authorize Composio and you are done.

Composio browser authorization for OpenCode MCP

4. Verify installation

bash
opencode mcp list

5. Connect Webflow with OpenCode

Now, in the chat, ask the agent to connect to Webflow or give it any Webflow-related task.

For example, ask it to:

  • "Add a new blog post to your site"
  • "List all products in your store collection"
  • "Get details for order #12345"

It will prompt you to authenticate and authorize access to Webflow.

That is it. Composio tools are now available in OpenCode, and your Webflow account is ready to use.

Supported Tools & Triggers

Tools
Create Webflow Collection ItemThis tool creates a new item in a specified webflow collection.
Delete Webflow Collection ItemThis tool allows you to delete a specific item from a collection in webflow.
Fulfill OrderThis tool allows you to mark an order as fulfilled in webflow's e-commerce system.
Get Collection DetailsRetrieves a specific collection by its id from a webflow site.
Get Collection ItemThis tool retrieves a specific item from a webflow collection.
Get Item InventoryThis tool retrieves the current inventory levels for a specific item in a webflow collection.
Get Order DetailsThis tool retrieves detailed information about a specific order in webflow.
Get Webflow Site InformationThis tool retrieves detailed information about a specific webflow site.
List Collection ItemsThis tool retrieves a list of items from a specified collection in webflow.
List Webflow CollectionsThis tool retrieves a list of all collections for a given webflow site.
List Form SubmissionsThis tool retrieves a list of form submissions for a specific webflow site.
List Webflow OrdersThis tool retrieves a list of all orders for a specified webflow site using the get /sites/{site id}/orders endpoint.
List PagesThis tool retrieves a list of all pages for a specified webflow site.
List Webflow SitesThis tool retrieves a list of all webflow sites accessible to the authenticated user.
Publish Webflow SiteThis tool publishes a webflow site, making all staged changes live.
Refund OrderThis tool allows you to refund a webflow e-commerce order.
Unfulfill OrderThis tool allows you to mark a previously fulfilled order as unfulfilled in webflow.
Update Webflow Collection ItemThis tool allows updating an existing item in a webflow collection using the patch /collections/{collection id}/items/{item id} endpoint.
Update Item InventoryThis tool allows you to update the inventory levels of a specific sku item in your webflow e-commerce site by either setting the inventory quantity directly or updating it incrementally.
Update OrderThis tool allows updating specific fields of an existing order in webflow.
Upload Asset to WebflowThis tool allows users to upload assets (files, images, etc.

Way Forward

Now that Webflow is connected, extend your setup by connecting the other apps you already use every day, so your agent can run true cross-app workflows end to end.

  • Connect Calendar to turn threads into scheduled meetings automatically.
  • Connect Slack or Teams to post summaries, approvals, and alerts where your team works.
  • Connect Notion, Linear, Jira, or Asana to convert requests into tickets, tasks, and docs.
  • Connect Drive, Dropbox, or OneDrive to fetch, file, and share attachments without manual steps.

Start with one workflow you do repeatedly, then keep adding apps as you find new handoffs. With everything behind a single MCP endpoint, your agent can coordinate multiple tools safely and reliably in one conversation.

How to build Webflow MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Webflow MCP with ChatGPT

OpenAI Agents SDK logo

OpenAI Agents SDK

Use Webflow MCP with OpenAI Agents SDK

Claude Agent SDK logo

Claude Agent SDK

Use Webflow MCP with Claude Agent SDK

Claude Code logo

Claude Code

Use Webflow MCP with Claude Code

Claude Cowork logo

Claude Cowork

Use Webflow MCP with Claude Cowork

Codex logo

Codex

Use Webflow MCP with Codex

Cursor logo

Cursor

Use Webflow MCP with Cursor

OpenClaw logo

OpenClaw

Use Webflow MCP with OpenClaw

Hermes logo

Hermes

Use Webflow MCP with Hermes

CLI logo

CLI

Use Webflow MCP with CLI

Google ADK logo

Google ADK

Use Webflow MCP with Google ADK

LangChain logo

LangChain

Use Webflow MCP with LangChain

Vercel AI SDK logo

Vercel AI SDK

Use Webflow MCP with Vercel AI SDK

Mastra AI logo

Mastra AI

Use Webflow MCP with Mastra AI

LlamaIndex logo

LlamaIndex

Use Webflow MCP with LlamaIndex

CrewAI logo

CrewAI

Use Webflow MCP with CrewAI

VS Code logo

VS Code

Use Webflow MCP with VS Code

FAQ

What are the differences in Tool Router MCP and Webflow MCP?

With a standalone Webflow MCP server, the agents and LLMs can only access a fixed set of Webflow tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Webflow and many other apps based on the task at hand, all through a single MCP endpoint.

Can I use Tool Router MCP with OpenCode?

Yes, you can. OpenCode fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Webflow tools.

Can I manage the permissions and scopes for Webflow while using Tool Router?

Yes, absolutely. You can configure which Webflow scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

How safe is my data with Composio Tool Router?

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Webflow data and credentials are handled as safely as possible.

Used by agents from

Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai

Never worry about agent reliability

We handle tool reliability, observability, and security so you never have to second-guess an agent action.

Get started for freeGet a demo↗