General

WF Weekly - Episode 14

Learn how to write, test, and debug JavaScript in real-time with an AI assistant, bringing the efficiency of vibe coding to the platform you already love.

Julian Galluzzo & Duncan Hamra

Contributors

September 24, 2025·1 min read

Introduction:

__wf_reserved_inherit
Tired of the endless copy-paste cycle between Webflow and ChatGPT? Supercharge your custom code workflow by integrating a powerful local development environment directly with your Webflow project. Learn how to write, test, and debug JavaScript in real-time with an AI assistant, bringing the efficiency of vibe coding to the platform you already love.

Describing The Problem:

__wf_reserved_inherit
"I want to get on the AI, the vibe coding, context engineering, whatever you want to call it. I want to hop on that bandwagon, but I'm still too intimidated to like start from scratch and build an entire project."

Introducing The Solution:

__wf_reserved_inherit
"So I came up with a way here that is going to make that so much easier. It's a little bit of a process to set up. Doesn't take too long, but then from there, literally all you do is have a conversation with the AI coding tool of your choice and code whatever you want.

Setting Up Your Local Project with Terminal:

__wf_reserved_inherit
"So, go ahead and start a new terminal."

Creating & Connecting Your GitHub Repository:

__wf_reserved_inherit
"So you can leave all of this as is in a new tab right there. Make a new GitHub repo. Okay. So we're just on to github.com and then new."

Adding The Script Loader To Your Webflow Site:

__wf_reserved_inherit
"So basically the way it's going to work is you're going to use little snippets of code to determine which scripts show up where. So there's going to be something in your site wide code and you can decide which scripts you want to apply site wide."

Understanding the Local vs. Production Environment:

__wf_reserved_inherit
"Now I know you don't have a production URL on this site yet, but if you did have a production URL on the site, then it would load from your computer on the Web Flow subdomain and it would load from the live link on your published domain. So that means you can develop safely without having to worry about anything going live, accidentally publishing to production, nothing like that."

Writing a New Javascript Feature with an AI Assistant:

__wf_reserved_inherit
"So demo that and then after that pop it open in web flow."

Testing and Iterating on Your Code in Real-Time:

__wf_reserved_inherit
"And keep an eye on the console in case anything isn't working. Oh, nice. I think... I got a ton of other code in here with consoles but, scripts loaded successfully and it worked."

Pushing Your Final Code to the Live Production Site:

__wf_reserved_inherit
"So, we want to see what this would look like on your live site if you were using a live domain. Let's take a look."

Final Thoughts & Workflow Benefits:

__wf_reserved_inherit
"It's working. Yeah, there you go. So, Duncan, how much better has this been for you than just copying and pasting with ChatGBT?"

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

General

What is Vibe Coding? Benefits and Risks Explained

Vibe Coding offers major benefits including speed, accessibility for non-coders, and rapid experimentation, but introduces risks around security, maintainability, and debugging.

Neal

Dec 15, 2025

General

WF Weekly - Episode 26

Discover how Webflow's new beta AI tool, AppGen, revolutionizes coding custom features directly in your Webflow site. In this hands-on tutorial, I build an AI-powered financial glossary for my production budgeting tool website, tackling real challenges like API setup and component integration to del

Julian Galluzzo

Dec 12, 2025

General

WF Weekly - Episode 25

Discover the latest updates to Webflow MCP with Claude 4.5 Opus in this hands-on test!

Julian Galluzzo

Dec 12, 2025