React Server Components in AI Applications

Good morning, React Day Berlin! Thank you so much for having me. I'm so excited to be here opening this conference in my city. So I live here and I've been speaking at this conference for so long. I was with the organizer backstage and he runs production and he showed me a photo from five years ago where we were together and he's like, look at the difference we've had over time. So it's such an honor and a privilege to be here with you today.

As mentioned, my name is Tejas, that's pronounced like contagious, and unfortunately I might actually be contagious, so I had a cold some few days ago and usually I say I'm not contagious, but honestly I don't know. I've been building on the web for over 20 years at various places like Mercel, Spotify, Zeta, and more, and I've been able to learn from some of the greatest minds. So anything you see today that is, you'd say, you know, good was learned by other people, okay? This is not a solo effort, definitely not. Today I'm an AI engineer at Datastacks, and the moment I say AI, I notice some of you go like, ah, and now they're AI.

And so here's the deal. We're going to talk about AI and specifically the intersection of AI and React server components, but like I mentioned AI, and the first thing I need to get out of the way before we go further is that honestly people are just tired of AI. Anyone tired of AI here? Anyone like, I'm tired of, yeah, like most of you. And this is fine. Like, I think there's a hype cycle that will show that this is the normal trend, and I'm here to give you not some hype, I'm not here to like channel Sundar Pichai from Google and be like AI, AI, AI, AI, you've seen the meme, AI, AI, AI, where he says like AI 121 times or something like this, which that's not a knock on him, I think they have some great AI innovations, but this is more than like investor promises, does that make sense? Like, I want to give us a reasonable and just a totally rational, balanced look at AI and what it actually means for us specifically as React engineers, okay?

To do that, let me just preface this point that people are tired of AI a little bit more. This is my friend Stephanie. She works at Igalia. They make browsers and they work on the JavaScript language specification. They literally make JavaScript. And she says that, she says, dear brands, companies, et cetera, I do not want or need AI injected into every single part of my life. Some of you feel this. At this rate, I'm more likely to use your product if you're not shoving AI down my throat. Okay, thanks, bye, right? There's research out of the University of Washington that proves, this came from a lab, it proves that if your product advertises AI a lot, people are less likely to sign up. That's where we are today. Okay?

So, so we are tired about it. And this is my thesis. Before we go further, I want to tell you that for us as React developers and engineers, AI really should be like salt. Like, like a little bit of salt. Like it's seasoning. We sprinkle it on features, we sprinkle it here and there, and we use it to enhance really great product experiences. And if we don't do that, just like with any salt, right, if we don't use salt appropriately, we might end up like killing someone. We might end up creating an unpleasant taste. So we've got to use it this way.

So at the beginning of this talk, I said I'm an AI engineer. And some of you went, oh my goodness, it's an AI engineer. What does that mean? I'm here to like, define this for you. Because a lot, I speak at a lot of conferences. This year, it's in the 30s. I've spoken at that many conferences. Out of 52 weeks in the year, that's like most of the year is spent speaking at things to people. Okay? And I ask people, hey, do you think you could identify as an AI engineer? Do you feel comfortable saying I could be, I maybe am, an AI engineer. If I ask you, any of you AI engineers or could be? Like one person. Confidence. I like it. We will fix this by defining what an AI engineer is. Because people, I ask them and they say, oh, I couldn't. No, I don't think so. Why? I don't know Python. I don't know machine learning. I didn't go to university. I'm not good at linear algebra.

I don't. The truth is you don't need any of that. Let's define this role and I will ask you again. This is the thesis, this is the document that defines what AI engineering is. This is latent space. It's a publication by my friend Sean Wang. Some of you know him as Swix. He defined the term AI engineer in this essay. And in it, this is how he defines it.

