# Build Stunning AI Chat UIs with Vercel AI Elements + Streamdown (2025 Guide)

## Metadata

- **Published:** 10/2/2025
- **Duration:** 15 minutes
- **YouTube URL:** https://youtube.com/watch?v=gHOc7FGGSOg
- **Channel:** nerding.io

## Description

Join the Community: https://nas.io/vibe-coding-retreat

Want to build a beautiful, streaming-first AI chat experience? In this video, I’ll show you how to use Vercel AI Elements (a React component library for AI apps) together with Streamdown (a markdown renderer built for streaming AI responses).

We’ll cover:
- 🚀 What AI Elements are and why they matter
- 🎨 How to style and customize chat UIs with React
- ⚡ Real-time markdown streaming with Streamdown
- 🛠 Integrating with the Vercel AI SDK
- ✅ Best practices, performance tips, and gotchas

By the end, you’ll know how to build a production-ready AI chat interface that looks great, streams smoothly, and is fully customizable. Perfect for AI apps, SaaS dashboards, or dev projects in 2025.

🔗 Resources & Links:
📩 Newsletter: https://sendfox.com/nerdingio
📞 Book a Call: https://calendar.app.google/M1iU6X2x18metzDeA

💬 What’s the one social platform you’d automate first—Twitter, LinkedIn, or TikTok?
👍 Like & Subscribe for more AI + automation tutorials that save you time.

## Key Highlights

### 1. Vercel AI Elements: Pre-built UI for AI Chatbots

Vercel AI Elements provide pre-packaged, customizable UI components (based on SHOD CN) for easily building AI-powered chatbots. Includes components for actions, avatars, code blocks, prompts, reasoning, and more.

### 2. Streamdown: Improved Markdown Streaming for React

Streamdown addresses rendering issues in React markdown by streaming tokens correctly, resulting in a more fluid and styled display of markdown content in AI chat applications. This avoids the 'popping' effect.

### 3. Context Management is Key

The video highlights the importance of context management in AI chatbot development, noting that excessive context can degrade accuracy and performance over time. Refreshing context by starting new chats helps maintain optimal results.

### 4. AI Package Hallucinations: A Security Risk

The presenter cautions about AI hallucinating package names, leading to potential security vulnerabilities. Developers should verify package authenticity to prevent installing malicious or non-existent libraries.

### 5. Simplified Chatbot Creation

The demo showcases how to quickly build a functional chatbot using Vercel AI SDK and Elements, covering PRD generation, architecture design, and implementation details. Includes local storage and basic network calls.


## Summary

## Video Summary: Build Stunning AI Chat UIs with Vercel AI Elements + Streamdown (2025 Guide)

**1. Executive Summary:** This video provides a practical guide to building modern AI chat interfaces using Vercel AI Elements, a React component library, and Streamdown, a markdown renderer optimized for streaming AI responses. It demonstrates how to leverage these tools to create customizable, performant, and visually appealing AI chatbots.

**2. Main Topics Covered:**

*   **Introduction to Vercel AI Elements:** Overview of the pre-built UI components for AI chatbot development, covering elements like actions, avatars, code blocks, prompts, reasoning, and markdown display.
*   **Streamdown for Real-time Markdown Streaming:** Explanation of how Streamdown improves the display of markdown in React applications by streaming tokens correctly, creating a smoother user experience compared to traditional React markdown solutions.
*   **Integration with Vercel AI SDK:** Demonstration of how to combine Vercel AI Elements and Streamdown with the Vercel AI SDK to build a functional chatbot, including generating a PRD, outlining architecture, and providing implementation details.
*   **Context Management and AI Hallucinations:** Discussion of best practices for managing context in AI chatbots to maintain accuracy and performance and a warning about the security risks associated with AI hallucinating package names during development.
*   **Building a Chatbot Demo:** Practical example of building a simple chatbot with a persistent UI bubble in the lower-right corner of the screen, demonstrating the ease of development with Vercel AI Elements and the AI SDK, including local storage and network calls.

**3. Key Takeaways:**

*   **Vercel AI Elements simplifies chatbot UI development:** Provides pre-packaged, customizable UI components that accelerate the creation of visually appealing and feature-rich chatbots.
*   **Streamdown enhances markdown rendering:** Improves the user experience by offering smoother, more fluid markdown streaming in React applications, eliminating the "popping" effect.
*   **Context management is crucial for AI performance:** Regularly refreshing the context of the AI chatbot can help maintain accuracy and performance over time.
*   **Security considerations for AI hallucination:** Developers must verify package authenticity to prevent installing malicious libraries.
*   **Simplified chatbot creation workflow:** The video demonstrates a streamlined process for building a chatbot using Vercel AI Elements and the AI SDK, covering design, architecture, and implementation.

