General

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.

Julian Galluzzo & Duncan Hamra·Contributors
|
October 13, 2025·1 min read

Introduction:

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

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

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

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

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

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

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

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

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

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

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

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

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

General

What is the Webflow Cloud?

Webflow Cloud is not just a faster hosting or a minor infrastructure update. It is a complete reimagining of what you can build in Webflow.

Neal

General

Meet Rey: Your New AI Assistant in Memberstack’s Dashboard

Memberstack has launched Rey, an AI assistant integrated directly into your dashboard that can create plans, configure gated content, manage members, and troubleshoot issues through simple chat commands.

Neal

General

WF Weekly - Episode 19

Unlock the power of Webflow's new code components to build a dynamic, custom CMS filter with search and range sliders.

Julian Galluzzo & Duncan Hamra

Oct 16, 2025