Skip to content

Maximize Your Productivity with AI Agents

React Summit 2025 / 31:18

Watch this talk on YouTube

Transcript

31 paragraphs

This is an automatic transcript of the recording above. It is published in full and unedited, apart from correcting names the recogniser reliably mishears. It will contain mistakes.

00:06Hello everybody. It is such an honor and privilege to be here at the 10th occasion of React Summit. It is so good to be here. Uh for those who don't know me, my name is Tis. Uh that's pronounced like contagious. Uh don't worry, I'm not. I was actually tested. Uh where's Valentine? Valentine's over there. Hi, good to see you. I just met him as I was making my slides. Um, if you have a free seat next to you, will you raise your hand real quick so people standing can come find. Okay, if you're standing in the back, sit next to these people. Um, I have been building on the web for over 20 years, as Scott mentioned, at places like Vercel and Spotify and Zeta and like all over the place, uh, 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.

00:48Today, I work at data stacks where my role is to do developer relations for AI, generative AI. uh and data stacks. Recently, you may have seen something in the news. Uh 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 accordians, before carousels, before accessibility, before we make things that people can't click on. Um, 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?

01:49Agent says yes. Click. There's no ads. The experience is pleasant cuz 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 um they should really reset that clock cuz I don't have 50.

02:34Anyway, um 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 uh with React because it's Reacts Summit. So we have a little search thing here and this is the this is the code behind it. And you know it's just a search form as and this is totally live. Check it out. Totally live, right? Um and you can see it it changes. Let's add search too. 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. Um, and it's going to like give me a response. The generative AI model is going to like, you know, we're going to wait. There we go. That took 7 seconds.

03:267 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 affects 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 um I said no awaitres.json but instead for await con chunk of response. They who have ears let them hear. If if you don't have ears today to hear this I'm going to show you what this means. Um because a great UX win is just streaming, right? 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 into state. Uh that means we just wait for 7 seconds. We can fix this by streaming. So we're going to come here and instead of all of this, we're just going to stream. So we'll do stream.

04:19And now of course we don't just get the answer like this. So we've got to set some headers and then for await chunk of response. That's what I said. Uh we write each chunk to the response and then we end the response stream. Okay. 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. That's not what it was fun because I used to love coming to planetarians as a kid and now I get to stand in one and present. So yeah, great venue for a conference. So, one of the things I like the most about this conference is it's after a talk, there's a discussion room where you can just go talk with people about the thing.

05:10>> In my 15 to 20 years of speaking, this is the nicest venue of any conference I have been to. So what we're going to do is um 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 don't do 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 you process a stream.

06:05I'm going to go restart my dev server. So let's go restart. Not that one. Let's go restart the 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 3 seconds, but we get that feed. The UX is better. Wow. But we don't work with text usually on the web. Yeah, 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, right? Let's try it. Let's try it. So if we if we come here, let's get JSON. So we'll we'll include a system prompt. This is actually how you get JSON payloads, by the way, with AI workloads. So we'll do RO. Ro is system. And instead of being a helpful assistant, I'm going to say something like um you respond only with JSON. Um no back ticks, 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.

07:17Okay, cool. So I have this new system prompt and one of the benefits of GPT4 actually is that it 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. Um 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? You can't this is going to error you. You still have to wait for the JSON array to be finished. You 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.

08:04Uh we'll do you know uh one object per line and then we'll go on the client side and we'll console.log log each chunk we get. So we'll just 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 a an object like 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's many ways. For example, on the server you can try JSON.parse and catch and fail until JSON.parse succeeds and then flush it.

08:57We 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 other and and reset it otherwise we just keep building this does this make sense so we're building an object on the server and we send it over when it's ready 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 We get the perfect JSON chunks. Fantastic. Since we get perfect JSON chunks, we can actually just parse it here on the client side. So instead of answer, we can say items, right? And here, since we're getting chunks now, we could do set items and JSON.parse text.name.

