♪ Hey, I'm Tejas Kumar, and I've been building on the web for over 20 years at places like Ressel, Spotify, Zeta, and more. Today, I'm a developer relations engineer for generative AI at DataStax, but I'm not here to talk about any of that. Today, I want to talk to you specifically about React server components with AI.
And look, I don't want to take too much time, so let's just get straight into the demo. Here's what we have. So I love Netflix. I use Netflix a lot, but oftentimes, when I search for things, I search in natural language, like movies with a strong female lead, something like this, you know? And usually, it doesn't match. And that's a real problem with the Internet today, is like, we think in natural language, but if I want to watch just a movie with superheroes, I can't type this without getting just a non-answer.
This is changing with AI and React server components, and the way it's changing is through vector embeddings. Now, we need to spend a little bit of time talking about them because they're really powerful. Vector embeddings are generated by very specialized machine-learning models that take in natural language and output a big list of numbers. How they can do this is because these numbers are comparable in space. What does that mean? If we think about a vector, a three-dimensional vector, that's just space, right? There's horizontal, vertical, and depth. That's 3D space, three-dimensional space, which is represented by a three-dimensional vector. Now, if I say words like dog and cat and pet are all over here, and words like airplane and aluminum are sort of over here, and words like React and Angular and Solid are all over here, you see, it's moving around space, and we're putting things in different places.
That's what an embeddings model does. It literally just embeds vector representations of natural language in space. When you have those, you can then compare the space given by the vector of a user's query to the space of a thing, like a movie name, and find things that are closer. Literally, this is how vector search works. And this is a huge part of generative AI. So together, what we're going to do is build a better search experience using React Server Components. The way we're going to do that is by querying this database. You need to have your vectors live somewhere. At Datastacks, we make a vector database called Astra, and we loaded a bunch of movies here into this database. And you can see their vector representations if you look at this field here. So I'm just going to copy that, and I'm going to paste it. This is the vector representation for one of the movies. It's kind of nuts. It's just like this huge array of just coordinates, right? And so we're going to query this and build some things. What we're going to build is a movie app called Movies++.
Comments