@curenorway/kode-cli 1.4.0 → 1.5.1

package/dist/{chunk-OW3XKTBO.js → chunk-Z3QNIDBJ.js}

@@ -437,8 +437,16 @@ Update context.md after your session with discoveries and changes.
 
 ### MCP Tools
 
-The \`.mcp.json\` file enables AI tools for page assignment, HTML caching, and context updates.
-Restart Claude Code after \`kode init\` to load the MCP server.
+The \`.mcp.json\` file enables AI tools:
+
+**cure-kode MCP**: Script management, HTML analysis, deployment
+- \`kode_update_script\`, \`kode_deploy\`, \`kode_fetch_html_smart\`, etc.
+
+**webflow MCP** (if configured): Webflow Designer API access
+- Modify site structure, CMS collections, pages, and more
+- Requires the Webflow MCP Bridge App running in Designer (press E \u2192 Apps)
+
+Restart Claude Code after \`kode init\` to load MCP servers.
 
 `;
 }
@@ -629,9 +637,127 @@ If using the Kode MCP server, these tools are available:
 ### MCP Setup
 
 The \`.mcp.json\` file (created by \`kode init\`) enables MCP tools automatically.
-**Restart Claude Code** after init to load the MCP server.
+**Restart Claude Code** after init to load the MCP servers.
+
+## Webflow MCP (Optional)
+
+If configured during \`kode init\`, you also have access to the official Webflow MCP server.
+This enables AI agents to interact directly with the Webflow Designer API.
+
+### Webflow MCP Tools
+
+- **Site & Page Management**: Create, read, update pages and site settings
+- **CMS Collections**: Manage collection schemas and items
+- **Components**: Work with reusable components
+- **Assets**: Upload and manage media assets
+- **Forms**: Configure form settings
+
+### Using Webflow MCP
+
+1. **Start the Bridge App**: Open your site in Webflow Designer, press E, launch "Webflow MCP Bridge App"
+2. **OAuth Mode**: If using OAuth, you'll be prompted to authorize on first use
+3. **Token Mode**: Works immediately if a token was configured
+
+### Example Prompts with Webflow MCP
+
+- "Add a new blog post to the CMS collection"
+- "Create a new page at /about with a hero section"
+- "Update the navigation menu to include a new link"
+- "Show me all published pages on this site"
+
+### Combined Workflows
+
+Use both MCPs together for powerful workflows:
+1. Use **webflow MCP** to understand site structure and create pages
+2. Use **cure-kode MCP** to add custom JavaScript behavior to those pages
+3. Deploy scripts with \`kode_deploy\`, then verify in Webflow Designer
+
+## \u{1F9E0} Smart Workflow Guide
+
+**IMPORTANT**: Before writing ANY JavaScript, always gather context first. Follow this decision tree:
+
+### Step 1: Understand the Task
+
+| Task Type | First Action |
+|-----------|--------------|
+| JS for CMS items (blog posts, products, etc.) | Use Webflow MCP \u2192 \`collections_list\`, \`collection_items\` to understand schema |
+| JS for page interactions (modals, tabs, etc.) | Use Cure Kode MCP \u2192 \`kode_fetch_html_smart\` or \`kode_get_page_context\` |
+| JS for forms | Use Webflow MCP \u2192 get form structure, then Cure Kode for custom validation |
+| JS for navigation/menus | Use Webflow MCP \u2192 \`pages_list\` to get site structure |
+| JS for dynamic content | Check BOTH - Webflow for data structure, Cure Kode for existing scripts |
+
+### Step 2: Discovery Workflow
+
+\`\`\`
+1. DISCOVER: What elements/data am I working with?
+   - Webflow MCP: Site structure, CMS schemas, page list
+   - Cure Kode MCP: kode_get_page_context for CSS selectors and DOM structure
+
+2. CHECK: Are there existing scripts that do something similar?
+   - Cure Kode MCP: kode_list_scripts, kode_get_script
+
+3. PLAN: What selectors/APIs will my script need?
+   - Document in context.md using kode_update_context
+
+4. IMPLEMENT: Write the JavaScript
+   - Use kode_create_script or kode_update_script
+
+5. DEPLOY: Test on staging first
+   - kode_deploy (staging), verify, then kode_promote (production)
+\`\`\`
+
+### Step 3: Common Patterns
+
+**Pattern A: CMS-dependent JavaScript**
+\`\`\`
+User: "Add filtering to the blog posts"
+
+AI Workflow:
+1. Webflow MCP \u2192 collections_list \u2192 find "Blog Posts" collection
+2. Webflow MCP \u2192 collection_get \u2192 understand fields (category, tags, date)
+3. Cure Kode MCP \u2192 kode_get_page_context("/blog") \u2192 get CSS selectors for blog items
+4. Write JS that uses the discovered selectors and field names
+5. Deploy to staging, test, promote
+\`\`\`
+
+**Pattern B: Interactive Component**
+\`\`\`
+User: "Add an accordion to the FAQ section"
+
+AI Workflow:
+1. Cure Kode MCP \u2192 kode_get_page_context("/faq") \u2192 find FAQ section structure
+2. Check: Is it CMS-powered? If yes \u2192 Webflow MCP for collection schema
+3. Write JS using the exact CSS selectors from page context
+4. Deploy and test
+\`\`\`
+
+**Pattern C: Site-wide Feature**
+\`\`\`
+User: "Add a cookie consent banner"
+
+AI Workflow:
+1. Cure Kode MCP \u2192 kode_list_scripts \u2192 check for existing consent scripts
+2. Create as GLOBAL script with autoLoad: true
+3. No page-specific context needed - runs on all pages
+4. Deploy to staging, verify on multiple pages, promote
+\`\`\`
+
+### Key Principles
+
+1. **Never guess selectors** - Always use \`kode_get_page_context\` or \`kode_fetch_html_smart\`
+2. **Never assume CMS structure** - Always query Webflow MCP for collection schemas
+3. **Check before creating** - Use \`kode_list_scripts\` to avoid duplicates
+4. **Document discoveries** - Update \`context.md\` with findings for future sessions
+5. **Staging first** - Always deploy to staging before production
+
+### When You're Stuck
+
+If you can't find the right selectors or understand the structure:
+1. Ask the user to open the page in browser and describe what they see
+2. Use \`kode_fetch_html_smart\` with the specific URL
+3. Check if there's cached context in \`kode_list_pages_context\`
+4. Ask the user to refresh context: \`kode html <url> --save --force\`
 
-MCP tools provide richer functionality than CLI alone (page assignment, context updates, HTML caching).
 `;
 }
 
