Maximize Productivity with AI Agents

Hello, everybody. It is such an honor and privilege to be here at the tenth occasion of React Summit. It is so good to be here. For those who don't know me, my name is Tejas. That's pronounced like contagious. Don't worry, I'm not. I was actually tested. Where's Valentin? Valentin's over there. Hi, good to see you. I just met him as I was making my slides. If you have a free seat next to you, will you raise your hand real quick so people standing can come find? If you're standing in the back, sit next to these people.

I have been building on the web for over 20 years, as Scott mentioned, at places like Vercel and Spotify and Zeta and all over the place in various fashions. And in that time, I've got the honor of learning a lot of different things from a lot of great people. Today I work at DataStax where my role is to do developer relations for AI, generative AI. And DataStax recently, you may have seen something in the news. We were recently acquired by IBM so I guess I work at IBM now. But today we're here to talk about maximizing productivity with AI agents. Maximizing productivity with AI agents. To understand this in a little bit of detail, we need to, like, let's zoom in on the title.

What is productivity? Productivity is our ability to get stuff done, right? And if we consider productivity from first principles, it used, like, before technology, before the web, before Internet, before accordions, before carousels, before accessibility, before we make things that people can't click on, you used to call an agent, literally. Ahmed, how are you? We used to call an agent on the phone, a travel agent, a tour agent, a hotel agent. You'd call an agent, hi, I need to be in Amsterdam on this day at this time at that hotel. Can we do it? Agent says yes. Click. There's no ads. The experience is pleasant because you're just talking to an agent. That was peak productivity in a sense except the limiting factor was humans. We'll get to that. But let's park that today for productivity.

We use a lot of interfaces today. The web is probably the most used interface in the entire world. Buttons and divs and spans. React is the library for building user interfaces. But user interfaces are just a means to an end of UX, right? User interfaces facilitate UX. They give you an experience. A user interface gives you user experience. And so what we're going to do in our time together, we have like 15 minutes, we're going to look at, they should really reset that clock because I don't have 15, anyway, we're going to look at UX with AI and how we can have better UX as we move through life and be productive with AI agents.

Let me start with a little bit of a demo of the state of UX today with React because it's React Summit. So I have a search thing here. And this is the code behind it. And it's just a search form. And this is totally live. Check it out. Totally live. Right? And you can see it changes. Let's add search to. And you can see it updates. But this is the state. So if I click here, open the inspector, and we're waiting on some type of AI workload. It's quite common we see things like this. I'll search for five kinds of waffles. And it's going to like give me a response. The generative AI model is going to like... There we go. That took seven seconds. Seven seconds. And so that's UX and that's UI. And it's always up to the developer. We make decisions as developers that directly affect other people's lives.

Do you understand how big of a responsibility that is? It's a big one. Okay? And so I posted on social media this. I said no await res.json but instead for a wait const chunk of response. They who have ears, let them hear. If you don't have ears today to hear this, I'm going to show you what this means. Because a great UX win is just streaming. And so this is our code. It's just a form. When you submit the form, we fetch, we get a response, and we set the answer in the state. That means we just wait for seven seconds. We can fix this by streaming. We're going to come here, and instead of all of this, we're just going to stream. So we'll do stream true. And now, of course, we don't just get the answer like this. So we've got to set some headers and then for a wait chunk of response, that's what I said, we write each chunk to the response, and then we end the response stream. And we need to update our client side code to reflect this. So instead of just getting the JSON, we'll read the stream. The response is a stream. So we'll read that stream and incrementally update state. That's what we're going to do here.

So what we're going to do is res.body is a stream. We're going to get the reader, and we're going to get a text decoder to decode binary information into text. Then we're going to do this. Reader.read. So we're going to get a chunk. If we're done, we return early. If we're not done, we incrementally update state. However, what we need to do is wrap this in a function called read and recursively call it. Kind of like this. So we're calling read inside read because we keep getting chunks. And if we're done, we don't call read again. We return early. So this is how you process a stream.

I'm going to go restart my dev server. So let's go restart not that one. Let's go restart this, the dev server right here. There we go. And so now if I reload this, let's try that again. Five kinds of juice. And beautiful. So you can see that it takes three seconds, but we get that feed. The UX is better. Wow. But we don't work with text usually on the web. Things are JSON. We make a request to some API that gives us JSON. We get a response.

