How Devs Can Maximize Their Productivity with AI Agents in 2025
Productivity Conf 2025 / 24:53
Transcript
21 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:08I'm Tiskumar and I've been building on the web for over 20 years at places like Verscell, Spotify, Zeta and more. And a lot of this building has been enabled by AI agents. And that's the big trending topic in 2025, AI agents. So in our time together today, let's talk about agents and let's talk about it assuming zero knowledge and go from there. To begin with, let's just define what an agent even is. And to do that, we can just go on Google and type define agent, right? And so what we see is it's a person who acts on behalf of another person or group, a person or thing that takes an active role and or produces a specified effect. And so what we can see is an agent is someone who acts. That's literally the thing either here in the first definition acts on behalf or takes an active role. Um, let's take a look at another definition while we're here called agency. And this is interesting because it's a noun, which is a business or organization providing a particular service on behalf of another person like a travel agent or something. Or the second one, action or intervention by producing a particular effect. And so these words are important as we discuss agents because that's fundamental to understanding AI agents. So it notice it says a business or person previously.
01:21Um, and when we take these definitions and apply them to AI, we get AI agents. So, what is an AI agent? It's when an AI acts on behalf of you or a group or some or when an AI takes an active role or produces a specified effect. Agency, if we look at that other definition, um, yeah, if we look at agency, um, it says a business or organization providing a particular service or this one, action or intervention by producing a particular effect. canals carved by the agency of the water. There's more definitions here um which you know we can get into the etmology and all of this but one of the definitions of agency is also just free will or freedom to choose. For example, if you ask me to multiply two very large prime numbers um I could using my agency try to do it in my head probably get it wrong or using my agency pick a tool to use like the calculator and get it right. So tool use and choosing the tool is a tenant of an agent either human AI or otherwise or business. And so that's like agent 101.
02:26What does this mean for AI? Basically the same thing. Large language models or neural networks are algorithms that simulate our brains, our neural networks. They literally the representation of a human brain. So if a human brain has agency to choose tools, so does a language model or an LLM because it's ultimately just a neural network, a transformer-based neural network if you're interested. And so I hope that becomes clear. So what is agency? It's the ability to choose a tool to achieve an outcome or in the case of this slide, producing a particular effect. Now let's zero in on the agency definition in the context of language models. There's this great paper by Google published October of 2024, agents by Julia Wezinger, Patrick Marlo, and Vladimir Buskovich. And this paper goes on to outline, excuse me, it was September 2024. The paper goes on to outline what is an agent. And if we go to that section, there's some text and a diagram. This ultimately is an agent. It is a runtime that contains three components. An orchestration layer where things are well orchestrated or organized. a model, usually a language model, and tools. I think if if we've had any exposure at all to something like Chat GPT, we know what a language model is. We don't need to go into detail about that, but let's talk about tools and then the orchestration layer.
03:48Tools are nothing more than functions. That's how they're represented in the AI agent landscape. They're functions. And so, some might think that a language model can like call functions. That's not true. Language models can generate structured output because what is structured output? It's just language. It's it's JSON. And so how language models use tools is by generating JSON output. Let me show you. So if we come to TLR and and just create our slides interactively, you can say um you know user let's say the user is you and you say get the weather to the language model. A language model can then either say I can't right if if it can't or the language model will generate you a tool called JSON object so it might generate you something like this um tool name is get weather and then args is complete it's an array of arguments that's completely generated and of course args would be the city for example right and then your application that consumes this output would read this and then an application code or in the orchestration layer you would do this you would call get weather with Merlin right and then whatever the response is would go back to the LLM so LLM would say you know you got weather like 20° whatever and then the LLM would turn that into a response to you this is how tool calling works they're just really good at generating structured output and so that structured output is connected to your
05:14orchestration layer or your application here this is how it works so as we can see even here that diagram comes to life let's open it in split view right and what we can see is this is the diagram where you have a language model that's our language model you have tools which is nothing more than a JSON representing a function and an actual function and the orchestration layer which is our application that calls this fundamentally this is how it works and this here what we have here is the agent runtime okay that's really it but let's make it a little bit more practical like say you wanted to build your own AI agent how Would you do that? Well, if you go to langflow.new, this is something that I built at data stacks. Langflow is an open-source diagramming tool that helps you really understand things. So, if we come here and immediately as soon as we log into langlow. We see something like this, which is a basic agent. It's literally called a simple agent. And so, how does this work? Well, at the center of it is an agent where you have a model provider to give us the language model, of course, and you choose the model you want. You then give it an API key. You give it some instructions and you connect tools. Okay, what tools are available to us? Well, we have a URL so it can browse the web. It can literally just access things on the internet and a calculator just in case you want to do
06:34some math. So these are the two tools available to it. Finally, we take the chat input and pipe it in and we take its response and pipe it to chat output. This is a really basic agent. So let's try and use it. And and you know, I'll give you a word of caution here. My API key may not be valid, but let's just do this together. So, um, convert 200 euros to Indian rupees. And so, we'll see what happens when the agent runs the code. Okay. Yeah, it's it's my API key doesn't doesn't work, but it's okay. We'll we'll just put a new one in there. So, um, should be here. Let me just quickly get it. And again, this API key will be revoked, so no worries. Um, okay, that's it. So now let's go and try it again. Convert €200 to Indian rupees. And so look, it's accessing URL fetch content. It did a bunch of stuff.
07:29Look at this. It said um it got the exchange rate using the URL tool and got it again and then did some math and says finally therefore €200 is approximately 18,280 Indian rupees. Of course, this is important because the exchange rate changes regularly and if you don't have the tools, it's not going to work. For example, let's use maybe a cheaper model and let's get rid of the URL comp the URL tool. I just cut that line. Let's open a new chat and do it again. 200 to Indian rupees and it's probably going to say I don't know how to do that. So, it has the calculator. But notice it's wrong. 17700 because it just has a calculator tool and it just came up. It hallucinated an exchange rate. What if we remove the calculator tool? Try again in a new chat. convert 200 Indian rupees to or excuse me 200 euros to Indian rupees and now it's just going to probably fail. um gets the date the current date and time in Europe is this to convert €200 to rupees we yeah so they get more capable when you give them more tools and this is how an agent works and again we see that diagram right you have a language model you've got the orchestration layer in this case which is lang flow and you've got tools and langflow is the thing that's getting the structured JSON output and binding it together okay this is cool but the talk promised using AI agents to increase your productivity. Um, and how how might you do that? How might we
08:57make this personal? Like this is cool for like a URL and so on, but how might we make this personal? And I want to answer this question really in two ways. Um, one, how to make it more productive for you as a developer? And two, how to make it more productive for you just as a regular human being? We'll start with as a regular human being, which developers are also regular human beings. Don't come for me. There's a great product and tool called Composio. I have no financial relationship at all to Composeio, but I think it's they're doing great stuff. They're making tools for agents. Let's go check it out. So, if I go to Composio.dev um and sign in, what I get is my dashboard. And there's a bunch of things here, but what what's really cool is they have integrations and apps. So, I'm going to go here to all apps and it's going to get a bunch of tools. And these are the things that I can use agentically. Google Drive and Slack, Perplexity. There's lots of things that I can use like or my LLM can use as an agent and it just goes on and on. Let's go and use Google calendar agentically because I want a calendar agent. So I'll come here um and I'm going to set up the Google calendar integration. And how I'm going to set that up is by um logging into my Google account. So I'm going to connect default Google calendar. That's my default user ID.
10:15That's my user in Composio. And I'm going to sign in to my data stacks calendar. Okay. And of course, I'm going to give it permission. So that's it. It has permission. Now my Composeio application is set up to use my Google calendar. I can go use this in Langflow. So I'm going to get an API key from Composio just like this. And I'm going to come to Langflow, the same Langflow. And I'm going to go to Composio here on the left side. Composio tools. Grab this. I'm going to paste in my API key and refresh. And this is now going to go to Composio and be like, "Hey, what apps does he have?" So I have a bunch of apps. I want the Google calendar one, this here. And now it's going to check like, am I authenticated? Am I not? Once it knows that I'm authenticated, um, I just refresh this.
11:02Once it knows that I'm authenticated, it will give me actions that my agent can perform. For example, do I want to be able to delete events with my agent? Probably not. I want to quick add. I want to get the current date and time. everywhere. I want to um update events. I want to get actually I do want to update events. It's a bit mutative. I want to um find events. I want to find free spots. And I want to create events and I want to list calendars. So I want to do all these things. So now I'm going to plug this in here to my tools. And let's maybe use a smarter model. That's it. I've added this tool and it's connected to my Google calendar. So if I go back here and I'm like um what are my meetings for today? Right. Um, it may or may not. So, it's using Compose. Look at that. You have no meeting schedule for today. Awesome. Um, let's say, how many hours am I spending in meetings this week? And this is this is quite basic, of course. Um, but it gets even better, and I can't wait to show you. So, it's finding all my events this week, and you can actually inspect.
12:05There you go. So, these are all my I do have an all hands, um, but that's 2023. So, it doesn't know the current date um for some reason, but I think there's a tool here um current date. Look at that. Does this have tool? It has tool mode. Okay. So, we turn it into tool mode. Plug it in. And uh let's try again. Why not? So, let's go and say uh what are my meetings for today in a new chat. I love live coding with you here. Um and again, it may not work. Okay. So, um it is March. I don't know. Let's let's just do a dummy date for example, March 4th, 2025. Um, just because I know it's in the past and stuff happened and we'll we'll try this again for and again, we can just add a tool here. But I want to show you something really awesome. Um, so it's finding events for March 4th, 2025, a date in the past where I know for sure what meetings happened and these are all my meetings. That's absolutely true.
13:00Every one of these meetings is totally valid and this is me and my manager Carter and it's great. So it totally works. But we can do even better, right? Right? We can say it's again we'll go back and use our fake date 2025 and we'll have it do this. And so yeah, now we can see it's it's finding events. Um it's getting the current date and time. It's finding free slots. And you can also just like see the output here. Whoa, there's a lot of stuff. And so there you go. Executed create. It's doing a lot. So I'm just going to go and um collapse this chat here. There you go. Meeting with Melissa Herrera for ne for you know I said it's March 4th. So, next week is March 11th. Um, 9:45 PSD her time. Location unfortunately isn't like an actual location, but you can view the event on Google calendar here.
13:43Let's go check. So, I click on it and um it says busy, but that's my personal calendar. Let's go look at it in my work calendar. March. Um, it's supposed to be here. Wait, let's take a look where what did it say? This was for March 11th. Let's check. March 11th. Meeting with Melissa Herrera. Boom. Um, this was completely booked by my AI assistant in a decent location in SF. Absolutely bananas. Absolutely bananas. That is the coolest thing. So, that's how you can create um, yes, I'm going to delete this. That's how you can create an agent for yourself. Absolutely bananas. And it's Langflow and we just did it here. Langflow is open source. You can host it yourself. Do not share your API keys in Langflow. It's just for prototyping kind of like we're doing. Um let's wrap up blank flow and then I want to show you some more stuff. So if you click on API, this entire flow using your tools, using all of it becomes accessible over a web API over HTTP and then you can call it from any front end, any client, your React Native, whatever you want. You can just use your assistant as yourself as your agent.
14:48Very cool. Finally, I want to spend some time talking to you about something called MCP. That's called model context protocol. MCP. Let's let's go over here and change the slide. MCP model context protocol. Now, if this was in person, I would ask you like, hey, has anyone like heard of this? Is anyone using this? I can't do that. Um, but maybe you can react on the video or something. Um, what is this? It's a way of sharing context with your models. Remember, we said um function calls are like this, right? Um, MCP is a protocol that makes functions available to models over either standard input output or over an HTTP endpoint. Any model can be extended using model context protocol. It is so cool and I'd love to show you this as well. Um, but the way I'm going to show you this is through coding. Uh, some of you are, you know, you keep you keep asking the question like, hey, am I gonna um still have a job? Is the machines going to take my job? And whatever. Let's find out. Uh so model context there are many many many many MCP servers by many many many vendors there's like GitHub and Slack and basically anything that has an API can be exposed over MCP and so what we're going to do is using the GitHub MCP server um just find an open source issue as me solve it and open a PR just fully autonomously with an agent. Okay. Um to do that first we need a GitHub personal access token. So come with me to GitHub
16:18and let's make one. I will revoke this after um this session. So you're not going to be able to pretend to be me on GitHub and we'll um yeah, let's delete this one and I'll make a new one. I'll generate a new token with Yeah. Okay. with repo scopes. So repo and I'll call it my agent. Well, pretend you didn't see that. My agent. And we'll save the token. And now I'm going to get it. Great. Please don't copy this. Um, and now where do I plug it in? Well, there is how you you how you work with model context protocol is really just over npx. It all works locally. Um, and so you could just Whoa. You could just npx-y like this npx-y model context protocol/server GitHub. just run that um and it'll open MCP server um just like that in the terminal. Absolutely bananas. But what is this actually doing? Well, you need a client for this. And so let's go use a client cursor. Some of you may have heard of this IDE cursor. It's a really great client that that uses MCP. So let's open cursor. Um and let's just like close the side, but let's close everything and go to cursor settings. We come here to the full settings. And what we're going to do is go to features. And here we have MCP servers. Okay, there's no MCP servers, but I can add one. And the there's SSC or command as I mentioned, which was command. And we'll say this is the GitHub one. So what I'm going to do is env GitHub personal AP access token equals and I'm
17:59just going to copy my token from here. And again, you can't use this. And then we'll say that npx command, right? NP. We're just going to run this inside of cursor um as we add a new MCP server. That's kind of annoying that it dismissed the modal, but um server name GitHub. Is it going to dismiss the model again if I go get my Okay, cool. And we'll say env GitHub personal access token equals this and run npx. That's it. And so now it's calling it. And look, it knows it speaks MCP. And so it can do all these things. It has all these tools now. Create or update file, search repositories, create repository, etc. So cool. So now using this MCP server, I can go to the agent composer, the cursor composer here. I'm just going to create a new chat, right? And I can do literally anything. I can be like find a trivial open issue in Facebook and open a PR fixing it. I can literally do this and I can choose agent mode. Um, but let's maybe find a smaller repository that I maybe haven't contri I haven't contributed to React, but let's go on GitHub and just like find even better. Let's just find a trivial issue open in a trending popular GitHub TypeScript. Actually, not even TypeScript repository. Let's go bananas here. Repository, right? And so, it's going to even find the thing. This is full agentic flow. And so I submit and it's just going to look at this calling MCP tool search repositories and it's it's searched some
19:34repositories. Now let's look for an open issue in one of these popular repositories. I'll check the prettier repository. Cool. I'd love to contribute to prettier. Um what happened? Your conversation is too long. Please try create or shortening your messages. Okay, let's make a new conver. It apparently found like big messages or something but I can just do it again. Um it's doing prettier again. Um but maybe this again becomes too big. So list issues maybe gets too many issues you know. Yeah. Okay. That's the problem. So let's do another one. Let's let's do in a let's let's give it a repository. SolidJS/solid or something. There we go. It even knows in the SolidJS repository. That's wild. Um, and let's see what happens. Even here, my conversation is too long. Let's just choose a different model with a different token length.
20:32Um, great. Claude 3.5 is so much better than 3.7, isn't it? So, it's listing issues. Conversations again to let's go use OpenAI. Maybe GPD4 mini. I guess you could use GE unsupported model. You could use Gemini that has a larger context window and there's also cursor settings that it's a beta feature but it allows large context. Okay, look at this. So some open issues in SolidJS issue 1041 shows string undefined past previous node whatever the first issue seems like a straightforward bug that could be addressed by checking for undefined. Would you like to proceed? Proceed. Um and now it's going to just like fix the issue. Absolutely. It might fork the repo because it has my personal act. Look at this. It's forking the repo. Um, as me. Wild. There. I successfully forked it. Now you're going to clone the Whoa, whoa, whoa. Just like cloning stuff. Um, and now it's cding in. It's literally just running these. My hands are free, huh? It's just like running this. It's gpping the codebase. It's searching the codebase.
21:39Um, wild. So, it's it's just full agent mode. That's crazy. And so we can just watch this code and take my job. I might fast forward this. Um, but we'll see. That is wild. I can even say um just like stop don't work with this locally but do it all on GitHub. I can say that because I don't want to look at this. It's amazing. So I can just have this use MCP all the way and uh it's searching the code. Again, this is just a GitHub tool. Um, it just keeps searching the code. So, so cool. Let's read the section of the file where this is defined to understand how it works. All of this is just happening. So anyway, um let's go to a previous one. So I did this some time ago. And if we look at this, this is what happened.
23:04I said go to go find a type. I even had a typo. Go find a TypeScript issue in Langlowi/ Langlow and fix it. It searched the repositories, forked the repository, got the file context contents multiple times, searched issues, found an issue, and continued all the way using this MCP until right, it created a pull request. Wild. And this pull request here has a pull request ID. So I can even like go on this, which is Langflow isol 6914. So I can go to github.com. I can even just come here and look at my recent activity. It's this one. And this whole PR I did nothing like this was fully agentic just all of I didn't do any of this. Um and then it even said it mentioned the issue here 6263. Um and you know this was a feature request by Rio Lipe. I don't even know him. Um and it just all of this was just as me. It was fully agentically right. And so um it's absolutely wild. Okay. So here it's still working. It's still and you know the talk is has a time bound unfortunately but at the end of this I'm going to have um a SolidJS pull request that just exists absolutely wild let's wrap up so what did we cover we covered a bunch of things we covered model context protocol which is available in cursor and other agents we've covered the actual agent runtime um that is that is here that is agents paper yeah it's this on we covered what what an agent actually is um provided we didn't know that before. So there's a really cool
24:38diagram here and we explored how we might use it with Composio and Langflow or in Cursor. Either way, you just need an agent runtime, an orchestration layer, a model and tools. Thanks so much for listening. I can't wait to answer your questions and see what you build with all this knowledge. Take care.
More talks
- 2026
The New UX
CityJS London 2026 - 2026
Frontend after AI: The New UX
Future Frontend 2026 - 2026
Harnesses in AI: A Deep Dive
AI Engineer Europe 2026 - 2026
AI Yesterday, Today, and Tomorrow: Extending AI Systems with Model Context Protocol
How to Web 2025 - 2026
How to Thrive as a Professional with AI
React fwdays 2025 - 2026
How to Optimize Your Health with React Native
React Universe Meetup Berlin 2026
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.