Webflow Mcp:cms Collection Setup

CMS Collection Setup

Create a new CMS collection with custom fields, relationships, and proper configuration.

Important Note

ALWAYS use Webflow MCP tools for all operations:

• Use Webflow MCP's webflow_guide_tool to get best practices before starting
• Use Webflow MCP's data_sites_tool with action list_sites to identify available sites
• Use Webflow MCP's data_sites_tool with action get_site to retrieve site details and plan limits
• Use Webflow MCP's data_cms_tool with action get_collection_list to check for naming conflicts
• Use Webflow MCP's data_cms_tool with action create_collection to create the collection
• Use Webflow MCP's data_cms_tool with action create_collection_static_field to create static fields
• Use Webflow MCP's data_cms_tool with action create_collection_option_field to create option fields
• Use Webflow MCP's data_cms_tool with action create_collection_reference_field to create reference/multi-reference fields
• Use Webflow MCP's data_cms_tool with action get_collection_details to verify collection was created correctly
• DO NOT use any other tools or methods for Webflow operations
• All tool calls must include the required context parameter (15-25 words, third-person perspective)

Instructions

Phase 1: Site Selection & Discovery

1. Get site information: Use Webflow MCP's data_sites_tool with action list_sites to identify target site
2. Confirm site: Ask user to select site if multiple available
3. Check plan limits: Use Webflow MCP's data_sites_tool with action get_site to verify collection limits
4. List existing collections: Use Webflow MCP's data_cms_tool with action get_collection_list to check for conflicts
5. Validate naming: Ensure new collection name doesn't conflict with existing

Phase 2: Requirements Gathering

1. Get collection details: Ask user for:

• Collection display name (e.g., "Blog Posts")
• Singular name (e.g., "Blog Post")
• Optional: Custom slug (default: auto-generated from display name)

1. Get field definitions: For each field, gather:

• Field name (e.g., "Author Name", "Publish Date")
• Field type (Text, Rich Text, Image, Option, Reference, etc.)
• Required vs optional
• Any validation rules or help text

1. Identify relationships: Determine if collection needs:

• Reference fields (one-to-many relationships)
• Multi-reference fields (many-to-many relationships)
• Option fields (controlled vocabulary)

Phase 3: Schema Validation & Planning

1. Validate field types: Check all field types are supported
2. Check field limits: Ensure within Webflow limits:

• Max fields per collection: varies by plan
• Max 5 multi-reference fields per collection

1. Plan creation order: Organize fields by dependency:

• Create collections in order if references exist
• Create referenced collections first
• Create option fields before reference fields

1. Generate preview: Show complete schema with all fields

Phase 4: User Approval

1. Show complete preview: Display:

• Collection name and slug
• All fields with types and properties
• Any relationships to other collections
• Plan limit verification

1. Validate schema: Check for common issues:

• Missing required fields (name, slug always required)
• Invalid field types
• Reference to non-existent collections
• Exceeding plan limits

1. Request confirmation: Wait for explicit "create" approval

Phase 5: Collection Creation

1. Create collection: Use Webflow MCP's data_cms_tool with action create_collection with:

• Display name
• Singular name
• Optional slug

1. Capture collection ID: Save for field creation
2. Show progress: Report collection created successfully

Phase 6: Field Creation

1. Create fields in order: For each field:

• Use appropriate creation tool based on type
• Static fields: data_cms_tool with action create_collection_static_field
• Option fields: data_cms_tool with action create_collection_option_field
• Reference fields: data_cms_tool with action create_collection_reference_field

1. Set field properties:

• Display name
• Required flag
• Help text (if provided)
• Validation rules (if applicable)

1. Show progress: Report each field created
2. Handle errors: If field creation fails, report and continue

Phase 7: Verification & Reporting

1. Verify collection: Use Webflow MCP's data_cms_tool with action get_collection_details to retrieve full schema
2. Confirm all fields: Check that all requested fields were created
3. Generate report: Show:

• Collection ID
• Collection name and slug
• All fields created with IDs
• Any failures or warnings

1. Provide next steps: Suggest:

• Use bulk-cms-update to add initial items
• Create collection pages in Designer
• Set up relationships if applicable

Field Type Reference

Static Field Types

PlainText - Short text (max 256 chars) or long text

• Use for: Titles, names, descriptions, excerpts
• Properties: maxLength validation (256 for short)
• Example: "Title", "Author Name", "Excerpt"

RichText - Formatted text with HTML

• Use for: Blog content, bios, articles, long descriptions
• Properties: No length limit
• Example: "Post Content", "Bio", "Description"

Email - Email address

• Use for: Contact emails, author emails
• Properties: Email format validation
• Example: "Contact Email", "Author Email"

Phone - Phone number

• Use for: Contact numbers
• Properties: E.164 format
• Example: "Phone Number", "Mobile"

Link - External URL or internal link

• Use for: Website links, social media, external resources
• Properties: URL validation
• Example: "Website", "LinkedIn Profile"

Number - Numeric values

