Skip to content

Commit b178f10

Browse files
docs: updated readme
1 parent 7aab3bc commit b178f10

1 file changed

Lines changed: 78 additions & 77 deletions

File tree

README.md

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,113 @@
1-
# Webflow MCP
1+
# Webflow MCP
2+
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).
24

35
[![npm shield](https://img.shields.io/npm/v/webflow-mcp-server)](https://www.npmjs.com/package/webflow-mcp-server)
46
[![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)
57

6-
Node.js server implementing Model Context Protocol (MCP) for Webflow using the [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api). This server enables LLMs to interact with the Webflow APIs.
7-
88
## Prerequisites
99

10-
- Node.js
11-
- npm
12-
- A Webflow account
13-
- A Webflow API token
10+
- [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
11+
- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
12+
- [A Wefblow Account](https://webflow.com/signup)
1413

15-
## Installation Guide
14+
## Quick start
1615

17-
### 1. Obtain a Webflow API token
16+
1. **Get your Webflow API token**
1817

19-
- Log in to your Webflow account
20-
- Navigate to your site's settings > **Apps & Integrations**
21-
- Scroll to the **API access** section and click **Generate API token**
22-
- Pick a token name and set the token permissions
23-
- For full access, select **read and write permissions for CMS, Pages, and Sites**
24-
- Click **Generate token**
25-
- Copy the generated token
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)
2622

27-
_Additional documentation can be found here: https://help.webflow.com/hc/en-us/articles/33961356296723-Intro-to-Webflow-s-APIs_
23+
2. **Add to your AI editor**
2824

29-
### 2. Set up your MCP client
25+
```json
26+
{
27+
"mcpServers": {
28+
"webflow": {
29+
"command": "npx",
30+
"args": ["-y", "webflow-mcp-server"],
31+
"env": {
32+
"WEBFLOW_TOKEN": "YOUR_API_TOKEN"
33+
}
34+
}
35+
}
36+
}
37+
```
3038

31-
Add the following to the configuration file for your MCP client e.g. **Cursor, Windsurf, or Claude Desktop**:
39+
**For Cursor:**
3240

33-
```
34-
{
35-
"mcpServers": {
36-
"webflow": {
37-
"command": "npx",
38-
"args": [
39-
"-y",
40-
"webflow-mcp-server"
41-
],
42-
"env": {
43-
"WEBFLOW_TOKEN": "..."
44-
}
45-
}
46-
}
47-
}
48-
```
41+
1. Go to Settings → Cursor Settings → MCP
42+
2. Click `+ Add New Global MCP Server`
43+
3. Paste configuration
44+
4. Save and verify server status
4945

50-
To find the configuration file in **Cursor**:
46+
**For Claude Desktop:**
5147

52-
1. Open **Cursor Settings****MCP**
53-
2. Click `+ Add New MCP Server`
48+
5. Open Settings → Developer
49+
6. Click `Edit Config`
50+
7. Paste configuration
51+
8. Save and restart Claude
5452

55-
To find the configuration file in **Windsurf**:
53+
## 🛠️ Available tools
5654

57-
1. Open **Windsurf Settings****General****MCP Servers**
58-
2. Click `+ Add MCP Server`
55+
### Sites
5956

60-
## Development
57+
```ts
58+
sites - list; // List all sites
59+
sites - get; // Get site details
60+
sites - publish; // Publish site changes
61+
```
6162

62-
If you want to run the server in development mode, you can install dependencies and run the server using the following command:
63+
### Pages
6364

64-
```shell
65-
cd /PATH/TO/PROJECT
66-
npm install
67-
npm run dev
65+
```ts
66+
pages - list; // List all pages
67+
pages - get - metadata; // Get page metadata
68+
pages - update - page - settings; // Update page settings
69+
pages - get - content; // Get page content
70+
pages - update - static - content; // Update page content
6871
```
6972

70-
Make sure to add your Webflow API token to the `.env` file:
73+
### CMS
7174

72-
```
73-
# /PATH/TO/PROJECT/.env
74-
WEBFLOW_TOKEN=...
75+
```ts
76+
collections - list; // List collections
77+
collections - get; // Get collection details
78+
collections - items - create - item - live; // Create items
79+
collections - items - update - items - live; // Update items
7580
```
7681

77-
## API
82+
# Prompts & Resources
7883

79-
The following tools are made available to MCP clients:
84+
This implementation **does not** include prompts and resources. However, this may change in the future.
8085

81-
### Sites
86+
## Developer resources
8287

83-
```
84-
sites-list: client.sites.list(...)
85-
sites-get: client.sites.get(...)
86-
sites-publish: client.sites.publish(...)
87-
```
88+
- [Webflow API Documentation](https://developers.webflow.com/data/reference)
89+
- [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api)
8890

89-
### Pages
91+
# Development mode
9092

91-
```
92-
pages-list: client.pages.list(...)
93-
pages-get-metadata: client.pages.getMetadata(...)
94-
pages-update-page-settings: client.pages.updatePageSettings(...)
95-
pages-get-content: client.pages.getContent(...)
96-
pages-update-static-content: client.pages.updateStaticContent(...)
97-
```
93+
If you want to run the server in development mode, you can install dependencies and run the server using the following command:
9894

99-
### CMS
95+
1. Clone and install:
10096

101-
```
102-
collections-list: client.collections.list(...)
103-
collections-get: client.collections.get(...)
104-
collections-items-create-item-live: client.collections.items.createItemLive(...)
105-
collections-items-update-items-live: client.collections.items.updateItemsLive(...)
106-
```
97+
```shell
98+
git clone [repo-url]
99+
cd [repo-name]
100+
npm install
101+
```
107102

108-
In this MCP server implementation we have chosen to implement only [tools](https://modelcontextprotocol.io/docs/concepts/tools), not [prompts](https://modelcontextprotocol.io/docs/concepts/prompts) or [resources](https://modelcontextprotocol.io/docs/concepts/resources). Per the MCP docs:
103+
2. Add your token:
109104

110-
> Tools are designed to be **model-controlled**, meaning that tools are exposed from servers to clients with the intention of the AI model being able to automatically invoke them (with a human in the loop to grant approval).
105+
```shell
106+
# .env
107+
WEBFLOW_TOKEN=your_token_here
108+
```
111109

112-
We currently believe giving the model maximum access to functionality is the right approach. This view is subject to change.
110+
3. Start development server:
111+
```shell
112+
npm run dev
113+
```

0 commit comments

Comments
 (0)