Skip to content

Commit 0ed3d91

Browse files
victoriaplummervictoriaplummer
committed
differentiate between local and remote
1 parent 88b662c commit 0ed3d91

File tree

1 file changed

+2
-239
lines changed

1 file changed

+2
-239
lines changed

‎README.md‎

Lines changed: 2 additions & 239 deletions
Original file line numberDiff line numberDiff line change
@@ -93,246 +93,9 @@ Create a hero section card on my home page with a CTA button and responsive desi
9393

9494
4. Save and restart Claude Desktop (`Cmd/Ctrl + R`). An OAuth login page will open to authorize sites and install the companion app.
9595

96-
#### Open the Webflow Designer (Claude Desktop)
97-
98-
- Open your site in the Webflow Designer.
99-
- Or ask your AI agent:
100-
101-
```text
102-
Give me a link to open <MY_SITE_NAME> in the Webflow Designer
103-
```
104-
105-
#### Open the MCP Webflow App (Claude Desktop)
106-
107-
1. In the Designer, open the Apps panel (press `E`).
108-
2. Launch "Webflow MCP Bridge App" (installed during OAuth).
109-
3. Wait for the app to connect to the MCP server.
110-
111-
#### Write your first prompt (Claude Desktop)
112-
113-
```text
114-
Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
115-
```
116-
117-
```text
118-
Find older blog posts that mention similar topics and add internal links to my latest post
119-
```
120-
121-
```text
122-
Create a hero section card on my home page with a CTA button and responsive design
123-
```
124-
125-
### Windsurf
126-
127-
1. Navigate to `Windsurf → Settings → Windsurf Settings`.
128-
2. Go to `Cascade → MCP Servers → Manage MCPs`.
129-
3. Click "View raw configuration" and add:
130-
131-
```json
132-
{
133-
"mcpServers": {
134-
"webflow": {
135-
"command": "npx",
136-
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
137-
}
138-
}
139-
}
140-
```
141-
142-
4. Save. Use the settings page "Refresh" button. A browser will open the OAuth flow to authorize sites (this also installs the companion app).
143-
144-
#### Open the Webflow Designer (Windsurf)
145-
146-
- Open your site in the Webflow Designer.
147-
- Or ask your AI agent:
148-
149-
```text
150-
Give me a link to open <MY_SITE_NAME> in the Webflow Designer
151-
```
152-
153-
#### Open the MCP Webflow App (Windsurf)
154-
155-
1. In the Designer, open the Apps panel (press `E`).
156-
2. Launch "Webflow MCP Bridge App" (installed during OAuth).
157-
3. Wait for the app to connect to the MCP server.
158-
159-
#### Write your first prompt (Windsurf)
160-
161-
```text
162-
Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
163-
```
164-
165-
```text
166-
Find older blog posts that mention similar topics and add internal links to my latest post
167-
```
168-
169-
```text
170-
Create a hero section card on my home page with a CTA button and responsive design
171-
```
172-
173-
### Reset your OAuth token
174-
175-
If you need to reset your OAuth token, run:
176-
177-
```bash
178-
rm -rf ~/.mcp-auth
179-
```
180-
181-
### Node.js compatibility
182-
183-
If you encounter issues with Node.js, try one of the following:
184-
185-
#### Use Node.js 22.3.0 with nvm
186-
187-
1. Install nvm:
188-
189-
```bash
190-
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
191-
```
192-
193-
2. Restart your terminal or source your shell configuration file, e.g.:
194-
195-
```bash
196-
source ~/.bashrc
197-
```
198-
199-
3. Install and set default:
200-
201-
```bash
202-
nvm install 22.3.0
203-
nvm use 22.3.0
204-
nvm alias default 22.3.0
205-
```
206-
207-
4. Clear `npx` cache (optional):
208-
209-
```bash
210-
rm -rf ~/.npm/_npx
211-
```
212-
213-
5. Verify installation:
214-
215-
```bash
216-
node --version
217-
npm --version
218-
```
219-
220-
#### Use Node Version Switcher (NVS)
221-
222-
1. Install Node Version Switcher (NVS) (see the official repository for OS-specific steps):
223-
224-
```bash
225-
git clone https://github.com/jasongin/nvs ~/.nvs && ~/.nvs/nvs.sh install
226-
```
227-
228-
2. Add Node.js 22.3.0 and use it:
229-
230-
```bash
231-
nvs add 22.3.0
232-
nvs use 22.3.0
233-
```
234-
235-
3. (Optional) Install `mcp-remote` globally when on 22.3.0:
236-
237-
```bash
238-
npm install -g mcp-remote
239-
```
240-
241-
4. If your AI client needs explicit paths, determine them:
242-
243-
```bash
244-
nvs which 22.3.0
245-
which mcp-remote
246-
```
247-
248-
## ▶️ Quick start (hosted on Cloudflare workers)
249-
250-
**For Cursor:**
251-
252-
1. Go to `Settings` → `Cursor Settings` → `MCP`
253-
2. Click `+ Add New Global MCP Server`
254-
3. Paste the following configuration (or add the `webflow` part to your existing configuration)
255-
256-
```json
257-
{
258-
"mcpServers": {
259-
"webflow": {
260-
"command": "npx mcp-remote https://mcp.webflow.com/sse"
261-
}
262-
}
263-
}
264-
```
265-
266-
4. Save, Cursor will automatically open a new browser window showing an OAuth login page to authorize the Webflow sites you want the MCP server to have access to.
267-
268-
**For Claude Desktop:**
269-
270-
1. Open `Settings` → `Developer`
271-
2. Click `Edit Config`
272-
3. Open `claude_desktop_config.json` in a code editor and paste the following configuration (or add the `webflow` part to your existing configuration)
273-
274-
```json
275-
{
276-
"mcpServers": {
277-
"webflow": {
278-
"command": "npx",
279-
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
280-
}
281-
}
282-
}
283-
```
284-
285-
4. Save the file and restart Claude Desktop (command/ctrl + R). When Claude restarts, it will automatically open a new browser window showing an OAuth login page to authorize the Webflow sites you want the MCP server to have access to.
286-
287-
**For Windsurf:**
288-
289-
1. Navigate to `Windsurf - Settings` → `Advanced Settings`
290-
2. Scroll down to the `Cascade` section → `Add Server` → `Add custom server +`
291-
3. Paste the following configuration (or add the `webflow` part to your existing configuration)
292-
293-
```json
294-
{
295-
"mcpServers": {
296-
"webflow": {
297-
"command": "npx",
298-
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
299-
}
300-
}
301-
}
302-
```
303-
304-
4. Click `Save`, Windsurf will automatically open a new browser window showing an OAuth login page to authorize the Webflow sites you want the MCP server to have access to.
305-
306-
**For VS Code:**
307-
308-
1. Open `settings.json`
309-
2. Paste the following configuration (or add the `webflow` part to your existing configuration)
310-
311-
```json
312-
{
313-
"mcp": {
314-
"servers": {
315-
"webflow": {
316-
"command": "npx",
317-
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
318-
}
319-
}
320-
}
321-
}
322-
```
323-
324-
4. `Save` the file. You should see a `start` button appear over the "webflow" key which you can click to open and run the auth flow. Alternatively, restart VS Code and the auth flow should start automatically.
325-
326-
**Important note**
327-
328-
All these methods rely on the `mcp-remote` [npm package](https://www.npmjs.com/package/mcp-remote) which is still considered experimental as of April 30, 2025.
329-
If at any point you have issues, and want to reset your OAuth tokens, you can run the following command before restarting your MCP client:
330-
331-
```shell
332-
rm -rf ~/.mcp-auth
333-
```
96+
#### Open the Webflow Designer
33497

335-
## ▶️ Quick start (local installation)
98+
## Local Installation
33699

337100
1. **Get your Webflow API token**
338101

0 commit comments

Comments
 (0)