He says an AI engineer is here on the spectrum. You've got an API as a dividing line. And behind the API, you have machine learning research and engineering. These are the data scientists, the people who are training the models, who are making sure the models are performing well, the red teamers, everybody working on the models themselves. You've got a big API in the middle. Some of you have interacted with this API, the completions API from open AI or Anthropic. And behind the API, or rather, excuse me, in front of the API, you've got AI engineers, people who call an API that is in front of some model. And at the end, you have full stack engineers. AI engineering is really a piece of the stack of the full stack developer, just like React. A very crude way of saying this, and some of you may not like this, but it's just true, is that if you can make a fetch request in JavaScript to open AI's API and get an inference from GPT-3 or 4, then you can be an AI and you probably are an AI. That's what AI engineering is, making a fetch request to a model and getting a response and solving a problem with And you may think, Tejas, that's nonsense. You don't know what you're talking about. Look, this is by people smarter than me. Sean is extremely smart. He actually called the AI wave. But I want you to pay attention to the bottom of this. Look at this quote. It says, in numbers, there's probably going to be significantly more AI engineers than there are machine learning engineers or large language model engineers. One can be quite successful in this role. Pay attention. What does it say? Without ever training anything. That's a big deal. You don't have to know how to train a model. You just have to know how to talk to one, how to make a network request. And who's saying this? Anyone know this name? Andrej Karpathy is a co-founder of OpenAI. He built chat-GPT. He literally is the guy in machine learning, data science and AI engineering. He was formerly, I think, VP of self-driving at Tesla. The dude's been in machine learning and AI for a long time. So when someone like this defines AI engineering like that and continues to do so, it means something. So if I ask you again, could you be maybe an AI engineer, I expect there to be a different answer. Yeah, many of you. That's why I'm here today. I want to make this accessible to as many of you as possible because you are included in this space. There's much room at the table and I want you to be able to play this. But here's the thing.

We work with React. We are UI engineers. And I want to spend some of our time talking about this because the UI is so fundamental to AI that I would even say that without UI, AI is kind of useless. In fact, without UI, and we're defining UI as a user interface to something, anything is useless. Does that make sense? Do you like food? So if you like food and you see food, without a user interface to your food, a fork, a mouth, it's useless.

You're just like, look at it. Oh, I can't eat it. Like you need a user interface. So OpenAI released GPT-3, the machine learning model. A model is just a massive. It's like a 60 plus gigabyte file, right? They released this model and they said, hey, it can generate text. It can speak. It can do code. Nobody cared. They released the model. Nobody cared. They needed to get traction. They needed to get users. What did they do? What did they do? They built a UI with React. Literally, chat GPT is just a React app on top of a machine learning model. Without UI, there is no AI. I need to make that very clear. Without an interface, AI is not usable, because there's no user interface. Okay? So as UI engineers, our role, our responsibility is exceedingly important. So I want to spend the rest of our time talking about something called generative UI. I think we're all familiar with generative AI, right? It's when you use AI to generate text, code, whatever. Let's talk about generative UI. And I'm going to feature some work by some friends and colleagues who work on some really great things. And honestly, this talk is going to be mostly demos. So yeah, there we go. This is the last slide. And together, we're going to build a React app using server components with generative UI. I have ten minutes left. We'll probably do less Q&A time. Whatever. It's less work for him. The preface is, we need to understand server components, which there's a great talk by Aurora after this. But server components are components that execute on the server. And what is a React component? It's a function that returns virtual DOM. And React knows how to reconcile virtual DOM with real DOM. A server component is a function that runs on a server somewhere and returns you a big JSON object, virtual DOM. And React on the client is like, I know this, let's put it on the screen. Is that clear? So with server components and AI, we're going to call functions on the server that generate virtual DOM, send them to React. Let's make this practical. Someone said, oh, so your talk is not technical. It's going to be an emotional talk. And they said it in a bad way. So let's fix that. Which emotional talks are amazing, by the way. So what are we going to talk about? Let's go to Netflix. This is my Netflix. Welcome. I use computers like a human being. If we think about UX and UI. I don't think in movie titles.

I think in emotions. I think in what do I want to like, I don't know the exact name of movies. So this is how I search for movies. I'm like, look. Movies with a strong female lead. This is how I search. And look at this. I just I'm looking for a movie with a strong female lead. And I get we have literally no results. That's the answer. And what's the first suggestion? Try different. What is that? I don't want this. This is not good UX. We can fix this with AI, because AI can infer context. It's like, oh, you want movies with females? Okay. Interesting. I think I got. So with AI, you can fix this.

So to illustrate this with React server components, my team and I at DataStax, we built this. It's a side project that is movie search, but the way we want it. Using AI. And so I'm going to type in movies with a strong female lead and hit enter. And oh, nothing's going to happen. Because we didn't implement it. We're going to spend the remainder of our time like we're going to spend the remainder of our time building this together collaboratively. Okay? And I want to show you how accessible this is to everybody.