• Use for: Prices, ratings, counts, order numbers
• Properties: Integer or decimal
• Example: "Price", "Rating", "Order"

Image - Single image

• Use for: Featured images, photos, thumbnails
• Properties: Max 4MB per image
• Example: "Featured Image", "Photo", "Thumbnail"

MultiImage - Multiple images (up to 25)

• Use for: Galleries, product photos
• Properties: Max 25 images, 4MB each
• Example: "Gallery", "Product Photos"

File - File upload

• Use for: PDFs, documents, downloads
• Properties: Max 4MB per file
• Example: "Resume PDF", "Brochure", "Manual"

Video - Video embed (YouTube/Vimeo)

• Use for: Video content
• Properties: Embed URL
• Example: "Tutorial Video", "Demo"

DateTime - Date and/or time

• Use for: Publish dates, event dates, deadlines
• Properties: ISO 8601 format
• Example: "Publish Date", "Event Date"

Switch - Boolean (true/false)

• Use for: Featured flags, visibility toggles
• Properties: Boolean value
• Example: "Featured", "Published", "Active"

Color - Color value

• Use for: Theme colors, accents, brand colors
• Properties: Hex format
• Example: "Brand Color", "Accent Color"

Option Field Type

Option - Single choice from predefined list

• Use for: Status, category, type, priority
• Properties: List of option names
• Example: "Status" (Draft, Review, Published)
• Creation: Use data_cms_tool with action create_collection_option_field with options array

Example:

{
  "type": "Option",
  "displayName": "Status",
  "metadata": {
    "options": [
      {"name": "Draft"},
      {"name": "In Review"},
      {"name": "Published"}
    ]
  }
}

Reference Field Types

Reference - Link to one item in another collection (one-to-many)

• Use for: Author → Post, Category → Post, Brand → Product
• Properties: Collection ID of referenced collection
• Example: "Author" (reference to Authors collection)
• Creation: Use data_cms_tool with action create_collection_reference_field with collectionId

MultiReference - Link to multiple items in another collection (many-to-many)

• Use for: Post → Tags, Product → Features, Project → Technologies
• Properties: Collection ID of referenced collection
• Limit: Max 5 multi-reference fields per collection
• Example: "Tags" (reference to Tags collection)
• Creation: Use data_cms_tool with action create_collection_reference_field with collectionId

Reference Field Example:

{
  "type": "Reference",
  "displayName": "Author",
  "metadata": {
    "collectionId": "abc123..."
  }
}

Multi-Reference Field Example:

{
  "type": "MultiReference",
  "displayName": "Tags",
  "metadata": {
    "collectionId": "xyz789..."
  }
}

Examples

Example 1: Simple Blog Collection

User prompt:

Create a Blog Posts collection with title, content, author, and publish date

Step 1: Discovery

🔍 CMS Collection Setup

Available sites:
1. Company Website
2. Blog Site

Which site? (1/2)

Step 2: After User Selects Site

📊 Existing Collections on Company Website:

Currently: 0 collections
Plan limit: 20 collections (CMS Plan)

✅ You have capacity to create new collections.

---

📋 Collection Requirements

Display Name: Blog Posts
Singular Name: Blog Post
Slug: blog-posts (auto-generated)

Fields to create:
1. Title - Text (required)
2. Content - Rich Text (required)
3. Author - Text
4. Publish Date - Date/Time (required)

Is this correct? (yes/no)
If you want to add/modify fields, describe the changes.

Step 3: Preview

📋 Preview: Create "Blog Posts" Collection

Collection:
├── Display Name: Blog Posts
├── Singular Name: Blog Post
├── Slug: blog-posts
└── Site: Company Website

Fields (6 total):
├── name (PlainText, required) ← Auto-created
├── slug (PlainText, required) ← Auto-created
├── title (PlainText, required)
├── content (RichText, required)
├── author (PlainText)
└── publish-date (DateTime, required)

✅ Validation Passed:
- Collection name available
- Within plan limits (0/20 collections)
- All field types valid
- No dependency issues

⚠️ Type "create" to proceed.

Step 4: Creation

🔄 Creating Collection...

✅ Collection created: Blog Posts (ID: 64f1a2b3...)

Adding fields...
├── ✅ title (PlainText)
├── ✅ content (RichText)
├── ✅ author (PlainText)
└── ✅ publish-date (DateTime)

Progress: ████████████████████ 100% (4/4 fields)

🎉 Collection Setup Complete!

Collection: Blog Posts
ID: 64f1a2b3...
Fields: 6 (2 auto-created + 4 custom)

---

💡 Next Steps:
1. Use bulk-cms-update to add initial blog posts
2. Create collection template page in Designer
3. Set up collection list page for blog index
4. Configure SEO settings for dynamic pages

Example 2: Collection with Relationships

User prompt:

Create a Products collection with name, price, description, images, brand, and tags

Step 1: After Initial Gathering

📋 Collection Analysis

I see you want:
- Brand: This should be a reference field
- Tags: This should be a multi-reference field

This requires creating additional collections first:
1. Brands collection
2. Tags collection

