What is Loops?

Loops adds custom functionality to your Webflow site. You describe what you want in plain English — animations, API calls, dynamic content, form logic — and an AI builds it for you.

The difference between Loops and just asking an AI for code? The AI can see your site. It pushes code to your staging site, takes a screenshot, reads the console output, and checks if it actually worked. If something’s broken, it reads the error, fixes the code, and pushes again. No pasting. No debugging. The loop runs until it’s right.

How the loop works

1. You describe what you want — “Add staggered fade-ins to the portfolio grid.” Plain English.
2. The AI writes code and pushes it — your staging site reloads automatically with the new code running.
3. The AI checks if it worked — it takes a screenshot, reads console output, inspects the page. It sees the result.
4. If something’s wrong, it fixes it — reads the error, rewrites the code, pushes again. Repeats until it’s right.
5. You review — check your staging site. Want changes? “Make it slower.” The loop runs again in seconds.

What you can build

Anything JavaScript can do on a webpage:

• Animations — scroll-triggered fade-ins, hover effects, parallax, staggered reveals
• Dynamic content — fetch data from APIs and display it on your page
• Form logic — validation, conditional fields, multi-step forms
• CMS filtering — filter and sort collection lists without page reloads
• Interactive elements — tabs, accordions, modals, sliders
• Third-party integrations — analytics, chat widgets, embeds

The AI works with your existing Webflow classes and layout. It adds behavior without touching your design.

What you need

• A Webflow site with a staging URL (every Webflow site has one — it ends in .webflow.io)
• An AI coding tool — we recommend Claude Code for the best experience, but Cursor, Windsurf, GitHub Copilot, and others work too. Any AI that can run terminal commands will do.
• Google Chrome — the AI needs Chrome to see your site. Other browsers won’t work for this part — Chrome’s debugging tools are what make the feedback loop possible.

Getting started

Copy this and paste it into your AI agent:

That’s it. The AI will read the docs, install everything, and walk you through the rest. Here’s what happens:

Step 1: The AI sets up Loops

The AI installs loops-cli, creates a project for your site, and asks you to create an account (just email and password). At the end, it gives you a script tag.

If you’re not sure which AI tool to use, Claude Code is the easiest path — it’s what Loops was built for.

Step 2: Paste one script tag in Webflow

This is the only thing you do in Webflow.

1. Go to your Webflow project
2. Open Site Settings (the gear icon)
3. Go to Custom Code
4. Paste the script tag in the Before </body> field
5. Publish your site

This tag is the loader. It’s tiny, does nothing on your live site, and handles everything — loading your scripts, reloading the page when code changes, and connecting to dev mode.

Step 3: Connect Chrome so the AI can see your site

This is the part that makes Loops special — and it’s easier than it sounds.

For the AI to see your site — take screenshots, read console output, inspect elements — Chrome needs to open with a setting called “remote debugging.” Don’t worry about what that means. Chrome looks and works exactly the same. The only difference is the AI can now see what’s on the screen.

Your AI agent will do this for you. Just tell it you’re ready to connect Chrome.

If you ever need to do it manually on Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

The AI also sets up a bridge called Chrome DevTools MCP that lets it talk to Chrome. In Claude Code:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect

Tip: You only need to set up Chrome DevTools MCP once. After that, just make sure to open Chrome with the remote debugging flag each time you want to use Loops.

Step 4: Open your staging site with ?loops

Navigate to your Webflow staging site in Chrome and add ?loops to the URL:

https://your-site.webflow.io?loops

This activates dev mode. The page will now reload automatically every time the AI pushes new code. Without ?loops, only published scripts load — so visitors never see work-in-progress code.

Step 5: Start building

Tell the AI what you want. “Add a scroll-triggered fade-in to the portfolio section.” That’s it. The loop takes over.

Tip: Start with something small and visual — a fade-in, a hover effect — so you can see the loop in action. Once you trust it, go bigger.

What it looks like in practice

Your screen: Your Webflow staging site in Chrome, looking exactly like it normally does. When the AI pushes new code, the page refreshes and you see the changes live — animations playing, content loading, interactions working.

Your AI chat: You describe what you want. The AI responds with what it’s doing:

“Writing the animation and pushing to your staging site…” “Taking a screenshot… I can see the portfolio grid. The fade-in is running on 6 items.” “Looks good. Want me to adjust the timing?”

Or if something goes wrong:

“I see an error in the console: .portfolio_grid not found. Let me check the actual class names on your page…” “Found it — it’s .portfolio-grid_wrapper. Fixing the selector and pushing again…” “Screenshot confirms it’s working now. 6 items fading in on scroll.”

Iterating: “Make it slower.” “Add a little scale-up too.” “Only on mobile.” Each request triggers the same loop — write, push, check, fix. Takes seconds.

Page scoping

Each script targets a specific page based on its filename. The AI handles this for you, but here’s the logic:

Names starting with global- run on all pages. Everything else matches the page’s URL slug.

Staging and publishing

During development: Scripts only run on your .webflow.io staging site, and only when ?loops is in the URL. Your live site is completely untouched. You can experiment freely — nothing goes to production unless you say so.

When you’re ready: Tell the AI to publish the script. Production visitors will see it immediately — no ?loops needed. We recommend testing thoroughly on staging first, especially for scripts that touch forms or payment flows.

Changed your mind? Tell the AI to unpublish it. It’s gone from production instantly. No damage done.

No lock-in

Your scripts are plain .js files in a folder on your computer. No proprietary format. No dependency on Loops to keep them running. You can paste them into Webflow Custom Code, hand them to a developer, or keep using Loops.

