You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Node.js server implementing Model Context Protocol (MCP) for Webflow using the [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api). Enable AI agents to interact with Webflow APIs. Learn more about Webflow's Data API in the [developer documentation](https://developers.webflow.com/data/reference).
Get started by installing Webflow's remote MCP server, which uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.
17
-
18
-
For local installation, see the [NPM package documentation](https://www.npmjs.com/package/webflow-mcp-server).
16
+
Get started by installing Webflow's remote MCP server. The remote server uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.
19
17
20
18
### Requirements
21
19
@@ -25,6 +23,8 @@ For local installation, see the [NPM package documentation](https://www.npmjs.co
25
23
26
24
### Cursor
27
25
26
+
#### Add MCP server to Cursor
27
+
28
28
1. Go to `Settings → Cursor Settings → MCP & Integrations`.
29
29
2. Under MCP Tools, click `+ New MCP Server`.
30
30
3. Paste the following configuration into `.cursor/mcp.json` (or add the `webflow` part to your existing configuration):
@@ -39,9 +39,9 @@ For local installation, see the [NPM package documentation](https://www.npmjs.co
39
39
}
40
40
```
41
41
42
-
> Tip: Prefer a project-level `mcp.json` to avoid repeated auth prompts across multiple Cursor windows. See Cursor’s docs on configuration locations.
42
+
> Tip: You can create a project-level `mcp.json` to avoid repeated auth prompts across multiple Cursor windows. See Cursor’s docs on [configuration locations.](https://docs.cursor.com/en/context/mcp#configuration-locations)
43
43
44
-
4. Save and close the file. Cursor will automatically open an OAuth login page where you can authorize the Webflow sites and install the companion app.
44
+
4. Save and close the file. Cursor will automatically open an OAuth login page where you can authorize the Webflow sites.
45
45
46
46
#### Open the Webflow Designer
47
47
@@ -55,7 +55,7 @@ Give me a link to open <MY_SITE_NAME> in the Webflow Designer
55
55
#### Open the MCP Webflow App
56
56
57
57
1. In the Designer, open the Apps panel (press `E`).
58
-
2. Launch "Webflow MCP Bridge App" (installed during OAuth).
58
+
2. Launch your published "Webflow MCP Bridge App".
59
59
3. Wait for the app to connect to the MCP server.
60
60
61
61
#### Write your first prompt
@@ -74,7 +74,9 @@ Find older blog posts that mention similar topics and add internal links to my l
74
74
Create a hero section card on my home page with a CTA button and responsive design
2. Open developer settings: `File → Settings → Developer`.
@@ -91,27 +93,70 @@ Create a hero section card on my home page with a CTA button and responsive desi
91
93
}
92
94
```
93
95
94
-
4. Save and restart Claude Desktop (`Cmd/Ctrl + R`). An OAuth login page will open to authorize sites and install the companion app.
96
+
4. Save and restart Claude Desktop (`Cmd/Ctrl + R`). An OAuth login page will open to authorize sites.
95
97
96
98
#### Open the Webflow Designer
97
99
100
+
#### Open the MCP Webflow App
101
+
102
+
1. In the Designer, open the Apps panel (press `E`).
103
+
2. Launch your published "Webflow MCP Bridge App".
104
+
3. Wait for the app to connect to the MCP server.
105
+
106
+
#### Write your first prompt
107
+
108
+
```text
109
+
Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
110
+
```
111
+
112
+
```text
113
+
Find older blog posts that mention similar topics and add internal links to my latest post
114
+
```
115
+
116
+
```text
117
+
Create a hero section card on my home page with a CTA button and responsive design
118
+
```
119
+
120
+
---
121
+
98
122
## Local Installation
99
123
100
-
1.**Get your Webflow API token**
124
+
You can also configure thee MCP server to run locally. This requires:
125
+
126
+
- Creating and registering your own MCP Bridge App in a Webflow workspace with Admin permissions
127
+
- Configuring your AI client to start the local MCP server with a Webflow API token
128
+
129
+
### 1. Create and publish the MCP bridge app
130
+
131
+
Before connecting the local MCP server to your AI client, create and publish the Webflow MCP Bridge App in your workspace.
132
+
133
+
1. Register a Webflow App in your Workspace. Follow the [Register an App](https://developers.webflow.com/data/v2.0.0/docs/register-an-app) guidance for more details.
- Set your Client ID and Client Secret in a `.env` file for the App you registered.
141
+
- See the app repo’s README for exact variables and build steps.
142
+
4. Build and publish the Designer Extension to your workspace:
143
+
- Build per the repo instructions.
144
+
- Publish the App to your workspace via the Webflow Dashboard → Workspace settings → Apps & Integrations → Develop→ your App → “Publish Extension Version” and upload your `bundle.zip` file.
145
+
146
+
Once published to your workspace, open your MCP Bridge App in a site on your workspace from the Designer’s Apps panel.
101
147
102
-
- Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by)
103
-
- Log in and generate a token
104
-
- Copy the token from the Request Generator
105
-
148
+
### 2. Configure your AI client
106
149
107
-
2.**Add to your AI editor**
150
+
#### Cursor
151
+
152
+
Add to `.cursor/mcp.json`:
108
153
109
154
```json
110
155
{
111
156
"mcpServers": {
112
157
"webflow": {
113
158
"command": "npx",
114
-
"args": ["-y", "webflow-mcp-server@0.6.0"],
159
+
"args": ["-y", "webflow-mcp-server@latest"],
115
160
"env": {
116
161
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
117
162
}
@@ -120,32 +165,47 @@ Create a hero section card on my home page with a CTA button and responsive desi
120
165
}
121
166
```
122
167
123
-
**For Cursor:**
168
+
#### Claude desktop
169
+
170
+
Add to `claude_desktop_config.json`:
171
+
172
+
```json
173
+
{
174
+
"mcpServers": {
175
+
"webflow": {
176
+
"command": "npx",
177
+
"args": ["-y", "webflow-mcp-server@latest"],
178
+
"env": {
179
+
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
180
+
}
181
+
}
182
+
}
183
+
}
184
+
```
124
185
125
-
1. Go to Settings → Cursor Settings → MCP
126
-
2. Click `+ Add New Global MCP Server`
127
-
3. Paste configuration
128
-
4. Replace `YOUR_WEBFLOW_TOKEN` with the token you copied earlier
129
-
5. Save and **restart** Cursor
186
+
### 3. Use the MCP server with the Webflow Designer
130
187
131
-
**For Claude Desktop:**
188
+
- Open your site in the Webflow Designer.
189
+
- Open the Apps panel (press `E`) and launch your published “Webflow MCP Bridge App”.
190
+
- Wait for the app to connect to the MCP server, then use tools from your AI client.
132
191
133
-
1. Open Settings → Developer
134
-
2. Click `Edit Config`
135
-
3. Open `claude_desktop_config.json` in a code editor and paste configuration
136
-
4. Replace `YOUR_WEBFLOW_TOKEN` with the token you copied earlier 5. Save and **restart** Claude
If you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following.
141
201
142
-
### Ensure you have a valid Webflow API token
202
+
### Make sure you have a valid Webflow API token
143
203
144
204
1. Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by), log in and generate a token, then copy the token from the Request Generator
145
205
2. Replace `YOUR_WEBFLOW_TOKEN` in your MCP client configuration with the token you copied
See the `./tools` directory for a list of available tools
221
237
222
-
### Custom Code
223
-
224
-
```
225
-
custom code - add - inline - site - script // Register an inline script for a site
226
-
custom code - get - registered - site - script - list // List all scripts registered to a site
227
-
custom code - get - applied - site - script - list //Get all scripts applied to a site
228
-
custom code - delete site custom code // Remove scripts from a site
229
-
```
230
-
231
-
### Components
232
-
233
-
```
234
-
components - list; // List all components for a site
235
-
components - content - get; // Get static content from a component definition
236
-
components - content - update; // Update content within a component definition for secondary locales
237
-
components - properties - get; // Get the default property values of a component definition
238
-
components - properties - update; // Update the default property values of a component definition for secondary locales
239
-
```
240
-
241
-
### Ask Webflow AI
242
-
243
-
```
244
-
ask - webflow - ai; // Search Webflow Docs using AI search
245
-
```
246
-
247
-
# 🗣️ Prompts & Resources
238
+
# 🗣️ Prompts & resources
248
239
249
240
This implementation **doesn't** include `prompts` or `resources` from the MCP specification. However, this may change in the future when there is broader support across popular MCP clients.
250
241
251
-
# 🚧 Development mode
252
-
253
-
If you want to run the server in development mode, you can install dependencies and run the server using the following command:
254
-
255
-
1. Clone and install:
256
-
257
-
```shell
258
-
git clone git@github.com:webflow/mcp-server.git
259
-
cd mcp-server
260
-
npm install
261
-
```
262
-
263
-
2. Add your token to a `.env` file at the root of the project:
264
-
265
-
```shell
266
-
# .env
267
-
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
268
-
```
269
-
270
-
3. Start development server:
271
-
272
-
```shell
273
-
npm start
274
-
```
275
-
276
-
## 📄 Webflow Developer resources
242
+
## 📄 Webflow developer resources
277
243
278
244
-[Webflow API Documentation](https://developers.webflow.com/data/reference)
The `pages_update_static_content` endpoint currently only supports updates to localized static pages in secondary locales. Updates to static content in the default locale aren't supported and will result in errors.
0 commit comments