Building a Music Visualizer with AI Code Components

Hey everybody, this is Raymond Camden, Webflow Developer Evangelist, and today I want to show you an example of something that we launched fairly recently that's pretty darn cool. And that is AI code components. Now, previously we have supported the ability to take ad hoc React components and import them into your site. What's cool about this feature is that you can use an AI prompt to create those components directly within Webflow. Now, there's a great video that introduces the topic as a whole, and I will link to that below. But I want to show you an example of this in action so you can see the kind of output you get and the kind of things that you can create. So, I am going to go into my site and I'm components and click to create new one and select generate with AI. And I have a prompt already written, and I'm just going to copy and paste and let it go to work. So, we will go in there. I will paste this in and hit start. So, what my prompt said is basically, "I want you to build a music player component named Cyberpunk music player. The component will have a sleek Cyberpunk UI. It will have a property for song title, song artist, and a source link that when clicked opens in a new tab. Another property is the URL for the MP3 source. Include play, stop controls, a scrubber to fast forward, and a scrubber's a thing you kind of grab, it's like a little horizontal bar you can go back and forth. Anyway, and a visualizer using line graphs. So, the inspiration for this was Winamp, and if you don't know what Winamp is, — Years and years ago, Winamp was a program for your computer that would play music. And what made it so famous is that you can skin it. And people would create some incredibly crazy-looking Winamp skins. Uh it became a point of pride in terms of how much you customize the UI of this application. Uh there were probably thousands, maybe hundreds of thousands different skins out there uh that you could pick and choose from to your heart's desire. So, that is kind of what I was thinking here. That's the component that I want to make. And you can see it's done already, and it looks pretty darn cool. So, let's actually uh make use of this. So, I'm going to go ahead and exit out of this and go to a page I built just to work with this. Now, I went into my CMS, and I created a CMS collection called songs. And I picked six songs from Pixabay, which has royalty-free music downloads. I got the artists, I got the song titles, and all that. Uh and I got the MP3 assets, uploaded it to my Webflow site, and I've already laid this out. I just want to drop that brand new component in there, and let's see how well this works. So, I should have my Cyberpunk music player. I'm going to drop it in there. And then what I want to do is turn off the AI, get here to this. So, I want to bind this to my CMS. So, my CMS has a name for the song title, uh the artist is the artist. I have a source property. And the audio URL is going to point to the asset I uploaded essentially the MP3 uh that I pushed up. So, I'm going to go ahead and publish this, and then we will test it out. And what's cool is that I don't really know React. Uh I can read React, can't really write it from scratch my myself yet, but I didn't have to do a thing. The AI tool generated everything. So, we will let this publish, and then we'll take a look to see uh what it created. So, let's open this up. And we have our music player. So, we will pick uplifting Why not? That's pretty loud, but you can see it gave me the visualizer. Uh I have the scrubber here. I can go, you know, later in the song. Uh we will do inspiring cinematic music. After. But, there you go. Just an example. All this done within 5 minutes, which is pretty cool. And I actually do have

access to that source. So, if I wanted to modify the look and feel a bit, I could do so. Anyway, let me know what you think. Leave me a comment below, and uh tell me what you've built.