**4. Notable Quotes or Examples:**

*   "With [AI Elements], you actually have UI components that you can actually pull into your different agents and uh chat bots." - Explains the core value proposition of Vercel AI Elements.
*   "Streamdown...actually streams out the essentially the tokens as it was, but those elements are streamed correctly as they are styled." - Describes the benefits of Streamdown over React Markdown.
*   "The more context that we provide the uh the more initial value we get but as that starts to to degrade or rot then our accuracy and our performance goes down." - Highlights the importance of context management.
*   "AI like notoriously hallucinates all the packages and that's why we're trying to give it the implementation details of exactly what it needs to put in." - Warns of the potential security risks when AI tools suggest package names and the importance of verifying their authenticity.
*   The example of creating a PRD, architecture document, and implementation guide using the AI tools demonstrates the accelerated development workflow enabled by Vercel's AI ecosystem.

**5. Target Audience:**

*   Web developers interested in building AI-powered chat interfaces.
*   React developers seeking to leverage pre-built UI components for AI applications.
*   Engineers looking to improve the streaming markdown experience in their applications.
*   Anyone interested in learning about the Vercel AI SDK and its capabilities.
*   Individuals looking for best practices and tips for building production-ready AI chatbots.


## Full Transcript

Hey everyone, welcome to Nering.io. I'm JD and today what we're going to go through is Verscel's AI elements. What that means is you actually have UI components that you can actually pull into your different agents and uh chat bots. With that, let's go ahead and get started. All right, so a couple different things came out that um I really like and I'm super excited about. So the first is this uh ability to create open source UI elements that are based off of SHOD CN. And what this means is that you can actually get AI elements that are preackaged, predefined, whatever word, and actually implemented into the use chat super easily. So you can kind of see that it's filtering on text. That means that it has the ability to do things like tools as well as uh messaging. So if we look at the elements here, we've got different types of hooks that we can leverage. Uh you can see like attach button clicks for search, there's uh actions, there's avatars, you can do code blocks, uh images, even like prompting. Uh you can see reasoning. This is super cool. And then uh how it's going to display the markdown, even math. as well as suggestions and then uh task based information, right? And you can see some of this in like V0, which is probably where some of this is coming from, but even the ability to look at tools so we can understand the parameters that are going on and coming back again. I would typically have to build all of this and now it's coming essentially prepackaged but with the ability to uh customize. I mean even this inline citation is pretty sweet. So the other thing that I really liked is they came out with this thing called streamdown. So streamown is very similar to the AI agents. it's using the response. But one of the things that happens when you're actually trying to uh display text is when you have React markdown versus string down, you you start to see like this popping piece where it's not as fluid, right? or you have to stylize those MDX and uh elements into your markdown. Whereas stream down, if you can see it again, it actually streams out the essentially the tokens as it was, but those elements are streamed correctly as they are styled. So, this is probably a better way to see it. We're actually going to see what's happening with markdown where we're actually seeing markdown over here. This is actually compiling. It's recognizing the markdown as it's streaming. So, I thought this was super awesome and I just wanted to kind of like dig into it. And so, that's what we're going to do today. Real quick, everyone, if you haven't already, please remember to like and subscribe. It helps more than you know. There's also the Vibe Coding Retreat community where we're doing different types of AI challenges. With that, let's get back to it. All right. So in this prompt what we're going to do is we're going to take element uh we're going to take the Verscell AI SDK we're going to take the Verscell uh AI elements we're going to look at embeddings we're going to look at the chatbot we're also going to look at streamdown and then we're going to create a uh lower right hand corner bubble chat we're going to use the Verscell AI SDK look and then we're going to do some simple kind of tasks and put together a PRD for what we want this to look like. So in this application, we basically have our uh demo app and now we're trying to add a persistent uh chat chatbot style. So we'll also give it available on all screens. So, what's happening is it's bull pulling in all of the different uh information that it could pull, get the documentation, and we're actually planning this out. Now, I didn't use plan mode, which I actually really like, but we're going to actually create a PRD in our docs folder here, which has some of our definitions, our development, and our architecture. So, this way that we can actually build out this system uh and see what kind of planning it comes up with. One of the things I want to show is it's actually giving us different content context and as you can see like our percentage starts to go down right so we want to pay attention to this because the more context that we provide the uh the more initial value we get but as that starts to to degrade or rot then our accuracy and our performance goes down. So now we're getting our to-do tasks and we'll see uh that it's going to go ahead and author a PRD with requirements and UI behavior. Write out the architecture doc covering client server and streaming persistence. And then we'll go into actually creating an implementation guide to the uh install commands and code snippets. And then we're going to leverage all of that to actually build out our chatbot. So, as you can see, it already knows that we're going to put this under our docs file or folder. We're going to get our chat PRD, our chat architecture, and our chat implementation. And uh this is going to take a few minutes, so I'm just going to go ahead and pause. Okay. So, now it's put together our PRDS and our architecture. So, we're now at 30%. We might be able to get like some of the base done. Uh, but then we're going to probably want to start a new chat window so that we can actually get our optimal context. So, what we're going to do is we're I just want to check and see what this looks like. So if uh when I click the bubble, so it's talking about the user story. It's got the functional requirements for the UI being able to uh let's see if we can get the P. Yeah. So it's showing the interactions uh how it should typically stream. It came back with uh a simple embedding example, user stories, functional requirements, and uh it's talking about the different SDKs that it needs. So, perfect. Where it's going to install things, and even goes into telemetry. That's pretty interesting. uh and some references. So, at least we have our links of what we're actually pulling, so we can actually get those back in. Here's our architecture. We're going to be able to uh pull in our ch key pieces here. We're going to lazy load some information. This is going to be our root. And it even comes back with the code that is going to architect. And then let's look at our implementation details. Great. So this has our commands that we need in order to build all this out. You even included like sod uh in prompt input and code block. So this looks really good. We're going to go ahead and put this into practice now. So the benefit of this is now we have all these in case we get to our inner context. Say build out task listation commands skeleton. structure and let's see what we can get from that. So, I don't have anything yet on the screen, but I'm going to tell it to go ahead with the routes and also implement the uh UI code. So while this is going I want to point out an error that actually happened. So first it recognized that uh the these were not installed yet. So, it was starting to install them, but it recognized that the AI UI doesn't exist and was able to sort that it really needs this AI elements. And so, uh, now it's actually installing them. It's like one thing that you definitely want to pay attention to and that like hackers, uh, will make up fake packages when it sees that AI is hallucinating. So AI like notoriously hallucinates all the packages and that's why we're trying to give it the implementation details of exactly what it needs to put in. So right here we actually had a bug that does not exist. Okay. So now we have the conversation elements. Uh we have some UI components. So let's go see what we've got. So, we actually have our chatbot bubble here. Uh, looks like we have our clear state, our X state, and looks like we can probably start wiring this up to our uh back end. So, let's go ahead and do that where uh I'm just going to kind of code this up and we'll review it. All right, so we're getting some errors. I'm going to add some more context. We're doing okay right now. Uh, let's bring a window though. And let's see because I don't think it's Oh, disappointed. Um, but we need to fix these errors. And then we're also going to use our context 7 MCP context. All right. So, I had to do some uh checks with the route, but what we can see is that everything is starting to come into place. We have a storage key. We're basically storing our data locally and we can go ahead and give it a test. So what I'm going to do is I am going to click here. We'll go ahead to our inspect. I want to see uh both our application. So we have our our uh key can save here and then also we can watch our network here. So what we're going to do is we're just going to type in test. And we can see that we're going across. Looks like we're running a test. So we're actually calling out to the uh AI. And then let's look at our application. And uh there we go. We're storing and persisting locally. And when we refresh, we go ahead and clear. And so just like that, we were able to create a much cleaner and easier to use uh chatbot based on the different component elements here that have been released in the AI uh elements SDK. Get a better look at like some of the hook practices. attaching, search, different types of tool settings. These are almost like refills. You can see the actions components. So, we could even add things like thumbs up, thumbs down, share. Uh they don't include like modals after the fact, but they are uh the code blocks. We can see we can add different uh components like avatars, which we kind of did. And then you can see uh the styling for the conversation as well as loaders, messages, different types of prompting. So again, this new uh SDK along with like stream down is what I'll be using in the future as far as being able to build out different systems that allow you to move really quickly as well as understand uh a much like cleaner flow.

---

*Generated for LLM consumption from nerding.io video library*