AI Agents: Unlocking 100x Productivity.

Yathish Chandrashekar at UXDX Community: Designing for the Future: Crypto & AI. Video: https://youtu.be/GLXzzuUaNjI

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

From 1x to 100x with GitHub Copilot

[00:00:08] Welcome, everyone. Today we are diving into how AI agents, especially GitHub Copilot, will help us in our day-to-day activity. This session is all about how we can go from 1x to 100x productivity using certain tools, and you can get started right after this talk.

[00:00:30] Today developers spend at least 70% of their time not actually building features. It's debugging, or writing boilerplate, or refactoring, or just finding existing code. That's where the AI agent comes in. Not to replace any engineers, I clearly want to call that out, not to replace any engineers, but to amplify our capabilities. Imagine having a junior engineer beside you 24/7 who helps you to finish your work faster. This is what Copilot offers.

[00:01:08] What is Copilot and where do you use it? Copilot is an AI-powered coding assistant built by GitHub and OpenAI. It understands natural language, learns from context, generates code suggestions, tests and documentation, and even explains code for you. It's trained on billions of lines of code from open source projects, and it's available right inside your IDE. It can be in VS Code, or in any other IDE, JetBrains and so on.

[00:01:46] Who can take advantage? Any front-end engineers who write React, Angular, JavaScript, TypeScript, any sort of framework. Even back-end engineers, people who write Java code, Python, whatever, C, C++. C and C++ it's still not that familiar with, but even there it can help. Test engineers and QA who write automation tests, for example in Cypress, Playwright, Selenium, it helps in that scope too. Not only developers or QA, even IT analysts can make use of it. If someone wants to look into the codebase and try to understand what this code is, what this feature is and the reason it was built, the IT analyst can make use of that.

Installing Copilot in VS Code

[00:02:32] With that, let me walk you through how easy it is to get started from scratch, how to install the Copilot extension in your editor or IDE. Most engineers know this is the VS Code editor. If people are not familiar with it, you can just download VS Code. It's from Microsoft, and most front-end engineers are aware of this editor. They can simply download it based on their machine. And as I mentioned, not only VS Code: you can use JetBrains or even Eclipse, you can use these AI agents anywhere. I'm a front-end guy, and VS Code is the most popular, so I'm just inclined towards that.

[00:03:28] Once you install VS Code, go to the extensions and download GitHub Copilot Chat. Mine is already installed, that's the reason I'm not getting that option, but you can search for GitHub Copilot Chat and install it. Once you've installed it, you have a sign-in option. Click on sign in, go to your GitHub account and log into that, and once it's activated you can use it right after. How do you open the GitHub Copilot agent here? Top right corner. Click on that and you'll get this option. If you're getting this kind of text, that means your Copilot is ready to use. If not, it will tell you sign-in or activation is required. In my case it's already activated, and I can get started.

Ask mode: questions about the codebase

[00:04:20] For the demo, I created a small Angular app with nothing inside it, just a simple standard scaffolding. If I run the application, this is what I can see. With the live demo, we can ask the Copilot agent to create an e-commerce application. We'll keep it simple and try to understand how Copilot works and makes my productivity much faster. If you want to create any e-commerce site, it takes at least a couple of days. Let's say it takes one day to complete this e-commerce application. Now, with this demo, let's see how Copilot will boost my productivity to 100x.

[00:05:08] As I said, top right corner, click on it and it'll open Copilot. We can see there are options called Ask, Agent and Edit. What is Ask? If I want to ask anything related to this application: "Tell me what's inside this application." Ask mode can help IT analysts. They can go and ask about the codebase: tell me what Java version is running, tell me what this class is doing, tell me what this feature's code looks like.

[00:05:54] It says the framework is Angular, the build system is Webpack, styling is SCSS, TypeScript. It even brings out the key components and the configuration files. Wow, this is pretty good. I don't need to go into the codebase and check everything. I can simply ask this question and get the summary of it.

Agent mode: building an e-commerce site

[00:06:17] For engineers, the most beneficial thing is Agent. An agent is different from AI. Agent means it will go and do the work, come back, test it, and so on. With AI it's a one-to-one, peer-to-peer conversation. So an agent is a little different from AI. I'll ask the agent to create an e-commerce website with some product images and descriptions, and also add a price tag. If I hit enter, let's see what's going to happen.

[00:07:16] Copilot starts reading my package.json. As most engineers know, the dependencies are listed in package.json. It went through and read what dependencies are configured for this application. Now it knows the context and the dependencies. It's still reading the codebase. Now it's giving a summary of what it's going to create. It says it's going to create a product model. Boom, it created a product model.

[00:08:04] What next? The second step: create a product service with sample data. Okay, it created the product service, with all the code and mock data added. Now it created a header component. Look at that. Now create a product... okay, it added HTML as well. I didn't mention any of this navigation, but it still did it. It's based on the prompt. Whatever prompt you give, the more precise the prompt, the more control you have. The AI agent works based on the prompt.