How do you reconcile streaming with JSON? Because you can't parse incremental JSON. Let's try it. Let's try it. So if we come here, let's get JSON. We'll include a system prompt. This is actually how you get JSON payloads, by the way, with AI workloads. So we'll do roll. Roll is system. And instead of being a helpful assistant, I'm going to say something like, you respond only with JSON. No backticks, no code. Just JSON. One object. No, actually, we'll do it like this. And use this schema. So schema. And we'll say name is a string. Cool. So I have this new system prompt. And one of the benefits of GPT-4, actually, is that it obeys the system prompt very well. Of course you need to do your own validations with Zod and so on, but let's try this now. Five kinds of waffles. Okay. Cool.

We get that. And indeed, it's respecting the schema, but you can't parse this until it's finished. Check it out. JSON.parse. Right? This is going to error. You still have to wait for the JSON array to be finished. We don't get the streaming. We'll use a format to remedy this called NDJSON, new line delimited JSON. It gives us one JSON object per line, and then we can stream it.

So let's go back to the server and say you respond only with NDJSON. We'll do, you know, one object per line. And then we'll go on the client side and we'll console.log each chunk we get. We'll come here and be like console.log, got chunk, and that's text. Right? Okay. Text. And so now, let's go restart our server again. We'll say five kinds of water. And now check it out. We get these weird chunks, but you can't, like, parse them. So what we've got to do on the server side is recognize when we have an object, and then flush it on the stream.

Does that make sense? Cumulatively build an object and then flush a finished object. How can we do that? There are many ways. For example, on the server, you can try JSON.parse and catch and fail until JSON.parse succeeds and then flush it. We won't do that. We'll do something slightly different where here instead of just writing this into the stream, we'll say let maybe object be an empty string, and then what we're going to do is we're going to incrementally update maybe object to be the chunk. And if it ends with a new line, because it's nd, new line delimited JSON, then we write it to the stream and reset it. Otherwise we just keep building this. Does it make sense?

We'll save this. We go back to our server. Restart. Okay. Five kinds of dessert. And what's going to happen now is, look at that. We get the perfect JSON chunks. Fantastic. Since we get perfect JSON chunks, we can parse it here on the client side. Instead of answer, we can say items, right? And here, since we're getting chunks now, we can do set items and JSON.parse text.name. And our div at the bottom doesn't even need to be a div. It can be an ordered list.

Beautiful. Now we're doing UI. Check this out. I could say five kinds of tour sites. I don't even know. We have a list. And we're getting it here. I'm just not parsing. I think it's just item, not item.name. Yeah. Okay. Well, something's wrong with my parsing, I think. Let's check. Five kinds of talks. Bad ones. There we go. So you can see, it gave me four, but you can see that we're now generating JSON.

And the cool thing about this is, you know what else is JSON? The DOM. Document what? Object model. The DOM is just... So you could, in theory, return DOM in a streamed way. And that's how you build really cool UI. For example, I created this thing called Movies++. If you go on... Here, let's quickly go to Netflix. Because I'm kind of bored of giving this talk. And if you go to Netflix and... What we'll do is I'll search for, like, movies with a strong female lead. And it's like, look, try different keywords. This is a UX decision somebody has made that says, hey, people think in keywords. People don't think in keywords. I think like this. Right? And so we created Movies++ to show you how you can send JSON, but, like, DOM. So I'm gonna start that now. I'm just gonna kill the server. I'm running it locally. You can also access it over the internet. So this is Movies++.

So this is Movies++. I'll paste the same query. And I'll hit enter. And what's gonna happen is... Let me try this again. So I hit enter. It's gonna search for movies with natural language. This is an AI feature. It's called semantic search. And it's gonna find movies with a strong female lead.

It's gonna get a nice big list. And it's gonna give me them. There we go. So the 355... And you may look at this and be like... This is a demo that's not streamed. Well, wait. That's part of the demo. So I can say what might this... Might this look like as UI? Right?

And now we're just gonna send JSON. But the JSON is like React elements. You know? Because we can't. And so React on the client side is gonna pick this up and be like... I know what to do. And this is fully interactive. It responds to my cursor and everything. In fact, here. Let's do this. Show me... Show me the trailer for Madam Web. You know? And it will just start playing in here. Right? And so... Thank you. Yeah. The... The UX is just incredible. In fact, here. We could do even better.

We could be like... Where can I watch this? You know? And because we have access to web APIs, you literally go to this cinema. Deflugged. This is literally where we are right now. You could say I forgot my password. Imagine this one. Instead of getting some text-based chat response, right? You could literally... And you just get a form right here. Enter your new password... Reset it. Right here. It is not like... Go click on this and do that. No.

So UX gets better. But I promise to you, AI agents, we need to talk about that. How can we maximize productivity? This is already maximizing productivity, but this is not agentic. Let's take a few minutes and look at agents. What are agents? An entity, like a travel agent, that can listen to you and take actions on your behalf or on behalf of itself. We're going to build an agent to help me navigate the web.