So I'm going to go split screen and just like straight up open VS code or actually cursor. Let's open this. And let's go this way. Let's close everything. And I'm going to make this a decent size. Okay? So this is actually the code. Welcome. We have this is next year. So we've got a layout which is like is the font size okay? Yeah. So we've got a layout which you can see which you can see is just the entire page or the root. And then we have the page component. Which is the page. So we have a logo. We have a search form. Look I comment out the search form. Search form goes away. Like this is live. I say like sup homie. And it's like super live okay? And inside the search form we have a form and suggestions. And suggestions are those things that just went away. And inside suggestions we have some hard coded suggestions. And inside suggestions you have a function called search.

And inside suggestions we have some hard coded suggestions. And inside suggestions you have a function called search. Which is use movie search. Which is supposed to like search for movies. So if I click on this we find that oh there's literally no function implementation here. That's why. Okay. Welcome to the project. So we're going to fix this. We're going to do AI search. And we're going to generate server component. It's incredible. And this is where I want to see the future of AI go. And we'll talk about this at the end.

So what are we going to do? We start with a context. We need to give our app an AI context. So I'm going to make a new component. A server component. I'm going to call it AI dot TSX. And I'm going to export const AI. Right? And we're going to call create AI. Just like that. And this is from AI slash RSC or React components. And to bootstrap this you just give it some actions. You can be an empty object. Initial AI state. An array. And initial whoa. Initial UI state. Which is AI is not helping here. Which is also an array. And these arrays are just messages. They're just like the machine said this. The user said this. Just an array of messages. Okay? So I'm going to save this. And I'm going to go to the layout. Actually I need to add use server. Because it's a server component. That's a case where AI is super wrong. Look at that. It's not clients. So we need to do this. And then we go to the layout. And we add AI. We wrap our entire app in this context. So now basically our app is like AI enabled. Okay? What does that mean? Literally nothing. Because we need to implement this function. So let's go back to use movie search.

And what we need to do here is perform an action. So let's go to our AI implementation. And add an action. So we'll add an action. Let's just call it continue conversation. We're going to continue a conversation. And it's an async function that sure this works. But we don't get a conversation. We get a message. And it's of type core message. For those of you who like TypeScript, this is just helpful. So now what are we going to do here? Well, we need to return a result. We need to return something. But what do we return? Well, we'll get a result from a function called a wait stream UI. Okay? And this is what's going to help us, like, generate React server components. What is the signature of this function? Well, you need a model. And this can be any language model you want. We're going to use GPT4 or Mini because it's fast and somewhat cheap. But you could choose. We need a history of messages where we'll just say messages is just that one message that we sent for now. Right? And we need to respond. Like, if the model gives us text, we need to do something with that text. So I'm going to do text right here. And I'm going to return. But what do I return? Well, this function gives us content delta done. I'm going to get back some text content and I'm just going to return it straight away. And then at the end of my continue conversation, I'm going to return display is result.value. And messages usually have a role. Like, did the machine say this? Did the user say it? So the role is assistant. That's it. This is my continue conversation. Okay?

So I'm going to go to use movie search. And I'm going to just call that function. So I'll say const continue conversation is use actions. Just like this. And I'm going to call it. So I'll come down here to my search function and say continue the conversation. The role is the user. The prompt comes from the user. Right? So that's, the prompt comes from like me saying movies with a strong female lead. And then I need to. So what I'm going to do is get back the result. So I'll say const result is this. And now I need to like set it in state somehow. So there's a hook for this. It's called set. It's called use UI state. So I'll get set conversation. And instead of use state, I'm just going to use UI state. Because it's the UI.

And we don't need this. Okay. So now I get this result, and I'm just going to set conversation, not to the result, but I'm going to accumulate. Right? So I have this previous conversation. Let's just say it's any for now. And I'm going to do this. I'm just going to spread the previous conversation and the result from the LLM. It's clear so far? Right? Good.

