Skip to content

Commit b769bda

Browse files
stephencmestephencme
authored
Merge pull request #28 from webflow/feat/remote-mcp
feat: add Authorization header, remote MCP server support
2 parents e1e938d + 6c70495 commit b769bda

File tree

11 files changed

+12666
-2397
lines changed

11 files changed

+12666
-2397
lines changed

‎.gitignore‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
.DS_Store
21
.env
32
.prettierrc
4-
/.vscode
5-
/dist
6-
/node_modules
3+
.wrangler/
4+
dist/
5+
node_modules/
6+
7+
# System
8+
.DS_Store
9+
.idea/
10+
.vscode/

‎README.md‎

Lines changed: 72 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Webflow MCP
22

3-
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 Clients to interact with the [Webflow APIs](https://developers.webflow.com/data/reference) through the Model Context Protocol (MCP). Learn more about Webflow's APIs in the [developer documentation](https://developers.webflow.com/data/reference).
3+
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).
44

55
[![npm shield](https://img.shields.io/npm/v/webflow-mcp-server)](https://www.npmjs.com/package/webflow-mcp-server)
66
[![fern shield](https://img.shields.io/badge/%F0%9F%8C%BF-Built%20with%20Fern-brightgreen)](https://buildwithfern.com/?utm_source=github&utm_medium=github&utm_campaign=readme&utm_source=https%3A%2F%2Fgithub.com%2Fwebflow%2Fmcp-server)
@@ -15,42 +15,60 @@ A Node.js server implementing Model Context Protocol (MCP) for Webflow using the
1515

1616
1. **Get your Webflow API token**
1717

18-
- Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by)
19-
- Log in and generate a token
20-
- Copy the token from the Request Generator
21-
![Get API Token](https://prod.ferndocs.com/_next/image?url=https%3A%2F%2Ffiles.buildwithfern.com%2Fwebflow-preview-6a549203-c0da-4038-8adf-1dbed286cb83.docs.buildwithfern.com%2F2025-03-28T17%3A56%3A04.435Z%2Fassets%2Fimages%2Fapi-key-playground.png&w=3840&q=75)
18+
- Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by)
19+
- Log in and generate a token
20+
- Copy the token from the Request Generator
21+
![Get API Token](https://prod.ferndocs.com/_next/image?url=https%3A%2F%2Ffiles.buildwithfern.com%2Fwebflow-preview-6a549203-c0da-4038-8adf-1dbed286cb83.docs.buildwithfern.com%2F2025-03-28T17%3A56%3A04.435Z%2Fassets%2Fimages%2Fapi-key-playground.png&w=3840&q=75)
2222

2323
2. **Add to your AI editor**
2424

25-
```json
26-
{
27-
"mcpServers": {
28-
"webflow": {
29-
"command": "npx",
30-
"args": ["-y", "webflow-mcp-server@0.3.0"],
31-
"env": {
32-
"WEBFLOW_TOKEN": "YOUR_API_TOKEN"
33-
}
34-
}
35-
}
36-
}
37-
```
38-
39-
**For Cursor:**
40-
41-
1. Go to Settings → Cursor Settings → MCP
42-
2. Click `+ Add New Global MCP Server`
43-
3. Paste configuration
44-
4. Replace `YOUR_API_TOKEN` with the token you copied earlier
45-
5. Save and **restart** Cursor
46-
47-
**For Claude Desktop:**
48-
49-
1. Open Settings → Developer
50-
2. Click `Edit Config`
51-
3. Open `claude_desktop_config.json` in a code editor and paste configuration
52-
4. Replace `YOUR_API_TOKEN` with the token you copied earlier
53-
5. Save and **restart** Claude
25+
```json
26+
{
27+
"mcpServers": {
28+
"webflow": {
29+
"command": "npx",
30+
"args": ["-y", "webflow-mcp-server@0.4.0"],
31+
"env": {
32+
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
33+
}
34+
}
35+
}
36+
}
37+
```
38+
39+
Or if you'd like to connect to Webflow's official remote MCP server:
40+
41+
```json
42+
{
43+
"mcpServers": {
44+
"webflow-remote": {
45+
"command": "npx",
46+
"args": [
47+
"-y",
48+
"mcp-remote",
49+
"<URL>/sse",
50+
"--header",
51+
"Authorization: Bearer <YOUR_WEBFLOW_TOKEN>"
52+
]
53+
}
54+
}
55+
}
56+
```
57+
58+
**For Cursor:**
59+
60+
1. Go to Settings → Cursor Settings → MCP
61+
2. Click `+ Add New Global MCP Server`
62+
3. Paste configuration
63+
4. Replace `YOUR_WEBFLOW_TOKEN` with the token you copied earlier
64+
5. Save and **restart** Cursor
65+
66+
**For Claude Desktop:**
67+
68+
1. Open Settings → Developer
69+
2. Click `Edit Config`
70+
3. Open `claude_desktop_config.json` in a code editor and paste configuration
71+
4. Replace `YOUR_WEBFLOW_TOKEN` with the token you copied earlier 5. Save and **restart** Claude
5472

5573
## ❓ Troubleshooting
5674

@@ -59,7 +77,7 @@ If you are having issues starting the server in your MCP client e.g. Cursor or C
5977
### Ensure you have a valid Webflow API token
6078

6179
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
62-
2. Replace `YOUR_API_TOKEN` in your MCP client configuration with the token you copied
80+
2. Replace `YOUR_WEBFLOW_TOKEN` in your MCP client configuration with the token you copied
6381
3. Save and **restart** your MCP client
6482

6583
### Ensure you have the Node and NPM installed
@@ -120,35 +138,40 @@ collection - fields - create - reference; // Create a reference field
120138
collection - fields - update; // Update a custom field
121139
collections - items - create - item - live; // Create items
122140
collections - items - update - items - live; // Update items
141+
collections - items - list - items; // List collection items
142+
collections - items - create - item; // Create collection items (staged)
143+
collections - items - update - items; // Update collection items (staged)
144+
collections - items - publish - items; // Publish collection items
123145
```
124146

125147
# 🗣️ Prompts & Resources
126148

127-
This implementation **does not** include prompts and resources. However, this may change in the future.
149+
This implementation **does not** include `prompts` or `resources` from the MCP specification. However, this may change in the future when there is broader support across popular MCP clients.
128150

129151
# 🚧 Development mode
130152

131153
If you want to run the server in development mode, you can install dependencies and run the server using the following command:
132154

133155
1. Clone and install:
134156

135-
```shell
136-
git clone git@github.com:webflow/mcp-server.git
137-
cd mcp-server
138-
npm install
139-
```
157+
```shell
158+
git clone git@github.com:webflow/mcp-server.git
159+
cd mcp-server
160+
npm install
161+
```
140162

141-
2. Add your token:
163+
2. Add your token to a `.env` file at the root of the project:
142164

143-
```shell
144-
# .env
145-
WEBFLOW_TOKEN=your_token_here
146-
```
165+
```shell
166+
# .env
167+
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
168+
```
147169

148170
3. Start development server:
149-
```shell
150-
npm run dev
151-
```
171+
172+
```shell
173+
npm start
174+
```
152175

153176
## 📄 Webflow Developer resources
154177

0 commit comments

Comments
 (0)