[00:09:03] Okay, now we've created a product list component too, so that's pretty good. It updated the HTML also. It's almost done. The last part is to update the main app component and add styling. It gave a plan, one to six, of what it's going to do, and it's executing based on that plan. It's updating the styling; SCSS is for styling. Yep, it updated the main component now. Cool, it updated all the routing. That's great.

[00:10:39] When it comes to a bigger task, the AI agent can take a little more time to understand, plan it out and execute it. You can not only ask it to execute new things, you can also say, "There's some issue with my code, can you fix it?" If you give a precise prompt saying there's an error, some actual technical issue, fix it, it'll go to the header component, search for the issue and fix it. So not only creating new things: for debugging, for testing, for anything, you can use it in your day-to-day activity.

[00:11:18] It's almost done, so I'll go back and refresh the application. Okay, it's still working on it. Once this is done, it will ask you, "Do you want to keep this code or undo it?" It won't apply immediately. That's the beauty of it. If you're not satisfied, you can say undo this, execute this prompt multiple times, and whichever one you like, you can keep. The advantage of this LLM is that each time the response is different, and smarter and smarter. Again, it's based on the prompt. The prompt should be much more precise: what do you want, what is the rule set, what are the guidelines, what is the context. Everything should be clear, so that it executes whatever you're thinking in the same way.

[00:12:19] Now it's reading out what changes it made. It's just giving a summary of the changes it went through and executed. We just gave a prompt to create an entire e-commerce site. Even though it's a simple e-commerce site, adding a product to the cart and those things come into the picture. That's why it's taking a little longer.

Reviewing what the agent produces

[00:13:13] Not only creating code: for QA engineers this can help in daily activity. For example, if you want to write automation test cases, go to the component and give a prompt to the AI agent saying, "This is my component and this is the business logic, generate automation test cases." The AI agent can go through the business logic and the code side by side, understand it, and create test scenarios and test suites for you. I can show that too, how unit test cases or E2E test cases can be generated by these agents. Okay, it's still working on it.

[00:14:14] We should always double check what AI creates. Don't always trust that AI is right. You still have to validate whether the code changes coming from the AI are correct or not, because you always treat it as a co-pilot, not a pilot. You should not treat it as a pilot. It's just a co-pilot that helps you boost your productivity. So review it. If you like it, keep that code, or else you can reiterate the prompt and run it multiple times.

[00:14:46] Back to this. With all the prompts, the AI agent created an entire e-commerce site, and it's asking me, "These are the files, do you want to keep them or undo them?" I have two options. If I keep them, all the files turn into the same one now. And coming to the application, boom, the entire e-commerce application got created. We said add images, a few descriptions, add the price tag too. Boom, it went one step ahead: price tag with discount, add to cart, quick view, tons of things got added. Again, this is all controlled with a prompt. My prompt should say exactly what I need, with the precise context. If I don't give it, it goes and hooks in extra things. All of this was created, and I can literally replicate any of this application with simple prompts.

Edit mode and choosing a model

[00:15:50] Again, Ask is for any analyst who doesn't want to touch any code and wants to ask questions related to the codebase. Ask is the right thing in Copilot for that. If you want the agentic mode experience, meaning go and do things, test it, come back and reiterate, that is Agent mode. Edit will give you a suggestion. For example, if you choose Edit mode and say, "Can you help me create a header component with some smart colors?" and keep it in Edit, it gives code. Okay, sometimes this is going to happen. Something happened with the CLI [?].

[00:16:51] Edit mode gives code or instant corrections in the chat window. If you like it, you can click Apply. Edit mode won't go and update the component. That's the simple thing about Edit. And right next to Edit there are hundreds of models, based on your premium models and standard models. For development, always use Claude Sonnet, the Anthropic models. If you're doing reasoning or calculations, then Gemini is good, mini is good, and the GPT models are pretty good for reasoning and fast processing.

Generating unit tests and time saved

[00:17:33] Going back to the core uses. We already saw that it can be used for code generation; we created an e-commerce application. And we can refactor, document and explain code. We already saw explaining code, and we can simply go to unit testing, refactoring the code or documenting the code as well. I'll quickly show how it can be helpful in generating unit test cases. I'll take this header component, right click, Copilot, add files to chat. "Generate unit test cases for this component." Ah, come on, I switched to Edit mode. Let me go back to Agent mode. "Create unit test cases for this component."

[00:18:42] By default it should take Karma or Jest, which is what my application is configured with. That's the reason I didn't mention anything in my prompt saying create test cases using Karma or Jest or something like that. Now it's creating test cases for the header component. It should create a brand new spec file. Let's keep an eye on it. Boom, it created a spec file, and along with that it added all the test suites. It's pretty good, actually. It created all the unit test cases. What else? Code generation, unit test cases, refactoring, documentation. It can easily create any sort of MD files or any other extension.

[00:20:00] Let's see what that looks like. Before, writing form code, any sort of form, used to require 30 minutes of traditional dev time, but now it can be done in 5 minutes. Test cases: people used to spend hours together writing test cases or E2E test cases. Now it can be done in less than 10 minutes. Refactoring code is one of the biggest challenges. Developers need to understand what's going on with the existing code and refactor it manually. That can take up to 45 minutes to an hour. Now it can be done within 5 minutes. Documenting: read through the code, understand it, document it, but now it's instant. You don't need to document anything, because the AI agent, while creating any sort of code, creates documentation and comments. Again, it depends on the prompt you give it.