Then we can create Products with references to them.

Would you like me to:
A) Create all three collections (Brands, Tags, Products)
B) Just create Products (you'll add relationships later)
C) Modify the requirements

Your choice? (A/B/C)

Step 2: After User Selects "A"

📋 Preview: Create 3 Collections

---

### 1. Brands Collection

Fields (4 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── logo (Image)
└── description (PlainText)

---

### 2. Tags Collection

Fields (3 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
└── color (Color)

---

### 3. Products Collection

Fields (9 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── price (Number, required)
├── description (RichText)
├── images (MultiImage)
├── brand (Reference → Brands)
└── tags (MultiReference → Tags)

---

Creation Order:
1. Brands (no dependencies)
2. Tags (no dependencies)
3. Products (references 1 & 2)

✅ Validation:
- All collections available
- Within plan limits (0/20 collections)
- Multi-reference limit: 1/5 ✅
- All dependencies resolvable

⚠️ Type "create" to proceed with all 3 collections.

Step 3: Creation

🔄 Creating Collections...

[1/3] Creating Brands...
✅ Brands collection created (ID: abc123...)
├── ✅ logo (Image)
└── ✅ description (PlainText)

[2/3] Creating Tags...
✅ Tags collection created (ID: def456...)
└── ✅ color (Color)

[3/3] Creating Products...
✅ Products collection created (ID: ghi789...)
├── ✅ price (Number)
├── ✅ description (RichText)
├── ✅ images (MultiImage)
├── ✅ brand (Reference → Brands)
└── ✅ tags (MultiReference → Tags)

Progress: ████████████████████ 100% (3/3 collections)

🎉 All Collections Created!

Summary:
├── Brands (ID: abc123...)
├── Tags (ID: def456...)
└── Products (ID: ghi789...)

---

💡 Next Steps:
1. Add brand items first (use bulk-cms-update)
2. Add tag items (use bulk-cms-update)
3. Then add products with brand/tag references
4. Create collection pages in Designer

Example 3: Team Members with Option Field

User prompt:

Create a Team Members collection with name, role (dropdown: Designer, Developer, Manager), bio, photo, email

Step 1: Preview

📋 Preview: Create "Team Members" Collection

Collection:
├── Display Name: Team Members
├── Singular Name: Team Member
└── Slug: team-members

Fields (7 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── role (Option, required)
│   Options:
│   ├── Designer
│   ├── Developer
│   └── Manager
├── bio (RichText)
├── photo (Image)
└── email (Email)

✅ Validation Passed

⚠️ Type "create" to proceed.

Step 2: Creation

🔄 Creating Collection...

✅ Collection created: Team Members (ID: jkl012...)

Adding fields...
├── ✅ role (Option: 3 options)
├── ✅ bio (RichText)
├── ✅ photo (Image)
└── ✅ email (Email)

Progress: ████████████████████ 100% (4/4 fields)

🎉 Collection Setup Complete!

Collection: Team Members
Fields: 6 (2 auto + 4 custom)

Field Details:
- role: Option field with 3 choices
  • Designer
  • Developer
  • Manager

---

💡 Next Steps:
1. Add team member items
2. Create team page in Designer
3. Consider adding:
   - LinkedIn profile (Link field)
   - Years of experience (Number field)
   - Specializations (MultiReference to Skills collection)

Example 4: Complex E-commerce Setup

User prompt:

Create an e-commerce setup with Products, Categories, Brands, and Features

Step 1: Requirements Clarification

📋 E-commerce Collection Planning

I'll create 4 collections:

1. **Categories** - Product categories
2. **Brands** - Product brands
3. **Features** - Product features (e.g., "Waterproof", "Wireless")
4. **Products** - Main product catalog

Relationships:
- Product → Category (Reference)
- Product → Brand (Reference)
- Product → Features (MultiReference)

Fields per collection:

**Categories:**
- Name, Slug (auto)
- Description
- Parent Category (self-reference for hierarchy)
- Icon

**Brands:**
- Name, Slug (auto)
- Logo
- Description

**Features:**
- Name, Slug (auto)
- Icon
- Description

**Products:**
- Name, Slug (auto)
- Price
- Sale Price
- Description
- Images (MultiImage)
- Category (Reference → Categories)
- Brand (Reference → Brands)
- Features (MultiReference → Features)
- In Stock (Switch)
- SKU (PlainText)

Is this structure good? (yes/modify/cancel)

Step 2: Preview (User says "yes")

📋 Preview: Create E-commerce Collections

---

### Collection 1: Categories

Fields (5 total):
├── name (PlainText, required)
├── slug (PlainText, required)
├── description (PlainText)
├── parent-category (Reference → Categories) ← Self-reference
└── icon (Image)

---

### Collection 2: Brands

Fields (4 total):
├── name (PlainText, required)
├── slug (PlainText, required)
├── logo (Image)
└── description (PlainText)

---

### Collectio

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [webflow](https://github.com/webflow)
- **Source:** [webflow/webflow-skills](https://github.com/webflow/webflow-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.