So now let's finish this loop by going to my page. And instead of getting the result as an empty array to initialize, I will get it from use UI state. And I'll import that. Okay. We are good here. Everything is implemented. Let's go test. So now if I go here, movies, I'm just going to click this. It's going to be easier. Movies with a strong female lead. Okay. I get something. I don't know if you can see that. But it's just a bunch of nonsense text that I don't really like. And it's, wow, it's very long. But the cool thing is, we're kind of starting to see some results. Check it out. Like Wonder Woman. I'd say she's strong and she's a female lead. So great. Mad Max Furiosa. Amazing. So it's working. But it just kind of sucks as output. How can we fix this? And this is where, listen, there's a lot of UI to AI that looks like this today. There's a lot of chatbots that give you nonsense. And that then you have people saying, no, no. I want to talk to a human because the chatbots just suck. Chatbots are probably the worst UX you can imagine. We hate chatbots. As UI engineers, we have a responsibility to do better. So we're going to do better than chatbots. Okay. So how can we improve this a little bit? Well, let's go back to, now that everything's working, let's go back to our AI and have some fun with this. We can add a system prompt. Right? So there's just one message before the... And the system prompt gives identity to the AI. It's like, you are helpful assistant, you are not. You speak extremely, I don't know about that, extremely tur... Concisely, concisely, and only respond with lists. Maximum four items. I don't know what's happening.

Okay. Let's try that again. So let's go back. Movies with a strong female lead. Perfect. Beautiful. This is exactly what I wanted. No noise. This kind of works.

So now we've done some prompt engineering and it works, but the UI still kind of sucks. Right? What we're about to do is create an AI agent. Some of you may have heard the word agent. You're like, what is that? I'm a human being, in case you haven't noticed. And I am an agent. All human beings are agents. What does that mean? It means we have agency. What is agency? It's the ability to choose, to make choices. And so if I, out of my own agency, I'm speaking to you today. Does that make sense? I'm exercising agency. So this is modeled with language models. They have the ability to choose functions. You give them functions and they call them when they feel like it. With agency. Literally. So that's what an agent is. You give them a bunch of functions and they exercise agency to call the function. What is a react component? A server component. A function. Whoa. So they can call a function that returns virtual dump.

We're about to create an agent that gives us a server component. Hi. Let's do that. So how we do that is we pass tools. Tools are nothing more than functions. So we'll pass a tool called get rich movies. And we're going to do rich UI, not text. Yuck. So what is this? It gets some metadata. Parameters are input arguments to your function. In React, what are input arguments to your function? Props. Zero points. Props. So parameters are props. And Zod. This uses a schema specified by Zod. Zod is a way to describe schemas. We get an object. Instead of movies, I'm going to do list of movie names. Keep in mind this is a language model, so it can infer context.

It's an array of strings of length four. And I can describe this. The language model understands what it is. And so this is all useful. The description is what gives the language model agency. So the language model will understand based on the description when to use the tool. Is this clear? Because, again, it's language.

So we'll say when a user asks for UI, call or use this tool. Right? And then generate is a function that is actually like a generator function. So you put a star there to be a generator. And notice how movie is red. It's because I changed the prop. And this is type safe. So we're using Zod. And so now we remove the arrow. And we have movie. But here's the deal. It's a function that returns anything. If it can return anything, what can it return? Virtual DOM. So let's have some fun with this.

We'll return list of movie names.map. Whoa. We can do that movie. And then we can just return like Li. And we can do like a nice list.

So we're just like this is by the way, if anyone is wondering, this is a React server component because it's a function that returns virtual DOM. And virtual DOM is this. So now let's go back and ask the same thing again. Movies with a strong female lead. And what are we going to get? There we go. Beautiful Li list. Wow.

But the cool thing is since this is a component, we get really we get like hot reload and stuff. So I will check this out. Class name. Where did it go? Class name. BG red. Anyone use tailwind? BG red 500. Save. And now we will ask again. Like generate it for me. That's not supposed to happen. It's totally fine. Oh, no. Actually that was supposed to happen. I'll show you. Look at this. Beautiful. Sometimes it loses context.

Here's an example. What's the first movie? Watch this. And it's like what is all this? Birth of a nation? It doesn't remember because we didn't code it. Let's quickly give it memory by using history. So we can say const history is get mutable AI state. And between the system prompt and the message we literally just do history.get and we merge this in. And when you return text, when the generation is done, we call history.done. And this is all we need for memory. So let's go back. Now this should work. So let's do this again. What's the first movie is, okay, well, I guess it just did that in this case. We would refine this a lot if we wanted to control the UI.