09:53And our div at the bottom doesn't even need to be a div. It can be a ul, right? It can be an ordered list. Beautiful, right? And so now we're actually doing like UI. Check this out. I could say five kinds of uh tour sites. I don't even know. And we have a list and and it's we're getting it here. I'm just not parsing the I think it's just item, not item.name. Um 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 you can see that uh 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 like return DOM in a streamed way and that's how you build really cool UI for example I created this thing called movies plus+ right if you go on here let's quickly go to Netflix uh cuz I'm kind of bored of giving this talk and if if you go to Netflix and you I'm just going to what we'll do is I'll search for like movies with a strong female lead. Okay. And it's like look uh 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 plus to show you how you can send JSON but like DOM. So I'm going to start that now. Uh I'm just going to kill the server. I'm running it

11:27locally. You can also access it over the internet. But this is movies plus+ where um you can I'll paste the same query and I'll hit enter. And what's going to happen is let me let me try this again. So I hit enter. It's going to search for movies uh with natural language. This is an AI feature. It's called semantic search. And it's going to find movies with a strong female lead. It's going to get a nice big list and it's going to give me them. There we go. So the 355 m and you may look at this and you'll be like okay but 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 going to send JSON but the JSON is like React elements you know because we can. And so React on the client side is going to pick this up and be like I know what to do and this is fully interactive like it responds to my cursor and everything. In fact, here let's do this. Show me Show me the trailer for Madame Web. Uh, you know, and like it will just start like playing like in here, right? And so the Thank you. Yeah, the the UX the UX is just incredible. In fact, here we could do even better. We could be like, "Where can I watch this?" You know? Uh, and because we have access to web APIs, you literally like go to this cinema. deflooked. Like this is literally where we are right now. Uh you could say I forgot my password. Imagine

12:58this one. Instead of getting like some textbased chat response, right? You could literally and you just get a form right here. Enter your new password. Reset it right here. It is no like go click on this and do that and no. So UX gets better. But I I promised you AI agents. We need 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? I talked about this in the beginning. Yeah. 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. Cuz 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, um, this this is the web today.

14:01Let's take a quick look. This is check it out. It's, um, it's a recipe website, but if I click on this, nothing happens. I have to click like specifically here. Um, 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? I'm going to this what I'm about to show you is not a criticism, but like I swear to you, it's not a I have a hard time finding things in this schedule. 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've put in effort, right? This is good effort. Like you can do short list and so on. I don't want this. You know, it causes me cognit like I I'm not productive navigating big lists and clicking on carousels and accordians that Chad GPT has 400 million users weekly. We How many are you using? How many of you are using Chad GBT? Yeah, everyone. Every 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.

15:17Right? Isn't that better UX? And so let's let's see how we can build that. So what I want is this website but without the UI that I don't that doesn't work with me. So I'm going to build an agent. I'm going to use a tool called Langflow. Langflow is something we make. It's open source. It's we don't monetize it, right? There's nothing to to gain here. Phil is laughing. Um it's true. And so this is lang lang flow is the best way to create AI agents visually without any code. And you know I can show you code but I think you'd prefer this. So let's start with this. We're making an agent. We'll call it react summit schedule agent. Uh 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. Uh this is an agent everybody. And so what we're going to do is just 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 going to use OpenAI just cuz it's familiar.

16:19And now I need this. I need to give this agent a tool, something to use on my behalf. What is it? It's the website. So here, let's go here. This is the schedule. And I'm going to go back to Langlow. And I'm going to give it a URL, right? And I'm going to turn on tool mode. And I'm going to just adjust what it can do. So I'm going to come here and I'm going to say use this tool to get info about the React Summit schedule at right. It's going to 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 could be like, "Hey, when is Evans Evan Bacon's talk?" Right. Um, yeah, sure. At ReactSummit. Thank you. Um, and so it's now going to Here it's get to find out when it's you can. Yeah, thanks. That's not what I So, I didn't connect the tool.

