Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!

Hi, everyone. I am so excited to be here today. Thank you so much for having me. I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes.

I think it's pretty amazing. We're going to learn a few things today. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit.

So talk a little bit about v0.dev first and just showing you how amazing it is. If I want to build something like a chat GPT app because everybody wants a chat bot, I can say build me a chat GPT clone that talks like Kanye with rainbows and unicorns. And you'll see that it is thinking for me and it's generating something amazing, hopefully. It's talking, it's telling me that it's going to create a chat GPT-like interface. And then here you can see the code being generated. You see this v1 over here. So there is a versioning available, which is pretty awesome.

And then soon after it's generating everything, it's going to actually give me a preview. So I can't wait to see what is generated. You can see over here, there's Kanye responses, and then here's the preview. And this is also amazing. v0 will tell me exactly how to use the app and interface with it. So I can say like, tell me how to be famous and send it. Oh, my mind is like a rainbow after the storm, full of billion dollar ideas. Amazing. You can also edit directly in line. You can say, instead of saying, yo, I'm Kanye AI, I'm a Taylor Swift lover AI. You can go ahead and see over here. Let me go back to, whoa, I'm in the wrong place. v0. Okay. Where did it go? Oh, here it is. Okay, so yeah, sorry.

I just click on this. I always lose that sometimes. But you can say Kanye AI, and then you can actually go over here and again, say, I'm a Taylor Swift lover AI. And then you can click on the preview and you can see it change in line right there. So what's amazing is you can actually just really easy add this here codebase through MPX. And then you can also share it, which is also amazing. If you want to change something, make it more blue. You can see that it's thinking and it's going to again, change things and you can see that it's actually it will generate a v2 version for you. Oh, it's v1. Well, since this is a lightning talk, I'm not going to go through that. But you get the point that you're going to be able to do versioning and be able to share your code. So I would highly recommend again, using v0 for things like scaffolding.

My name is Tracy, you can follow me on Twitter at this dot or on LinkedIn at Tracy S. Lee. I'm on the RxJS core team, a Google Developer Expert for Angular, Microsoft MVP. And then also, I have a consultancy that I started about eight years ago with some friends. And we are a team of about 50 developers 100% remote and worldwide and we are hiring so you can always message me or email jobs at this dot dot co for more information.

I want to talk about rag rag is definitely a hot topic these days. It is called Retrieval Augmented Generation. And basically, you know, everybody's creating these chatbots. But if you want to really actually create something that has a little bit more understanding of what whatever your your use case is, if you if you will. So whether it's you're an electrician, and you need a little bit more information there, or, you know, in my case, I created a React server components chatbot. So the React server components chatbot needs to know a little bit more about React server components. That is a little bit more up to date than just regular chappy chippy chippy in the models, right. So that is what people use rag for, right. And so, Carter Robast is amazing. He's over at Data Stacks. And they he explained this to me once and I really stuck in my head. So when you talk about rag, the generation part is basically Gen AI you're using chappy in your app, that's the rag, the G part of rag.

Augmentation is actually telling AI what it is. And the retrieval part is actually using the vector database and retrieving the relevant data for you. So what I went ahead and did is, so for the retrieval part, right, you need to be able to basically add all your information into a vector database. So the way you do that is just great. You can you can actually use a lot of tools out there. unstructured.io is really amazing, for example, to really quickly and simply add things into a vector database. But what I did was I took all the information, the updated information for React server components, things that were a little bit more up to date than you know, maybe what chat QBD has and said, hey, you know what these blog posts are really relevant. So I want to go ahead and dump these into a vector database for myself. So I don't have time to, again, share the code, but that's okay. So after you run that script, what it does is it scrapes all those different blog posts. And then it goes ahead and adds it and dumps it into a vector database, which we're using data stacks, AstroDB. So you can see all these different little vectors right here. And I'm going to be able to query my database based off of that.

So that is rag, right? That's amazing. So we talked about the generation part. You know, versatile AISDK is also really amazing. Basically, all you have to do is import versatile AISDK. And then you'll be able to switch out different models that you want very, very easily. So it's a really amazing abstraction that you should definitely check out in your free time.

We also talked about the augmentation part. So the augmentation part is really cool, because again, you're just telling Chad WPT what you want it to be, right? So for me, I basically told Chad WPT that I wanted it to talk like a valley girl. So you can actually go to this rscgpt.versal.app and test this out. Hey, like what's up? Do you want to chat about React stuff or what? And it's going to talk to me about why RSC are so amazing. And it's going to go ahead and respond back to me, which is awesome. And again, my prompt was, let me talk like a Valley Girl. So you can see over here, OMG. React server components are totally amazeballs, you know, and you can do different things like again, change it out really easily. It's just, you know, a simple prompt in your code saying, hey, I'm a React server components expert and I talk like a Valley Girl. So talk like a cowboy, tell me that joke anytime, there's so many different fun ways you can make your life a little bit more interesting by doing this. So that's the augmentation part. And we saw how easy again, the retrieval was. It really is kind of like magic hand waving. So that is the URL to check out if you want to check that out.

There's also something called fine tuning as well. And fine tuning is a little bit different. So there's a few different use cases for it. For fine tuning, you really want to use it if you're training a model, maybe doing task-specific optimization, for example. It's higher accuracy as well. And it's a little bit more resource intensive too. So there's different reasons again to use rag or fine tuning. Rag is great for chatbots, which is what we use it a lot for. This is kind of like the canonical example that's out on the internet right now. Text support, personalized learning, right? Search engines, news aggregators. But fine tuning, maybe you're doing things like medical diagnosis or financial forecasting or sentiment analysis, those are kind of some reasons to use fine tuning.

But I will show you that basically what you're doing is you're actually augmenting a model. So what you do is what we did was we basically took this ReactConf blog post right here and converted it into I think it's called JSON L, Jsonl, Jsonl. You basically take this and you can say like, hey, turn this entire blog post into questions and answers. And so that's what we did. And in the beginning, we said, hey, we want every single response to be, as a React JS expert, I do this. And at the very end, we put to infinity and beyond bots. So you'll be able to see now with the RSC GPT fine tuning app, you can see a very different response, right? So this is using Rag, this is using fine tuning, which again, we're augmenting the model. So tell me about RSC. And it will go ahead and respond. And it will respond a little bit more precisely, because I told it again, specifically how I wanted it to respond since yes, and you can see as an RSC and Next.js expert, I know RSC are a new technology to infinity and beyond bots. So when was it? What are the best features? Best features. Yeah, and hopefully it can, do you think that chat GPT will know how to respond to my typos? Yes. So automatic static optimization and you can see again here with fine tuning, I was very specific that I wanted to respond exactly like this and end with this. So yeah, play around with it. Again, all this technology is so easy to use and play around with these days. There's also something called entity resolution, which I think is important to kind of understand. Entity resolution matters if you're kind of trying to resolve entities across multiple points of data, right? Like a great example is, hey, you own an online store and with that online store, somebody might be purchasing via Facebook or Instagram or your Amazon store or Etsy and being able to take all those different people and maybe different names, like I might use T. Lee or Tracy Lee or different email addresses and to say, hey, this is the same person. It's really great use case for us, things like personalized marketing, healthcare and patient management. Hopefully this stuff really starts to change the healthcare that we have, financial services and fraud detection is a really, really great use case for using things like entity resolution.