AI code components in Webflow

AI code components in Webflow are React components that you can build from a prompt, and then use them like components anywhere on your website, just like any other type of component. So let's take a look at what we're trying to build here.

I have a website where I teach people about lighting and sound, and we have lots of different resources, tons of videos with garishly colored thumbnails.

We also want to build something called an ear training app, and the idea here is that as you're getting more into sound and you're working on sound and post-production and doing recordings, one of the things you need to do is train your ears so that you can hear very nuanced types of differences. And that's the purpose of an ear training app — is to teach you how to hear those things so that you can make the right changes to your audio. And the idea here is I want to be able to help people hear different frequencies in the audio spectrum.

So what I want to do is create this app where you can come to my website, we'll play back a sound to you, and we'll make a change to that sound using something called an equalizer. We'll boost one of the audio frequencies or cut one of the audio frequencies, and then give you an option of four different audio frequencies and have you choose the right one. And it's just like a little quiz. It'll help you learn much more quickly how to hear these different frequencies.

Now there are a few prerequisites I want to run through really quickly. First of all, as far as roles, you need to have a site manager role or designer role.

There are a few limitations as well — recording this in early May 2026, this will change over time, but as of right now when you use the AI code components you're generating a React component. There aren't any other libraries you can choose from at the moment, but React is very rich so there are lots of opportunities to do all kinds of things here. Second of all, it just generates a single file — it's not a multi-file kind of piece of code. It also does not allow integration with CMS data yet. And finally, once you've generated the AI code component, you can't modify that component using, for example, the style panel on the canvas. Again, check back — things will change very quickly here.

Alright, let's jump over into our site here. And we're going to come over to the components panel. I'm going to create a new component right up here at the top and I'm going to choose "Generate with AI."

Now of course I have a prompt that I've already created. So I'm going to come on over to my prompt here. I'll walk you through this.

The idea here is I want it to create an EQ ear training app. The purpose is to help visitors hear specific audio frequencies. And what I want the app to do is to play pink noise with a boost or a cut at a frequency, and ask the visitor to choose from four options, which frequency is boosted or cut. Allow the visitor to toggle the cut or boost on and off so they can hear the difference. Quiz them with ten questions and then give them a final score, and so on and so forth. There's a paragraph here just with some instructions for them. Once the user has selected an answer, stop playing the pink noise. And then also give them a control to quit the quiz at any time.

So we'll go ahead and copy that, we'll come back over into Webflow here, and just paste that prompt right in here, and we'll have the AI assistant get to work on that. Now here in the interface you can see as the AI assistant is working on this, a couple of things. I am seeing first of all the component canvas here and it's kind of just put a placeholder component for us. We also see the code window over here, so you can see it's already starting to generate some code — it just put some of the kind of the default initial stuff in there. And if I want to hide that code I can do that, I just click this button right here, or if I want to view it again I can come over here.

You'll notice here that as the AI assistant is working on this, it is taking into account all the styles on our site. So we already have a design system built for the site, we have variables defined, we have a whole bunch of classes, we have a style guide set up where we define those classes. So it's taking all of that into account. So when it creates our code component here, it should take all that into account and build something that fits into the site. Now you can see here it's already writing code, thinking it through right now. It's very cool, you can watch it do this.

Incidentally, once it's done with this as well, we can actually edit the code right here in the code window. So if there's anything that we want to change or tweak or fine-tune, if you're familiar with JavaScript and React, you can get in here and go ahead and change things.

As it's happening, as it's doing this, I just wanted to share with you one of the most important lessons I've learned since I've been on this spinning blue planet. Oh, it's done!

So here's our code component and it is our ear training app. Very excited to try this out. So let's go ahead and go into preview mode while we're here on the component canvas and try it out. I'm going to go ahead and put my headphones on just so we can hear what that sounds like. Of course it's compiling our custom code, which we just generated. Alright, let's do the beginner quiz.

Okay, first of all that's pretty loud. I'm probably going to want to do something about that. And I can toggle it on and off it looks like. Is that 1 kilohertz? No, it was 2.5 — got it wrong. Now it's boosting a frequency. That's 100 Hertz. Yeah, we got it right!

Okay, so things are working pretty well. There are a couple of things that I want to fine-tune here. Let me go ahead and quit that and come back out of preview mode.

A couple of things: number one, when the pink noise starts playing it's jarring — it's too loud. And number two, it should kind of fade in. So let's go ahead and give this a prompt here and say: let's reduce the pink noise by 3 dB. Also when you play the pink noise, fade in over one second. Okay, let's give it that and see what it's able to do with that.

It says that it's done. So we'll close our code window, let's go back in and test it again and see what we get this time.

That is definitely better. 200 Hertz. No, it was 8 kilohertz — I didn't hear it, I might need to get my ears checked. Okay, it's cutting a frequency here. I bet you it's 2.5. No, it's 800. Okay, so that is working just like we want it to.

Now there are some other things you can do here as well. Just like any other component, you can add properties to this code component. So let's go ahead and ask for a couple things. Number one, I might not necessarily want to offer the beginner, intermediate, and advanced options — let's make the intermediate so that it can be toggled on and off. And let's also make it so that you can choose how many quiz questions there are. Ten might be a little bit much, maybe five is something more like we'd want. So I'm going to say: please add the following properties — a configurable number of quiz questions, and make the intermediate option an optional toggle on or off. Let's see what it does here.

Okay, it says that it added both. And what we can do here to check our properties — let's just go ahead and pop out here. While we're here, let's go ahead and add this to one of our pages so I can work on it there. So I've set up this page for the ear training. Let's go into the components panel here. Here's our ear trainer — we'll just drop it right down in here. Now when I select this component, you can see I have access to the properties here. So we call it the EQ ear trainer. We can change the number of questions — let's change it to three. And let's turn off intermediate. Yes, so it did exactly what we wanted it to do there.

Go ahead and go into preview mode and let's see what we have this time. I'll go into beginner. Okay, it's boosting a frequency. That's 1.6. Yes, got it. It's cutting a frequency. I think it's 1.6 again. Yeah, we're doing alright this time. And it's boosting a frequency. Hard to tell on that one. I'm going to guess — yeah, we got it. Alright, so we can see our results, and you can see that it changed it to three questions. So it is working like we wanted it to.

Next up you just publish it and it is live on your site. Of course you can add it to multiple pages if you wanted to. In our case it doesn't make sense — we'll just have it on this one page. But really exciting what you can generate with this.

Now there is one question, and that is: when should you use native components? When should you use AI-generated code components? And when should you use maybe DevLink code components? And the answer is this. For native components, they're the right default for a lot of things — site layouts, reusable design system patterns, nav bars, footers, card grids, things like that. Usually a native component is going to do the job. You do have some flexibility — you have conditional visibility, you have the ability to add properties so you can customize each instance. But you can get a long way with those, so that's the best place to start for doing those kind of layout type things.

AI code components are best when you need interactive, stateful functionality that native components can't really handle — exactly like we demonstrated here. You could not do this with a native component in Webflow. You have to use a code component, and that's what we were able to achieve there. And this is something that most people can generate — almost anyone can do this.

Now on the other hand, what about DevLink code components? If you have a development team, or even just an individual engineer, then DevLink code components may make the most sense. If they want to create those React components, or they've already created a bunch of React components and you want to bring those into your site, that's where DevLink is the perfect option as well.

So hopefully that was helpful. You can learn more about this over at the help center, and we're going to be building more and more content over at Webflow University on the AI features within Webflow. Get out there and make some great new components.

‍