17:14>> Yeah. >> Live debugging. When is Evan Bacon's talk at React Summit, right? And so now what we've got is my goodness. Um, did did I I did connect it. Did I Let me Wait, wait, wait. What? >> Check the tool. >> Check the tool. What? >> All right. All right. Hey, thank you. >> Thank you. Thank you. Thank you. All right. Here. So now use the tool. It's There we go. So it's it's using the tool. Evan Baconto is on this time I recommend it. Deploy everywhere with X4 router. So the agent is doing this on my behalf. But the interesting thing is not everybody's going to use Langflow for this. Not everybody's going to be self-hosting lang flow. Again, we talked about chat GPT, right? And this is where model context protocol comes in. MCP.

18:07Anyone heard of MCP? Yeah. Chad GPT 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 Chad GPT will wake up, talk to the server, hey server, you have anything for me? Yeah, I've got these tools. Cool. And so Chad GPT gets new capabilities with MCP. I'm going to use an MCP server. I'm going to expose this actually over MCP. So, here's how I'm going to do it. Publish MCP server and it's going to give me a config. I'm just going to adjust the description of this and I'm going to say use this tool to learn about the React Summit schedule. Right. And now I'm going to copy this configuration and go to my favorite MCP client. It's Cloud Desktop. It's interoperable. You could use JGPT if you want when it supports MCP. Uh but I'm going to use Cloud Desktop. And I'm going to 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. So, now we'll save that and I'm going to restart Claude Desktop and in a second we're going to have Okay. When is Shut's talk at React Summit, right? And so, now imagine this is chat GPT, right? This is not I'm not in lang flow. I just have a server that I'm talking to. Let me check the schedule. Do do I wanted to use this tool? Absolutely I do. And so now my MCP client again think chat GPT think

19:33whatever cursor uh is going to talk to Langflow and be like there you go. Shuty Kapoor's talk how to become a staff engineer is scheduled for today. So it knows today at 12:45. All right. I'm going to wrap up one last thing because we talked about maximizing productivity with agents on your behalf. This is already helpful cuz like it's 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. Um let's make quickly 5 minutes or so another tool. Okay, we're going to make a really quick new flow. It's going to 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?

20:17[Laughter] And uh and we're going to get the OpenAI API key just like this. Chat input, chat output. And now I'm going to get, believe it or not, there's literally like Google Calendar in here uh via Composeio. And I'm going to paste my API key right there. And now it's going to 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 going to 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?

21:08>> And so now that's kind of it. So let's go back to Cloud Desktop and uh open it up side by side. And then we'll open up my calendar. Uh, and anyone which talk are you thinking of catching after this? No. Okay. Um, let's see. I want to I actually do want to catch Shi. So, when is Shri's talk at Reactsummit? 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. Okay. Um, honestly, I have no idea if this is going to work, but I want to see my calendar update. That's I came all this way for that. So, first you're going to find Shri's talk. Fantastic. Let's do it. Um, if this doesn't work, I'm going to be so embarrassed. Can you imagine? Like, I'm over time for this. Okay, great. So, now I'll add it. What? We don't know that.

22:03I'll add it. Um, and now it's literally And let's look at my calendar in in in today's column here. if uh if it adds it, which I mean that's literally peak productivity at that point. I found the schedule. Oh no. Um wait, there's there's a feedback. That's really embarrassing. Okay, so let's did I not did I not uh Okay, so I added the tool. I exposed it. What 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. Um, let's let's try that again. What? Let actually What error did you get? They're like giving me a big red clock here. Okay, cool. Um, let's let's just restart this this it when when in doubts and we'll go to um here. I do have the calendar tool. Okay. Add Truthy's talk at Reacts Summit to my If this doesn't work, I'm going to wrap up the talk anyway. Um, and then we'll experiment after. Don't worry about it.