@@ -726,6 +852,65 @@ config.json
       args: ["-y", "@curenorway/kode-mcp"],
       env: {}
     };
+    let webflowToken = site.webflow_token;
+    let webflowMcpMethod = null;
+    spinner.stop();
+    if (webflowToken) {
+      console.log(chalk.green("\u2713 Webflow API token found in site settings"));
+      webflowMcpMethod = "token";
+    } else {
+      console.log(chalk.yellow("\n\u{1F4E6} Webflow MCP Setup"));
+      console.log(chalk.dim("   The Webflow MCP enables AI agents to interact with the Webflow Designer."));
+      console.log();
+      const { webflowSetup } = await prompt([
+        {
+          type: "select",
+          name: "webflowSetup",
+          message: "How would you like to set up Webflow MCP?",
+          choices: [
+            {
+              name: "oauth",
+              message: "Use OAuth (recommended) - authorize via browser when needed"
+            },
+            {
+              name: "token",
+              message: "Provide API token - use a Webflow API token"
+            },
+            {
+              name: "skip",
+              message: "Skip - set up Webflow MCP later"
+            }
+          ],
+          initial: 0
+        }
+      ]);
+      webflowMcpMethod = webflowSetup;
+      if (webflowSetup === "token") {
+        const { webflowToken: providedToken } = await prompt([
+          {
+            type: "password",
+            name: "webflowToken",
+            message: "Webflow API Token (from webflow.com/dashboard/account/integrations):",
+            validate: (value) => value.length > 0 ? true : "Token is required"
+          }
+        ]);
+        webflowToken = providedToken;
+      }
+    }
+    if (webflowMcpMethod === "token" && webflowToken) {
+      mcpConfig.mcpServers["webflow"] = {
+        command: "npx",
+        args: ["-y", "webflow-mcp-server@latest"],
+        env: {
+          WEBFLOW_TOKEN: webflowToken
+        }
+      };
+    } else if (webflowMcpMethod === "oauth") {
+      mcpConfig.mcpServers["webflow"] = {
+        url: "https://mcp.webflow.com/sse"
+      };
+    }
+    spinner.start("Generating AI context files...");
     writeFileSync3(mcpConfigPath, JSON.stringify(mcpConfig, null, 2) + "\n");
     spinner.text = "Generating AI context files...";
     spinner.start();