Finally, I think we can do a lot better here. Let's say, you know, use this tool only when a user asks. We'll do something like this. Let's do movies about romance. I don't know. Silence your phone. So that's a list. And what might this look like as UI? And we'll enter.

We get the tailwind and we can maybe mess with this a little bit. And we'll get different generation. But what if we can do even better? So what we're going to do is we're going to get a list of movies, as you can see. This is our prop to our component. And I'm going to go absolutely bananas and do this.

So we call an API to get the poster from a movie instead of titles. We'll call this list of movie names, right? And yeah, yeah, yeah. And so I'm going to call this API, get a poster, and we found the movie. And then we're going to return, either if we can't find the movie, a placeholder JPEG, otherwise an actual JPEG. So we're going to get a picture. And the picture is stored in this variable movies. It's an array of pictures, right? And so what I can do from here is I can return a component that I wrote previously. Any component can return another component, right? And so I can do something like this. And if I save and I go like, let's do show movies about Berlin, right? It's going to give me that look at that. Like, this has gotten so much better. You know? Wow. You see that? And the crazy part is like it's interactive. Like, and you can see it's Berlin calling. And I click on it, and it takes me, whoa. And it's like, and the other thing is, what is movies? Now, the big question on everyone's mind, was that movies component generated by AI? It was not. It was not. The movies component was generated by me. And this is great, because AI is unpredictable. It could generate some random component that shows NSFW stuff. Sorry, sorry. You know, you don't want to trust AI with your UI, okay? You want to control your UI. What you want AI to generate is the props, like the movie list, right? And so what is this movies component? Let's take a look at it. So if we go full screen, it's just a React component. We get a list of movies. So this title is generated by AI, but this other stuff I get from an API, it's just a list of movies. And this is my component. It's a div with some iteration. And I did include a key this time, you know? So if I go back, check this out. I could, like, on this div, be like on click. You know? Instead of console log, let's alert. And I'll alert with, like, sup, Berlin. And I'll save. And if I click somewhere in this white space, the div, like, it should, yeah, look at that. It's fully interactive. I could do whatever I want. I could do, like, window.open and just open some random windows. So, like, HTTPS, I don't know, YouTube.com slash. Let's see what AI auto completes here. Oh, perfect. Can you guess? And so I'm going to click this. Wait, wait, watch. And it's going to open that window, too. It's crazy. So I love that that's the most common. So but we're doing so much.

But here's the deal. This is nice. But it's still chat, because I have to chat. I want you to imagine a world where the prompt is not submitted by a user, but by a developer. Are you tracking with this? Like, what if we could go on, if we have generative UI, like, for example, you go on, like, Amazon.de, right? And, like, this entire section. Oh, that's my book. Crazy. This entire section. This entire section was generated by AI, because some developer called the API with a prompt. Does it make sense? This portion, generative UI, right?

I think I built a demo. I don't know if it still works. Yeah, this one. I actually didn't. This is not part of my rehearsal of the talk. But I built this demo that does that. It's an e-commerce store, but everything is personalized to the user generated by AI. And I guess it doesn't work. So we won't go there. Oh, it totally works. Awesome. So this e-commerce store, all the product recommendations are totally generated by you. And I could do something. I could search for, like, green winter jacket, right? And the search results, if they come up, would be, like, look, it's all green winter jackets. It's so cool. And I wrote zero of this. I just defined the components, and then AI is generating the props and the network requests. And some of them are still for sale. Like, if I click on this, it might, yeah, look at that. It's wild. So anyway, this is where the future is. And I hope I've made that very clear to you, and I hope I've made it clear how to do that. Because we have a responsibility with UX.

Finally, I want to wrap up with this, right? What if it's a support chat bot, and you want to be, like, you want to help your user. If someone says, like, hey, I forgot my password, right? You want to make it so that instead of, like, giving them text that describes go click here, reset, you just give them the reset password form. Because you can do that. Let's, so, like, generate a reset password form tool. Right? And I want, yeah, look at, my goodness. Okay. Save. When is it called? Display a password reset form when a user asks to reset their password. Right? Save. And now I'll be, like, I forgot my password. I don't know if this has live reload, but yeah, okay. That's the usual. But let's do this. Can I reset my password? Oh, well, okay. What? Let's say, use this tool maybe. This is prompt engineering, and we maybe don't have to go down this path. Send an email? Oh, yeah. Oh, Tejas at don't email me.com.