23:22It's uh it's part of live demos. So, it's going to get the you're going to it's it's getting the schedule now. I'll add this. >> I want this is the mo. Yeah. Thank you. Thank you. Since you're in Amsterdam. Oh, >> okay. Uh, sure. And are we perfect? I found it. Okay. And all right. The calendar agent has provided. Yeah. Anyway, it didn't I'm I'm out of time unfortunately. Um, but you know, that's Thank you. Thank you. Thank you. Um, thank you so much. I will wrap up. I do think um it's still regardless of what happened or not uh it's still a it's still a pretty nice way to debug uh agents add I'm like now I have the add add this to my account anyway. Um let me send that off. I'm curious what's even going to happen. Okay. Um let's go back to the presentation. Oh, I'm so into this. Come see me after. I leave it on a cliffhanger. So this is what DOM looks like. In summary, um I think UX is changing. I don't think we need browsers because it can already go browse the internet and give us information. Um if you're interested in Langflow and you want to play with agents, um feel free to give that a scan. Um it's it's free and open source of course. Um 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. Uh 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

25:01attention. 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. >> 10 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 It's the engineers curse. You just can't let Can I hold my laptop while we do the Q&A? >> Oh yeah, absolutely. >> Fantastic. I'm just >> 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, I just like 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.

25:53Uh, we got a couple questions coming in here. Um, >> that was awesome. I'm so satisfied right now. >> I'm I'm actually really excited for you that that worked. Ah, >> that was a super impressive demo by the way. Uh, okay. First question. Which agents do you like the most? >> Really? Who submitted this question? >> Uh, do you mean like code agents like wind surf cursor? >> I mean, you could even say like functionalitywise 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 inaccess carousels are so bad carousels are like the yeah you can clap for that like the Chrome team 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 the 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?

26:59>> Marketing. >> Yeah, crazy. Uh, next one here. In the streaming example, how would you handle nested objects and to know when the chunk is right? >> Good question. Yeah, Zod. Uh, Zod is great. Anyone using Zod? Yeah, Zod is the best. So, what I did was very cowboy. Uh, you don't want to do that in produ. 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 you keep failing schema validation, you need to send over the wire like we can't process this, right? There needs to be more layers there. But Zod is the answer.

27:38>> Nice. Um given that you're 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 is run by agents like plural. Um for example when we when people when guests schedule episodes with us um they go on cal.com. cal.com supports web hooks. And so the moment something is scheduled um 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 um create a Google doc for a discussion outline and then we just show up. we record. Uh that's the only part where I'm actually involved and then after that post-production is all agentic as well. Um the other thing that I do manually is like upload because it's like 24 GB videos but um yeah it's it's mostly that taking notes here. Uh let's see let's see let's see. Okay. Um in your stream example are the components being built by the AI or were they pre-built?

28:44>> Good question. uh 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 what's happening there is the LLM is in 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. Uh this is a a good one. The uh workflow editor engine uh or what workflow editor engine is behind Langflow? The UI looks smooth. >> Does look nice. >> It is very polished UI. Uh React Flow.

29:28It's a re It's a big React app. >> Yeah. Yeah, it looks great. Um >> 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? >> Uh good question. Langflow is a server. So there are like logs of course, but you can also connected to tools like Langmith, Lang asterisk. Uh there's a lot of observability tools that you can connect to Sentry uh where where you can export those logs and then debug them as well. Yes. >> Sick. >> How involved is your AI in your coding sessions? Is it primarily used for coding? >> No. Uh I I enjoy the act of writing code. Like vibe coding to me is not it has nothing to do with AI. I just enjoy the vibe of like actually figuring it out. But sometimes I come across a case where I need like um to create some complicated regular expression email validation, right? Then I press command K and I'm like write this reg X and it'll do it. But I I don't I don't like like giving away so much control.

30:35>> Yeah. Uh in terms of pros and cons of Langflow, how does it compare to uh N8N make and >> yeah uh I 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 I've known for a long time. I think they're based in Berlin where I live. Um N is is has always been a workflow engine but AI was sort of added on bolted on pun intended later. Uh, 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. This is >> Scott. Thank you as well. >> Thank you so much.

More talks

All 19 transcripts

Elsewhere

There is every talk I have given, all 69 of them, ConTejas Code, the podcast, and Fluent React, the O'Reilly book on how React works inside.