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 deliver clear, simple financial definitions instantly.

Try Memberstack For Free
December 12, 2025
0
Views
TABLE OF CONTENTS
Julian Galluzzo

My Honest Thoughts On Webflow App Gen After 8 Hours

Introduction to Webflow AppGen Project:

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 deliver clear, simple financial definitions instantly. Webflow AppGen is transforming how developers and designers build custom AI features without leaving the Webflow ecosystem. This tutorial walks through creating an interactive financial glossary that provides clear definitions for terms like budgeting, investments, and savings, using AI to enhance user experience on production sites. From overcoming API configuration hurdles to styling the interface for a professional look, learn the step-by-step process of using Webflow's beta AI coding tool. We explore common pitfalls like model overloads and component integration issues, offering practical tips to make your Webflow projects more dynamic and user-friendly.

Initial Prompt and Code Generation:

"So, anyways, let me write this out now. All right. So, it made something. It looks terrible to be fair. Just the colors actually. The structure is okay to me. The colors are absolutely hideous and I don't know where it came up with those."

Setting Up API Key and Local Development:

"I'm going to say, hey, this right here, can I put my API key in there? Because I genuinely do not know. I feel like I can, but anyways, let's find out. All right. So, it says I can do it. I'm going to take his word for it. I am going to delete this API key after the video anyway."

Fixing Errors and Switching AI Models:

"Visually the colors are just catastrophic. So, I definitely want to fix that up. Now, let's go ahead and see. Can I just change these variables here? I don't know why I can't see it because this is open. I think I'm just going to ask it to do it. I'm just going to say like white background, green for buttons, and accent color, and we'll see what it does."

Improving Styling and Spacing:

"Anyways, it's adding some sort of automatic retry logic. That's nice. I didn't ask it to do that. And then I think the next thing that I want to do is I want to try to get the markdown text that it produces. I want that to be formatted so it looks nice instead of like a hashtag to indicate a header."

Formatting Markdown Output:

"So, it said it's now formatting markdown. Is it? Let's go ahead and find out. I'm going to click on this one again. It's getting the explanation and hopefully it comes back        to us. Oh, wow. It's working. It's working. All right. Problem. I can't screenshot and send it to Web Flow App Gen."

Integrating Webflow Components:

"Back into AppGen. It takes a while to load here. Here's the thing. I like how I can kind of jump back and forth between like web flow and something in vibe coding        and Claude Code. You can't really jump back and forth with AppGen."

Honest Review and Future Thoughts:

"So, here's the deal. The concept of AppGen itself being able to Vibe Code apps inside of Webflow is a wonderful idea because the thing about vibe coding and this is changing rapidly I say this right now and in two weeks I may not be saying the same thing."

Add memberships to your project in minutes.

Learn more

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Get started
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.