Here's the deal. The web... I don't know how you feel about the web. For me, it feels a bit chaotic. It feels like the Wild West, honestly. Like, I go to websites, and depending on what the development teams do, I'm going to have either a good time or a bad time. It depends on the developer. You never know. It's so bad that the European Union has to pass legislation to force us to make accessible things. Otherwise, we have huge fines. Just let that sink in. Right? And so this is the web today. Let's take a quick look. Check it out. It's a recipe website. But if I click on this, nothing happens.

I have to click, like, specifically here. And then if I click close to this checkbox, nothing happens. I have to, like, go and, like, okay. And so it can be hard to use. How can we do better? How can we maximize productivity with agents? What I'm about to show you is not a criticism. But, like... I swear to you, it's not a criticism. I have a hard time finding things in this skin. It's not their issue. It's my issue. It's the nature of the web. It's the nature of user interfaces being different. Not what I'm used to. And so sometimes command F is not enough here. And they put in effort. This is good effort. You can do short list and so on. I don't want this. It causes me cognitive... I'm not productive navigating big lists and clicking on carousels and accordions that... ChatGPT has 400 million users. Weekly. How many of you are using ChatGPT? Yeah. Everyone. What if instead of me leaving my house, aka my browser, to go to some foreign domain, I can just talk to my agent and be like... Hey! Help me. Right? Isn't that better UX? And so let's see how we can build that.

What I want is this website, but without the UI that doesn't work with me. So I'm gonna build an agent. I'm gonna use a tool called Langflow. Langflow is something we make. It's open source. We don't monetize it. There's nothing to gain here. Phil is laughing. It's true. And so Langflow is the best way to create AI agents visually. Without any code. And I can show you code, but I think you'd prefer this. So let's start with... We're making an agent. We'll call it React Summit Schedule Agent. And every agent needs... You need to talk to an agent, so you need an input. The agent needs to talk to you, so you need an output. And guess what? You also need an agent. This is an agent, everybody. And so what we're gonna do is wire things up. The input goes here. The output goes there.

I need an API key. You can use any, like, LLM, any AI model. We're gonna use OpenAI, because it's familiar. And now I need to give this agent a tool. Something to use on my behalf. What is it? It's the website. Let's go here. This is the schedule. And I'm gonna go back to Langflow, and I'm gonna give it a URL. And I'm gonna turn on tool mode. And I'm going to just adjust what it can do. So I'm gonna come here, and I'm gonna say use this tool to get info about the React Summit schedule at. Right? It's gonna do that. And just because these are large language models, they understand language, this agent is ready to go. So I can test it, actually. I can be like, hey, when is Evan Bacon's talk? Right? Yeah, sure. At React Summit. Thank you. And so it's now going to... Here. To find out when it's... Yeah, thanks. That's not what I... Check the tool. Yeah. Live debugging. When is Evan Bacon's talk at React Summit? Right? And so now, what we've got is... My goodness. Did I... I did connect it. Did I... Let me... What? Check the tool. What? All right. Hey, thank you. Woo! Woo! All right. All right. All right. All right. All right. All right. Thank you, thank you, thank you. All right. Here. So now, use the tool. There we go. It's using the tool. Evan Bacon's talk is... This time, I recommend it. Deploy everywhere with X4.

So the agent is doing this on my behalf. But the interesting thing is not everybody is going to use Langflow for this. Not everybody is going to be self-hosting Langflow. Again, we talked about ChatGPT, right? And this is where model context protocol comes in. MCP. Anyone heard of MCP? Yeah? So, ChatGPT is about to become an MCP client. There's other MCP clients. And MCP is just a client server architecture, where an MCP client like ChatGPT will wake up, talk to the server, hey, server, you have anything for me? Yeah, I've got these tools. Cool. And so, ChatGPT gets new capabilities with MCP. I'm gonna use an MCP server. I'm gonna expose this, actually, over MCP. So here's how I'm gonna do it. Publish. MCP server. And it's gonna give me a config. I'm just gonna adjust the description of this. And I'm gonna say, use this tool to learn about the React Summit schedule. And now I'm gonna copy this configuration and go to my favorite MCP client, this Cloud Desktop. It's interoperable. You could use ChatGPT if you want, when it supports MCP. But I'm gonna use Cloud Desktop. And I'm gonna come here, edit the developer configuration, and just paste in my MCP server configuration. Of course it wants to update VS Code. So, thank you, release notes. Fantastic. Cool. Save that. And I'm gonna restart Cloud Desktop. And, in a second, we're gonna have... Okay. When is Shruti's talk at React Summit, right? And so, now, imagine this is ChatGPT, right? I'm not in Langflow. I just have a server that I'm talking to. Let me check the schedule. Do I want to use this tool? Absolutely, I do. And so now, my MCP client, again, think ChatGPT, think whatever, cursor, is gonna talk to Langflow and be like, there you go. Shruti Kapoor's talk, How to Become a Staff Engineer, is scheduled for today. So it knows today at 12.45. Alright, I'm gonna wrap up.

