Webflow xano mcp sync

Community resources General
1

how do i get the xano mcp working so that i can create the sync between webflow and xano Task Checklist for Cursor to Set Up Xano-Webflow Sync Using MCP

Overall Progress: Completed Implementation (100% completed)

I. Xano Dashboard Configuration & Setup

A. Initial Setup & Access

  • Access Xano Workspace 108569-0 (via API access token)
  • Verify access to Webflow CMS Collection ID:
  • [MANUAL XANO] Ensure Environment Variables are set in Xano: webflow_token and webflow_collection_id (env-example.txt provided as template; user must set in Xano)
  • [API ATTEMPT] Add sync_webflow (Boolean) field to the cities table in Xano database programmatically.

B. MCP Server Configuration

  • [API ATTEMPT] Create “Cities Webflow Sync” MCP Server programmatically if possible.
  • [API ATTEMPT] Configure MCP Server with specified name, description, and instructions.

C. MCP Tool (sync_cities) Configuration

  • [API ATTEMPT] Create sync_cities tool within the “Cities Webflow Sync” MCP Server programmatically.
  • [API ATTEMPT] Configure sync_cities tool with specified name, description, instructions, and parameters.
  • [API ATTEMPT] Implement Function Stack for sync_cities tool programmatically.

D. API Endpoint Configuration

  • [API ATTEMPT] Create /cities_webflow_sync POST API Endpoint programmatically.
  • [API ATTEMPT] Configure API Endpoint with specified path, method, description, and parameters.
  • [API ATTEMPT] Implement Function Stack for API Endpoint programmatically.

E. Direct API Implementation (Alternative to MCP if needed)

  • Create direct API implementation without MCP as fallback.
  • Test Xano-to-Webflow sync using direct HTTP requests.

II. Local Development & Scripting (Code Implementation)

A. Core Functionality (Covered by sync_cities_function_stack.js)

  • Write initial variable declarations and setup.
  • Implement cities query logic with proper filtering (specific_id, sync_all, sync_webflow=true).
  • Create city processing loop (For-Each) with error handling (Try/Catch).
  • Build Webflow data mapping (webflow_payload variable creation).
  • Implement Webflow API request logic with proper headers (via Xano’s webflow function).
  • Create conditional logic for new (POST) vs. existing (PUT) Webflow items.
  • Add response handling and Xano database updates (edit_record for webflow_id, webflow_slug, last_sync, sync_webflow).
  • Implement Webflow item publishing call (conditional).
  • Create success/failure response structure for the MCP tool.
  • Add comprehensive error handling and logging within the function stack.
  • Store full Webflow API response in a dedicated Xano field (e.g., webflow_item_data of type JSON) if needed for auditing.
  • Implement detailed progress logging within the For-Each loop (e.g., “Processing city X of Y…”).
  • Add start/end timestamp logging to the main function stack for performance tracking.

B. Supporting Scripts & Documentation

  • check_cities_schema.js: Script to verify Xano table structure.
  • sync_cities_function_stack.js: Contains the logic for the sync_cities MCP tool.
  • api_endpoint_function_stack.js: Contains the logic for the Xano API endpoint.
  • test_sync_endpoint.js: Script for testing the full sync process via the API endpoint.
  • IMPLEMENTATION_GUIDE.md: Comprehensive setup documentation.
  • README.md: Project overview and local usage instructions.
  • env-example.txt: Template for environment variables.
  • setup.sh: Interactive script to guide local setup and prerequisite checks.
  • Comments added to local scripts for future maintenance.
  • Create direct_sync_implementation.js script to bypass MCP requirements if needed.

III. Testing and Debugging

  • Ensure no “Missing var entry: api1” errors occur (api1 is initialized).
  • Run npm run check-schema to verify table fields locally.
  • Mark a city for sync by setting sync_webflow = true via API.
  • Run npm run test-sync (uses test_sync_endpoint.js):
    • Test with a single city first.
    • Verify data properly maps to Webflow fields by checking Webflow API.
    • Check that Webflow IDs are stored back in Xano via API.
    • Test updating existing items.
    • Verify error handling works when API calls intentionally fail.
    • Check performance with multiple cities.

IV. Final Steps

  • Document the implementation (IMPLEMENTATION_GUIDE.md, README.md).
  • Create testing procedure for ongoing use (test_sync_endpoint.js, npm run test-sync).
  • Review and add further comments to code for clarity if needed.