docs: updated readme (#8)

* docs: updated readme

* docs: ReadMe Updates

Author: victoriaplummer

README.md

@@ -1,112 +1,113 @@
-# Webflow MCP 
+# Webflow MCP
+
+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).
 
 [![npm shield](https://img.shields.io/npm/v/webflow-mcp-server)](https://www.npmjs.com/package/webflow-mcp-server)
 [![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)
 
-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. 
+## ℹ Prerequisites
 
-## Prerequisites
+- [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [A Wefblow Account](https://webflow.com/signup)
 
-- Node.js
-- npm
-- A Webflow account
-- A Webflow API token
+## ▶️ Quick start
 
-## Installation Guide
+1. **Get your Webflow API token**
 
-### 1. Obtain a Webflow API token
+   - Go to [Webflow's API Playground](https://developers.webflow.com/data/reference/token/authorized-by)
+   - Log in and generate a token
+   - Copy the token from the Request Generator
+     ![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)
 
-- Log in to your Webflow account
-- Navigate to your site's settings > **Apps & Integrations**
-- Scroll to the **API access** section and click **Generate API token**
-- Pick a token name and set the token permissions
-  - For full access, select **read and write permissions for CMS, Pages, and Sites**
-- Click **Generate token**
-- Copy the generated token
+2. **Add to your AI editor**
 
-_Additional documentation can be found here: https://help.webflow.com/hc/en-us/articles/33961356296723-Intro-to-Webflow-s-APIs_
+   ```json
+   {
+     "mcpServers": {
+       "webflow": {
+         "command": "npx",
+         "args": ["-y", "webflow-mcp-server"],
+         "env": {
+           "WEBFLOW_TOKEN": "YOUR_API_TOKEN"
+         }
+       }
+     }
+   }
+   ```
 
-### 2. Set up your MCP client
+   **For Cursor:**
 
-Add the following to the configuration file for your MCP client e.g. **Cursor, Windsurf, or Claude Desktop**:
+   1. Go to Settings → Cursor Settings → MCP
+   2. Click `+ Add New Global MCP Server`
+   3. Paste configuration
+   4. Save and verify server status
 
-```
-{
-  "mcpServers": {
-    "webflow": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "webflow-mcp-server"
-      ],
-      "env": {
-        "WEBFLOW_TOKEN": "..."
-      }
-    }
-  }
-}
-```
+   **For Claude Desktop:**
 
-To find the configuration file in **Cursor**:
+   1. Open Settings → Developer
+   2. Click `Edit Config`
+   3. Paste configuration
+   4. Save and **restart** Claude
 
-1. Open **Cursor Settings** → **MCP**
-2. Click `+ Add New MCP Server`
+## 🛠️ Available tools
 
-To find the configuration file in **Windsurf**:
-
-1. Open **Windsurf Settings** → **General** → **MCP Servers**
-2. Click `+ Add MCP Server`
+### Sites
 
-## Development
+```ts
+sites - list; // List all sites
+sites - get; // Get site details
+sites - publish; // Publish site changes
+```
 
-If you want to run the server in development mode, you can install dependencies and run the server using the following command:
+### Pages
 
-```shell
-cd /PATH/TO/PROJECT
-npm install
-npm run dev
+```ts
+pages - list; // List all pages
+pages - get - metadata; // Get page metadata
+pages - update - page - settings; // Update page settings
+pages - get - content; // Get page content
+pages - update - static - content; // Update page content
 ```
 
-Make sure to add your Webflow API token to the `.env` file:
+### CMS
 
-```
-# /PATH/TO/PROJECT/.env
-WEBFLOW_TOKEN=...
+```ts
+collections - list; // List collections
+collections - get; // Get collection details
+collections - items - create - item - live; // Create items
+collections - items - update - items - live; // Update items
 ```
 
-## API
+# 🗣️ Prompts & Resources
 
-The following tools are made available to MCP clients:
+This implementation **does not** include prompts and resources. However, this may change in the future.
 
-### Sites
+# 🚧 Development mode
 
-```
-sites-list: client.sites.list(...)
-sites-get: client.sites.get(...)
-sites-publish: client.sites.publish(...)
-```
+If you want to run the server in development mode, you can install dependencies and run the server using the following command:
 
-### Pages
+1. Clone and install:
 
-```
-pages-list: client.pages.list(...)
-pages-get-metadata: client.pages.getMetadata(...)
-pages-update-page-settings: client.pages.updatePageSettings(...)
-pages-get-content: client.pages.getContent(...)
-pages-update-static-content: client.pages.updateStaticContent(...)
-```
+   ```shell
+   git clone [repo-url]
+   cd [repo-name]
+   npm install
+   ```
 
-### CMS
+2. Add your token:
 
-```
-collections-list: client.collections.list(...)
-collections-get: client.collections.get(...)
-collections-items-create-item-live: client.collections.items.createItemLive(...)
-collections-items-update-items-live: client.collections.items.updateItemsLive(...)
-```
+   ```shell
+   # .env
+   WEBFLOW_TOKEN=your_token_here
+   ```
 
-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:
+3. Start development server:
+   ```shell
+   npm run dev
+   ```
 
-> 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).
+## 📄 Webflow Developer resources
 
-We currently believe giving the model maximum access to functionality is the right approach. This view is subject to change.
+- [Webflow API Documentation](https://developers.webflow.com/data/reference)
+- [Webflow JavaScript SDK](https://github.com/webflow/js-webflow-api)