One last thing. Because we talked about maximizing productivity with agents on your behalf. This is already helpful, because, like, it's your home. You're not leaving to go to the web. You're just talking to your agent. But we can do better. Let's make, quickly, five minutes or so, another tool. Okay? We're gonna make a really quick new flow. It's gonna be called Google Calendar Manager Agent. You see where I'm going with this? So same thing. Chat input. Chat output. Who's laughing at chat output? And we're gonna get the OpenAI API key. Just like this.

Chat input. Chat output. And now, I'm gonna get, believe it or not, there's literally, like, Google Calendar in here via Composio. And I'm gonna paste my API key right there. And now, it's gonna authenticate in a second. Turn on tool mode. And now, I choose, like, what can I do? So you can... Obviously, you don't want it to do everything. So I'm gonna say you can create an event. You can find free slots. You can get the current date and time, get my calendar. You can do all of these things. Cool. And finally, let's not forget to do this.

That's it. So now, let's publish this again as an MCP server. But I want to change the description and say, you know, use this tool to manage my Google Calendar. Right? And so now, that's kind of it. So let's go back to Cloud Desktop and open it up side by side. And then we'll open up my calendar. And anyone... Which talk are you thinking of catching after this? No? Okay. Let's see. I actually do want to catch Shruti's. So when is Shruti's talk at React Summit? Can you add it to my calendar? I'm talking to an agent to maximize productivity. And invite phil.nash at datastacks.com, my teammate. Honestly, I have no idea if this is gonna work. But I want to see my calendar update. I came all this way for that. So first, you're gonna find Shruti's talk. Fantastic. Let's do it. If this doesn't work, I'm gonna be so embarrassed. Can you imagine? Like I'm over time for this. Okay, great. So now I'll add it.

We don't know that. I'll add it. And now it's literally... Let's look at my calendar in today's column here. If it adds it. Which, I mean, that's literally peak productivity at that point.

I found the schedule... Oh, no! Wait. There's a feedback. That's really embarrassing. Okay. So let's... Did I not... Did I not... Okay. So I added the tool. I exposed... What's the problem? I don't have the ability to directly create calendar events. Of course you do. What are you talking about?

We will... I did. I did. Let's try that again. Actually, what error did you get? They're giving me a big red clock here. Okay. Cool. Let's just restart this. When in doubt, and we'll go to here. I do have the calendar tool. Okay. Add Shruti's talk at React Summit to my calendar. If this doesn't work, I'm gonna wrap up the talk anyway. And then we'll experiment after. It's part of live demos. So it's gonna get the... It's getting the schedule. Now I'll add this. This is the... Yeah, thank you. Thank you. Since you're in Amsterdam... Okay. Sure. And... Perfect. I found it. Okay. And... All right. The calendar agent has provided...

Anyway, it didn't... I'm out of time. I'm sorry. I'm sorry. I'm sorry. I'm sorry. I'm sorry. I'm out of time, unfortunately. But... You know? That's... Thank you, thank you, thank you. Thank you so much. I will wrap up. I do think it's still, regardless of what happened or not, it's still a pretty nice way to debug agents. Add truthies. Like, now I have the add this to my calendar. Anyway, let me send that off. I'm curious what's even gonna happen.

Okay. Let's go back to the presentation. Oh, I'm so into this. Come see me after. I'll leave it on a cliffhanger. So this is what DOM looks like. In summary, I think UX is changing. I don't think we need browsers, because it can already go browse the internet and give us information. If you're interested in Langflow and you want to play with agents, feel free to give that a scan. It's free and open source, of course.

Also, if you're interested in AI or React in general, I do host a podcast with very, very long episodes. Longer than 20 minutes. And so if you want, give that a scan. For now, I want to say so much thank you. Thank you for your patience. Thank you for your attention. Thank you. Amazing. Make sure... You can actually leave your laptop right there. And I got a party hat for you, and you can join me over here at the React logo. Ten years. Can we leave my laptop? I want to see if that worked. Yeah. Cool. While we talk, you know. Oh, yeah. It's the engineer's curse. Can I hold my laptop while we do the Q&A? Oh, yeah. Absolutely. Fantastic. As long as you stand right there.