Oh, my gosh, look at that. Incredible. You see, this is what we can, this is what we can do. And this is what we should do. So, anyway, that's React server components and the intersection between AI and UI. I hope based on the work that we've done and how we've defined AI engineers that you feel comfortable AI calling yourself one.

And I'd like to just take this moment to wrap up. In summary, we're tired of AI. We don't really like it. There's a lot of hype and a lot of undelivered promises. Anyone remember the humane pin, the rabbit R1? Apple intelligence? There's a lot of scams and things are just not, but it's not, we are UI engineers. We get to control it. We get to write the component. We get to build the systems. Do you feel empowered? Do you feel that? That's why we're here. And I want to make sure that you know that this is accessible to you.

Now, about server components and all the React stuff, I cover this in a lot more detail in my book. You're welcome to go get it. Honestly, don't, like if you don't, and I'm not here to sell to you, but we do go into more detail. So, if you want that, that's there. I also have a lot of them for free to give away. So, if you want one, just come and be like, hey, can I get a book? It's not weird. It's just access to information. I also go into way more detail on my podcast. You're welcome to go join that. We have very long, oh, jeez. Let me, let me just, we have very, very long episodes and people literally feel the need to tell me like, hey, it's too long. I'm like, sorry. You're welcome to join that as well. But honestly, hey, look, I've been coming to this conference for five years and it's been an absolute honor to give the keynote so regularly. And I just want to thank you so much for your time and your attention and for coming out today. Thank you. Thank you. Thank you.

So, we do have a couple of questions here. I think most of the questions are actually about the demo. I think the demo was the most engaging part of, you know, the talk as it often is. And so, let's just see. What are the, what are the top questions here?

I think like one question, which is about like this sort of, sort of unpredictability of, of, of these responses is that like, isn't it bad for UX that every time users retry searching that they might get a different result? They don't. That's the whole point, right? Because like that component, the movies component was one that I wrote. So I get to define exactly how it looks. And so, they, it's important. So, the only different result they could get is one, they either get text, which is the same answer anyway, which is already helping them because it's giving them the list of movies or they get a clickable interactive UI. So either way, they're getting the right thing. And if I've done, look, man, this is like a 20 minute talk and I already made it like pretty deterministic. If we spend, I'd say like maybe another 20 minutes, we can dial in that description of the tool where it gets called 100% of the time. And in terms of, you know, the actual result data being different, do you do you find that that's a sort of like a hindrance to UX if, if you, you know, you kind of go and you, you expect a certain result and then you get like a slightly different one every time or?

You don't though. The movie is about Berlin. I ran that query a few times. It was always the same movie. Oh, interesting. And so, I know you won't get different results, but also, that this can be mitigated. There's a, there's a technique called rag, which I'm sure you're familiar with where you retrieve real time authoritative context and you insert it into your prompt before the actual request. So you get like, this is the truth. This is the answer. Now say it in your response and then the LLM will say it. This doesn't change the model, right? The model stays the same, but you just change the output with some extra con. So you can do that and bring some level of security. So the TLDR, there's things you can do. Nice. Alright. Well, we only have time for one more question. So we'll have to go via, you know, the most upvoted one, you know, the people have spoken. And it's a kind of a detailed question is like, what's the licenses of this, this AI SDK? Oh, it's MIT. It's open source. It's MIT. It's. Is it the Vercel AI thing? Yeah. So, so my colleague, colleague, friend Dominic at Vercel creates, sorry, not Dominic, excuse me, Ian. Ian creates this and yeah, it's totally free. You can just use it. Nice. Alright. Well, that was the, all the time we had left for the, for the onstage questionnaire, but I mean, we do have the speaker Q&A room. So you'll find Tejas there on the, on the next break, I believe. Are you going there right now? I have no idea, bro. I don't know. I probably should have prepared for this. Me too. Yes. But somebody will grab you and take you to the speaker Q&A room. You can find Tejas over there. And then, you know, like, like he said, you can just grab him and ask for a book or ask for a high five or a hug. And I'm sure that he'll be happy to, happy to, to give you one. All right. Let's give it up for Tejas Kumar. Thank you. Thank you. Thank you.