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