Shadcn's AI Elements are AWESOME (easiest way to build a chat app)

Shadienne is absolutely awesome. I mean, I probably don't have to explain that to you if you clicked on this video, but it massively changed my workflows from inflexible UI libraries to having complete control while still moving fast. Just makes it so easy to build beautiful apps. Well, now you can build beautiful chat apps or even full-blown VI coding tools like Vzero thanks to AI elements. These are brought to us by VEL, which means they are built for the AI SDK. So, building an AI app has never been easier, and I'll prove that in this video. So, let's take a look at all of the awesome components that you can use.

Then I'll see how quickly I can spruce up my chat app. So, I'll quickly go over all of the components that you get with AI elements and then I'll get to using them myself. You can see I'm on the documentation here which is actually on the Vel website and on the left we actually have the list of all of the components we can use. You can see you can actually install this with our own CLI tool or you can install it with Shad CN. So, here are some of the basic examples of what you can achieve by using AI elements. We have a chat GPT clone here. There's a clawed one and even a Grock one as well. The super nice part about this is this is going to be the same components just styled in a

different way which is part of the magic of Shadzien. You get components that just work. You still have complete control over the styling. We start at the top. Then our first component is the actions one. Just super nice helper underneath your message if you want to regenerate it. Thumbs up or thumbs down, copy it or give it a share. So it's super nice we have that component. The branch component here is super nice and it's just going to work out of the box. You can choose between the different messages that you might generate. Maybe you have a few options in your app. Code block is something that's usually quite hard to get right in applications. To

get the syntax highlighting actually working can sometimes be a little bit difficult and hard to do well. So, this is super cool that you can just get this straight away. Then we have the basic conversation component. This is going to get us up and running really quickly. Literally, all we need is the AI SDK and this conversation component and we're ready to go. We've basically built out a full chat app already. So, that is absolutely awesome. some helper components here like the image and loader and we've also got our single message and also the prompt input is one of my favorite components. I always struggle with how I'm going to design my prompt input. So, it's super nice that I

can just install this one. I know it's going to work and it's ready to go with adding attachments, talking to it with voice or using search and then also a model selector. Super nice to see that it's integrated some of these in there as well. I imagine this is probably just a drop down from Shad CN2. Then we have a reasoning section. So if you're building a chat app and it replies with some reasoning, you can have a nice collapsible section here. Then we've got the response itself. Now this is another thing that is really painful to get right when you're building out a chat app. Actually getting the markdown rendering completely right is a pretty hard thing to do sometimes. Like you've

got the code block in here. You've got the maths rendering. I remember when the AI SDK first came out, it was a bit of a headache to actually try and work out how all of these tools rendered that markdown and also how to get it right to render it in your application as well. Now you can literally just install one component and it's all done for you. That is super cool to see. Then we have a few more helpers like sources which you might put underneath a message if you use web for example. There's the suggestions component. There's a task one. If you're building out something more like a vibe coding tool, you might want to show what tasks it did like reading page.tsx. Then we have a tool

call one which I would use in a chat app here. So maybe this has gone off to call something like the database query. You can see the parameters and also the result. Nice that that's collapsible. And finally, we also have the web preview. That is going to be a super powerful component if you're building something out that might have browser use or even a vibe coding tool where you want to show the result of the actual code itself in your application. So, that was a quick fire of all of the components that we get from AI elements. You can see all of them are beautiful and hopefully easy to use. So, let's put that to the test and see how quickly we

can link these components up with the AI SDK to get a fully working chat app. So, this is my existing chat app. You can see it doesn't look very good. If I paste in a message like how many championships does Lewis Hamilton have and ask it to search the web and hit send, you can see we have the user message showing up here. Then also the assistant message with some of the sources. The markdown rendering isn't working and again it just doesn't look very good. This took me about 5 minutes to set up using the AI SDK and also just some simple HTML elements and Tailwind. You can see in the actual page here we