@@ -856,12 +1041,35 @@ config.json
     console.log(chalk.cyan("  2. kode watch    ") + chalk.dim("Watch for changes and auto-push"));
     console.log(chalk.cyan("  3. kode deploy   ") + chalk.dim("Deploy to staging"));
     console.log(chalk.bold("\n\u{1F4A1} MCP Tools:"));
-    console.log(chalk.dim("  Restart Claude Code, then use /mcp to approve the cure-kode server."));
-    console.log(chalk.dim("  This enables AI tools like kode_update_script, kode_fetch_html_smart, etc."));
+    console.log(chalk.dim("  Restart Claude Code, then use /mcp to approve the MCP servers."));
+    console.log();
+    console.log(chalk.dim("  cure-kode:"));
+    console.log(chalk.dim("    kode_update_script, kode_fetch_html_smart, kode_deploy, etc."));
+    if (webflowMcpMethod === "token") {
+      console.log();
+      console.log(chalk.dim("  webflow (token mode):"));
+      console.log(chalk.dim("    Interact with Webflow Designer API, modify site structure, CMS, etc."));
+    } else if (webflowMcpMethod === "oauth") {
+      console.log();
+      console.log(chalk.dim("  webflow (OAuth mode):"));
+      console.log(chalk.dim("    You'll be prompted to authorize via browser on first use."));
+      console.log(chalk.dim("    Requires Node.js 22.3.0+ for remote MCP."));
+    } else {
+      console.log();
+      console.log(chalk.dim("  webflow: ") + chalk.yellow("Not configured"));
+      console.log(chalk.dim("    Run `kode init --force` to set up Webflow MCP later."));
+    }
     if (claudeMdAction === "separate") {
       console.log(chalk.yellow("\n\u{1F4A1} Tip: Add this line to your CLAUDE.md to reference Kode instructions:"));
       console.log(chalk.dim("   See KODE.md for Cure Kode CDN management instructions."));
     }
+    if (webflowMcpMethod === "token" || webflowMcpMethod === "oauth") {
+      console.log(chalk.bold("\n\u{1F517} Webflow Designer Integration:"));
+      console.log(chalk.dim("  1. Open your site in Webflow Designer"));
+      console.log(chalk.dim("  2. Press E to open Apps panel"));
+      console.log(chalk.dim('  3. Launch the "Webflow MCP Bridge App"'));
+      console.log(chalk.dim("  4. AI agents can now interact with the Designer"));
+    }
   } catch (error) {
     spinner.fail("Initialization failed");
     console.error(chalk.red("\nError:"), error);

package/dist/cli.js

@@ -15,7 +15,7 @@ import {
   readPageContext,
   statusCommand,
   watchCommand
-} from "./chunk-OW3XKTBO.js";
+} from "./chunk-Z3QNIDBJ.js";
 
 // src/cli.ts
 import { Command } from "commander";

package/dist/index.js

@@ -27,7 +27,7 @@ import {
   updateScriptPurpose,
   watchCommand,
   writeContext
-} from "./chunk-OW3XKTBO.js";
+} from "./chunk-Z3QNIDBJ.js";
 export {
   KodeApiClient,
   KodeApiError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curenorway/kode-cli",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "CLI tool for Cure Kode - manage JS/CSS scripts for Webflow sites",
   "type": "module",
   "bin": {