For AI agents

If you’re an AI agent that was sent this page, here’s everything you need to operate Loops. The most important thing to internalize: always inspect the live page before writing code, and always verify after pushing. The feedback loop is what makes this work — don’t skip it.

Install

npm install -g loops-cli

Check prerequisites

Before starting, verify the user is set up:

# Check if CLI is installed
which loops

# Check if logged in
cat ~/.loops/credentials 2>/dev/null

# Check if in a project
cat .loops.json 2>/dev/null || cat ../.loops.json 2>/dev/null

If anything is missing, walk the user through: npm install -g loops-cli, loops signup, loops init <site-name>, paste the loader tag in Webflow, configure Chrome DevTools MCP.

Chrome DevTools MCP

This is how you see the browser. Once configured, you have these tools:

Setup (Claude Code):

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect

Open Chrome with remote debugging:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

CLI commands

The workflow

1. Run loops start (watches all projects, pushes on save). You should see it list the projects it’s watching.
2. User navigates to their-site.webflow.io?loops in Chrome
3. Understand the page before writing code. Use Chrome DevTools MCP to inspect the live DOM — never guess class names:

   take_screenshot
   evaluate_script: document.querySelectorAll('.hero-section_home').length
   evaluate_script: [...new Set([...document.querySelectorAll('*')].flatMap(el => [...el.classList]))].sort().join('\n')

4. Write/edit scripts/<name>.js → auto-push → auto-reload (~1 second). Look for ✓ Pushed <project>/<script>.js in the loops start output to confirm.
5. Use list_console_messages to check output, take_screenshot to verify visually
6. Iterate until it works
7. loops publish <script-name> when ready

Writing rules

Do:

• Add behavior only — animations, interactions, form handling, API calls. The HTML/CSS is Webflow’s job.
• Select elements by Webflow class names (.hero-section_home, .nav_link, .footer_wrapper)
• Always verify selectors exist before using them — use evaluate_script first. This is the #1 source of bugs.
• Log at key steps: console.log("Found", els.length, ".card elements") — this is how you confirm things are working
• Use GSAP/ScrollTrigger for animations — it’s the most reliable option for Webflow sites
• Work with the existing DOM — query it, animate it, enhance it

Don’t:

• Never generate HTML with JavaScript — the HTML lives in Webflow. This is the most common mistake.
• Never use DOMContentLoaded — scripts load before </body>, the DOM is already ready
• Never replace or restructure DOM elements — Webflow manages the DOM and will fight you
• Never guess class names — always verify with Chrome DevTools MCP first. Webflow class names are unpredictable (e.g. .portfolio-grid_wrapper, not .portfolio-grid)
• Never hardcode URLs that differ between staging and production

Script template

// <script-name>.js — <project-id>
// Loads on the <page> page

(function() {
  const els = document.querySelectorAll('.target-class');
  console.log("<script-name>: found", els.length, ".target-class elements");

  if (!els.length) {
    console.log("<script-name>: no elements found, exiting");
    return;
  }

  // Add behavior here

  console.log("<script-name>: setup complete");
})();

Common patterns

GSAP animation (with CDN loading):

if (!window.gsap) {
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js';
  script.onload = () => initAnimations();
  document.head.appendChild(script);
} else {
  initAnimations();
}

function initAnimations() {
  gsap.from('.card_item', {
    y: 30, opacity: 0,
    duration: 0.6, stagger: 0.15,
    ease: 'power2.out'
  });
  console.log("Card animations initialized");
}

Scroll-triggered reveal:

ScrollTrigger.batch('.portfolio_item', {
  onEnter: (batch) => {
    gsap.to(batch, { opacity: 1, y: 0, duration: 0.6, stagger: 0.1 });
  },
  start: 'top 85%'
});

Form handling:

const form = document.querySelector('.contact-form');
if (!form) { console.log("No .contact-form found"); return; }

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  console.log("Form submitted:", JSON.stringify(data));

  try {
    const res = await fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    console.log("Form response:", res.status);
  } catch (err) {
    console.error("Form error:", err.message);
  }
});

CMS filtering:

document.querySelectorAll('.filter_button').forEach(btn => {
  btn.addEventListener('click', () => {
    const category = btn.dataset.category;
    document.querySelectorAll('.cms_item').forEach(item => {
      const match = category === 'all' || item.dataset.category === category;
      gsap.to(item, { opacity: match ? 1 : 0.2, scale: match ? 1 : 0.95, duration: 0.3 });
    });
  });
});

Detecting Webflow IX2 state:

const menu = document.querySelector('.nav_menu');
const isOpen = menu && menu.style.display !== 'none' && menu.style.height !== '0px';

Troubleshooting

FAQ

Does this affect my live site? No. Dev mode only activates on your staging site when ?loops is in the URL. Production visitors only see published scripts.

What if the AI writes broken code? That’s the point of the loop. It sees the error, fixes the code, pushes again. Most issues resolve in one round.

Can I use this with Webflow Interactions? Yes. They run independently. Just don’t animate the same element with both.

What’s GSAP? An animation library the AI uses because it handles edge cases well. You don’t need to know anything about it.

Do I need to know JavaScript? No. You describe what you want in plain English. If you do know JS, you can also edit scripts directly.

What does “remote debugging” mean? A way of opening Chrome that lets the AI read what’s on screen — console output, page content, screenshots. Chrome looks and works exactly the same. The AI opens it for you.

Does it work with any AI agent? Yes. Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, OpenCode — any AI that can run terminal commands and connect to a browser.

Multiple sites? Yes. Each site gets its own project. The AI manages them all.