[00:20:59] To debug existing code, let's assume it's decade-old code and you need to understand it to add some new feature, or fix some issue. It takes a hell of a lot of time, at least 20 to 30 minutes [?]. But now, to debug or understand any code, it can take 2 minutes, because it gives a summary of the code. That's the overall view of how you can use AI agents in your day-to-day activity to increase your productivity from 1x to 100x. That's what the session is all about.

Q&A

[00:21:45] Host: Excellent, thank you very much. It's a dangerous gambit to do live coding, so thank you for trying it out.

[00:21:54] Yathish: Yeah, sometimes it throws different errors.

[00:21:59] Host: Brilliant. If anybody has any questions out there, please write them in on whichever platform you're watching us on and I'll ask them. But I'm going to jump in with the first question. One thing I've seen is a bit of a backlash against the AIs: they're fantastic 80% of the time, and then 20% of the time they go off script and start doing crazy things. So people are saying they're getting a benefit, but not the full benefit, because of that revert bit when it starts doing weird and inaccurate things.

[00:22:39] Yathish: I totally agree with that. As I said, it's a co-pilot. We should not let it be the pilot. Everything is controlled by the prompt. You can see the prompt I gave: create a simple e-commerce application with product images, price tags and descriptions. But it went 10x. It created a header component, deals, quick view, everything. Sometimes you have to give GitHub Copilot instructions along with that, saying you have to limit it to this, you only make these kinds of component changes. So again, it's based on the prompt. And moreover, this is not going to replace any engineers. It can only boost productivity. That's what I can say.

[00:23:24] Host: I guess the other question is related. There's a meme about code reviews: if it's a ten-line code review, you'll get 100 comments, but if it's a thousand-line code review, you get a thumbs up, looks good. The idea behind that is that people will spend a lot more time reviewing smaller chunks and really thinking them through, whereas bigger chunks are just too difficult. Do you have a good tactic for preventing the AI from creating far too much code? Because then there's the bias, or the risk, that you'll just go, "Ah, it's good enough."

[00:24:05] Yathish: Yeah, definitely. In the official GitHub documentation there's a GitHub Copilot instructions MD file. Keep that in your project. Every time, Copilot reads through the instructions. For example, if you're using Angular: always use the latest Angular standards, maybe control flow syntax, always use signals, always use RxJS patterns. These are the pre-instructions you're giving Copilot, so it will always go and read those instructions, come back and execute. It's always good practice to keep the instructions in your application. And not only on the front end; you can keep them in Java or functions too. That's readily available on the GitHub website.

[00:24:57] Host: Right. Are there any proven ones? I use Claude Code a lot, and sometimes it goes crazy. I keep telling it to do TDD, do really small increments, test as you go, but it does that for a very brief time and then goes off and creates a lot of files.

[00:25:14] Yathish: That's a very good point, actually. Always go small. Execute small. Don't say create an entire YouTube application or something else. Always go small. I just wanted to show how it does the wrong practice as well. Now we know how to use a simple prompt to execute step by step. Small, chunk by chunk, is always the best engineering way.

[00:25:41] Host: You gave some great examples there, particularly around understanding the code, because that can be really difficult. You pick up a codebase that hasn't been touched, or you might even have written it but it was so long ago you don't remember anything about it. And you also gave the example that it could be an analyst or somebody else on the project just trying to understand. Do you think it's a good tactic now for teams to give everybody access to the codebase, whereas traditionally that would have been the domain of just the developers?

[00:26:15] Yathish: Well, this is just playing in your local environment. Locally you can do anything, but when pushing to the remote repository there is control. There are checks being monitored, a gatekeeper kind of thing. So yes, definitely, any sort of engineers who really want to get into this kind of stuff, in development and testing, or understand what's really going on, maybe, as you said, decades-old code they want to pass through, which takes a lot of time. It's better to use AI agents to understand it in a simpler way. There's a beautiful prompt: "Explain this code to me like I'm a ten-year-old kid." These kinds of prompts really help, in a simpler and better way.

[00:27:06] Host: Great. The last question is around context windows, because all these different AIs have different context windows. Particularly with a large codebase, do you find that you have to chunk it up in some way so that the AI has enough context to read the code?

[00:27:27] Yathish: That's a good question too. If you have a big chunk of code or a repo that you want to pass through, my suggestion, or the industry recommendation, is first try to understand what the code is about and create some sort of documentation. Ask Copilot, "Create documentation, run through this," and it can create documentation. Then if you want something component-specific, go and ask about that particular component. If you just go generic, "explain this application," it produces a lot of documentation, a lot of text, and the agent [?] can go really crazy. So it's better to go component-specific to understand. That way you'll get a clear answer from Copilot.

[00:28:20] Host: Brilliant, some great advice there. I think that brings us to time. I just want to thank you once again for sharing, and I hope everybody out there enjoyed it as much as I did.

[00:28:29] Yathish: Thank you.