Used by 50,000+ Teams & Agencies
$128,000,000+ earned
Free until launch. No credit card needed.
Used by 50,000+ Teams & Agencies
$168,000,000+ earned
Vibe Code
with Memberstack →
Memberstack Blog

WF Weekly - Episode 18

Unlock the power of Webflow like never before by learning to build custom, API-powered React components with the help of an AI coding assistant.

Try Memberstack For Free!
October 13, 2025
TABLE OF CONTENTS
Julian Galluzzo & Duncan Hamra

Introduction:

Unlock the power of Webflow like never before by learning to build custom, API-powered React components with the help of an AI coding assistant. This step-by-step tutorial shows you how to create a dynamic weather component, integrate it seamlessly into your site, and customize it to match your design system perfectly. Stop relying on embeds and start building truly bespoke, interactive elements for your Webflow projects.

Setting Up the React Project & Webflow CLI:

So, first things first, all we have here is a Web Flow site and along with that I have the documentation from Web Flow open.

Importing Documentation into the AI Assistant:

So now I'm going to pop open this thing that I created in GitHub which is for Claude code. So if you're using Claude code, you can just go ahead and run this command right here and it's going to like import this documentation into Claude.

Generating the Initial Weather Component with AI:

So I'm going to go ahead now and write up my prompt describing what it is that I want it to make. All right. So I just said, can you make me a Webflow code component for displaying the weather in Rome, Italy?

Testing the Component Locally:

I'm actually going to go over here and I'm just going to run NPM start because we can develop this locally. Take a look at the changes, see if it works, see if it doesn't work before we actually go ahead and bring it into Web Flow. So, what I'm going to do now that I have this open is I'm going to go ahead and send it here.

Importing the Component into Webflow:

Then we're going to go through the revision process and make it even better. So, over here, there's a command that we can run, which is in the documentation right here. It's npx Webflow library share.

Debugging Errors with the AI Assistant:

So, I just ran into an error here. And honestly, from my testing, I run into an error here at like every single time that I've tried it. So, what I'm going to do now is I'm going to go ahead and fix this error.

Centering the Component Layout:

That being said, it's got some issues. So, we can see in here when it's skinnier, it's centered. But then over here when it's not skinny, it is like all off to the left. So, I'm just going to go ahead and say, can you center everything in this card?

Customizing Component Properties (City Input & Units):

And just like that, everything is centered exactly like I want it to. So now if I go over here and we can see that there is the city of Rome. I'm gonna want that to be I can    just like write in a city and then it's going to load it through the API. So I'm going to ask it to do that.

Inheriting Webflow Site Styles (Fonts & Variables):

I want to be able first of all I want it to inherit the font. So I'm going to go ahead and let it know just inherit the font. And along with that I want to be able to add an accent color. So let's say it's going to change the color of the temperature here. And then we're going to be able to even use Web Flow variables in that.

Implementing Dark Mode and Final Review:

All right. So, it has been imported into Web Flow. And as you can see right off the bat, it is now inheriting the font.  So, now, for example, if I go ahead and change the font throughout the site to, let's just say, EXO, for example, it updates to EXO.

Conclusion:

We just vibe coded this component which uses an API. It's fully flexible and fully customizable in web flow and there's no limitations. It's just using React. This is honestly one of the coolest things that Web Flow has released recently and I think it is so underrated.

Add memberships to your Webflow 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

Related Webflow Components

Clone over 250 free Webflow components - no registration needed!
No items found.
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.

Start free trial