Skip to content

Commit 40129c5

Browse files
Merge branch 'main' into local-installation
2 parents 478ecfd + 45503cf commit 40129c5

File tree

1 file changed

+110
-1
lines changed

1 file changed

+110
-1
lines changed

README.md

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Get started by installing Webflow's remote MCP server. The remote server uses OA
1919

2020
- Node.js 22.3.0 or higher
2121

22-
> Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the Node.js compatibility section below.
22+
> Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the [Node.js compatibility guidance.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)
2323
2424
### Cursor
2525

@@ -122,6 +122,18 @@ Find older blog posts that mention similar topics and add internal links to my l
122122
Create a hero section card on my home page with a CTA button and responsive design
123123
```
124124

125+
### Reset your OAuth Token
126+
127+
To reset your OAuth token, run the following command in your terminal.
128+
129+
```bash
130+
rm -rf ~/.mcp-auth
131+
```
132+
133+
### Node.js compatibility
134+
135+
Please see the Node.js [compatibility guidance on Webflow's developer docs.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)
136+
125137
---
126138

127139
## Local Installation
@@ -207,6 +219,103 @@ $env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
207219
npx -y webflow-mcp-server@latest
208220
```
209221

222+
---
223+
224+
## Local Installation
225+
226+
You can also configure the MCP server to run locally. This requires:
227+
228+
- Creating and registering your own MCP Bridge App in a Webflow workspace with Admin permissions
229+
- Configuring your AI client to start the local MCP server with a Webflow API token
230+
231+
### 1. Create and publish the MCP bridge app
232+
233+
Before connecting the local MCP server to your AI client, create and publish the Webflow MCP Bridge App in your workspace.
234+
235+
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.
236+
2. Clone the MCP Bridge App code:
237+
```bash
238+
git clone https://github.com/virat21/webflow-mcp-bridge-app
239+
cd webflow-mcp-bridge-app
240+
```
241+
3. Configure the app with your App credentials:
242+
- Set your Client ID and Client Secret in an `.env` file for the App you registered.
243+
- See the app repo’s README for exact variables and build steps.
244+
4. Build and publish the Designer Extension to your workspace:
245+
- Build per the repo instructions.
246+
- 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.
247+
248+
Once published to your workspace, open your MCP Bridge App in a site on your workspace from the Designer’s Apps panel.
249+
250+
### 2. Configure your AI client
251+
252+
#### Cursor
253+
254+
Add to `.cursor/mcp.json`:
255+
256+
```json
257+
{
258+
"mcpServers": {
259+
"webflow": {
260+
"command": "npx",
261+
"args": ["-y", "webflow-mcp-server@latest"],
262+
"env": {
263+
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
264+
}
265+
}
266+
}
267+
}
268+
```
269+
270+
#### Claude desktop
271+
272+
Add to `claude_desktop_config.json`:
273+
274+
```json
275+
{
276+
"mcpServers": {
277+
"webflow": {
278+
"command": "npx",
279+
"args": ["-y", "webflow-mcp-server@latest"],
280+
"env": {
281+
"WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
282+
}
283+
}
284+
}
285+
}
286+
```
287+
288+
### 3. Use the MCP server with the Webflow Designer
289+
290+
- Open your site in the Webflow Designer.
291+
- Open the Apps panel (press `E`) and launch your published “Webflow MCP Bridge App”.
292+
- Wait for the app to connect to the MCP server, then use tools from your AI client.
293+
- If the Bridge App prompts for a local connection URL, call the `get_designer_app_connection_info` tool from your AI client and paste the returned `http://localhost:<port>` URL.
294+
295+
### Optional: Run locally via shell
296+
297+
```bash
298+
WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest
299+
```
300+
301+
```powershell
302+
# PowerShell
303+
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
304+
npx -y webflow-mcp-server@latest
305+
```
306+
307+
### Reset your OAuth Token
308+
309+
To reset your OAuth token, run the following command in your terminal.
310+
311+
```bash
312+
rm -rf ~/.mcp-auth
313+
```
314+
315+
### Node.js compatibility
316+
317+
Please see the Node.js [compatibility guidance on Webflow's developer docs.](https://developers.webflow.com/data/v2.0.0/docs/ai-tools#nodejs-compatibility)
318+
210319
## ❓ Troubleshooting
211320

212321
If you are having issues starting the server in your MCP client e.g. Cursor or Claude Desktop, please try the following.

0 commit comments

Comments
 (0)