Skip to main content

Blog/WF Weekly/WF Weekly - Episode 26

WF Weekly#Webflow#WF Weekly#AI Coding

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·Content Writer

|

December 12, 2025·1 min read

My Honest Thoughts On Webflow App Gen After 8 Hours

Introduction to Webflow AppGen Project:

__wf_reserved_inherit — 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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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:

__wf_reserved_inherit — "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."

Launch. Monetize. Scale.

Ready to add memberships to your site?

See which plan fits your build — start free, no credit card required.

See plans & pricing Start free

Topics

#Webflow#WF Weekly#AI Coding

Written by

Julian Galluzzo

Content Writer

Contents

Introduction to Webflow AppGen Project:
Initial Prompt and Code Generation:
‍Setting Up API Key and Local Development:
Fixing Errors and Switching AI Models:
Improving Styling and Spacing:
Formatting Markdown Output:
Integrating Webflow Components:
Honest Review and Future Thoughts:

Share

Explore Memberstack

All Features
Customer Showcase
Templates
Find Experts
Pricing
Help Center

Related Articles

A Complete Guide to the Memberstack MCP Server

A Complete Guide to the Memberstack MCP Server

Neal

WF Weekly - Episode 29

WF Weekly - Episode 29

Discover how a leading low-code dev house is navigating the AI revolution in web app development.

Julian Galluzzo

5 Free Webflow Cloneables Worth Your Attention Right Now

5 Free Webflow Cloneables Worth Your Attention Right Now

The Made in Webflow page is still producing great work. Here are five free cloneables, from scroll-driven transitions to full landing page templates, that you can grab and use in your projects today.

Neal

Product

Full Feature List
User Accounts
Gated Content
Secure Payments
API & Integrations
Data Tables
Email Campaigns
Memberstack & Webflow
Memberstack & Claude Code
Memberstack & WordPress

Create a new account
2.0 Log in
1.0 Log in
Pricing

Learn about Memberstack

Showcase
Testimonials
Why Memberstack
Memberstack vs Outseta
Memberstack vs MemberSpace
Memberstack vs Webflow Memberships

Company

About
Careers
Changelog
Brand & Logo
Partnerships^(email)
Contact Us^(email)
X
LinkedIn
"Do Not Sell My Data" Promise

Resources

Vibe Coding
Free Tools
Templates
Components
MemberScripts
Data Attributes
Find Experts
Hiring Guide
Webflow Slack Community
WordPress Slack Community
Support Forum
Help Center
Blog
llms.txt (for AI)
llms-full.txt (for AI)

AICPA
SOC

SOC 2 TYPE 1

CERTIFIED

GDPR

COMPLIANT

CCPA

COMPLIANT

Privacy Policy Terms of Service Cookie Policy Security Policy

© Memberstack Inc. 2018 - 2025. All rights reserved.