Oh, my god. Sorry. It totally worked. I'm not even making this... I swear to god. I'm so sorry. No. This is all you. Is it? Can we have this? There we go. So look, look, look. This is my calendar. How to become... Okay. We got a couple of questions coming in here. That's awesome. I'm so satisfied right now. I'm actually really excited for you. It worked. Ah. That was a super impressive demo, by the way.

Okay. First question. Which agents do you like the most? Really? Who submitted this question? You mean, like, code agents? Like, windsurf, cursor? I mean, you could even say, like, functionality-wise. Like, what are you utilizing? That's a good question. I think, honestly, I'm using AI to browse the web. I actually believe... Look, the web, I meant everything I said, right? Like, there's ads, there's inaccessible... Carousels are so bad. Carousels are... Like, yeah. You can clap for that. But the Chrome team is working to make carousels a first class citizen, because people do it so badly that the browser vendors have to... Right? The web is hard. And so I just use it to browse... I use it to get schedule information. I use it to book flights. I use it to do stuff with dynamic UI. Yeah. Isn't it crazy how we all know that carousels are bad, yet they still show up on every website? Marketing. Yeah. Crazy.

Next one here. In the streaming example, how would you handle nested objects and to know when the chunk is ready? Good question. Yeah. Zod. Zod is great. Anyone using Zod? Yeah? Zod is the best... What I did was very cowboy. You don't want to do that... You want to use Zod.

Zod will validate schemas and nested schemas and things like that. You want to try catch on the server side and only then send over the wire something that is ready. You also want to have retries. If you retry like three times and you keep failing schema validation, you need to send over the wire like we can't process this. There needs to be more layers there, but Zod is the answer.

Given that you're clearly very involved in agents here, what agents have you built that you use? Oh, good question. Especially because you have a podcast. So I also have a podcast, and my podcast is run by agents, like plural. For example, when guests schedule episodes with us, they go on Cal.com. Cal.com supports webhooks. And so the moment something is scheduled, we immediately fire off an agent to go, like, who is this person? What should we talk about? How do we dive deep? Like, what are they into? The discovery agent will create a Google doc for a discussion outline, and then we just show up, we record. That's the only part where I'm actually involved. And then after that, post-production is all agentic as well. The other thing that I do manually is upload, because it's like 24 gigabyte videos, but yeah, it's mostly that.

Okay, in your stream example, are the components being built by the AI, or were they pre-built? Good question. You never want to do components built with an AI, because it's unpredictable. So it's pre-built. I mean, think about it. A React element, you write the element, right? And so what's happening there is the LLM is adding the props. So the props come from the language model for the movies with strong female leads. The prop is like movie title and poster URL. But the actual markup of the component, I wrote that. So the inputs or the props come from the LLM, but I wrote the JSON otherwise. Nice. This is a good one. The workflow editor engine, or what workflow editor engine is behind Langflow? The UI looks smooth. Thanks. It is very polished UI. React Flow. It's a big React app. Yeah. Yeah. It looks great. Okay. Here's another one. A very cool MCP demo. For Langflow, can you provide insight on debugging that error that you found? Does Langflow provide logs in terms of API calls and errors? Good question. Langflow is a server. So there are logs, of course. But you can also connect it to tools like Langsmith, Lang-asterisk. There's a lot of observability tools that you can connect to. Sentry. Where you can export those logs and then debug them as well, yes. How involved is your AI in your coding sessions? Is it primarily used for coding? No. I enjoy the act of writing code.

There's a lot of observability tools that you can connect to. Sentry. Where you can export those logs and then debug them as well, yes.

How involved is your AI in your coding sessions? Is it primarily used for coding? No. I enjoy the act of writing code. Like vibe coding to me has nothing to do with AI. I just enjoy the vibe of actually figuring it out. But sometimes I come across a case where I need to create some complicated regular expression email validation, right? Then I press command K and I'm like write this regex and it will do it. But I don't like giving away so much control.

In terms of pros and cons of Langflow, how does it compare to N8n, make, and et cetera? That's a good question. I think, honestly, Langflow was built from the ground up, from day one, to be an AI agent first application. N8n I've known for a long time. I think they're based in Berlin where I live. N8n has always been a workflow engine, but AI was sort of added on, bolted on, pun intended, later. And I think that's the key distinction, is Langflow has just better first class support for AI applications. Nice. Well, thank you so much. Scott, thank you as well. You're welcome. Thank you so much.