Transcription
One of the newest emerging trends in AI programming is agentic coding, meaning that rather than a single question and response, the large language model works on more open-ended problems in multiple steps and even tests your application by either directly running it or invoking your test suite.
We've had these open-source agentic workflows like Cline and Roo Code for a while, and a few months ago Anthropic came out with their take on this called Claude Code, which is a CLI tool that you run on your own computer that runs commands and edits files for you.
Just a few days ago, OpenAI took it a step further and introduced OpenAI Codex. Codex is a cloud-based agent that can connect to your version control system like GitHub and implement new features in your existing codebases. Codex is, as of today, limited to the ChatGPT Pro tier, which is currently priced at $200 plus value-added tax in Europe and some other regions.
But OpenAI didn't get to celebrate the launch of Codex for very long, because just today, GitHub announced the GitHub Copilot Coding Agent, a very similar product to Codex that also runs agentic workflows in a cloud environment. However, Coding Agent benefits from a native integration into the existing GitHub interface and a much more affordable price tag, starting as low as $40 a month.
Today I'll take you through how the new GitHub Coding Agent works, and I'll show you how it performs in some of my existing projects. Let's get into the video.
So we're going to start our journey on the GitHub profile screen, because after you sign up for this new agent plan, you're gonna want to go down here to Copilot Coding Agent, and then from here you get to select the repository access. So you can select either all repositories, like I've done here, or you can allow it only for selected repositories. So once you've done that, it's time to start agentic.
First, let's talk about this project that we're going to be working in. So right now, I'm working on this project that explores local AI in the browser. So currently, in this project, what you can do is you can chat with an AI, kind of like something like a very simple version of ChatGPT, and you can also transcribe audio. And this is using Llama.cpp and Whisper.cpp and like a WASM port of each.
So, for example, I can go in here and I can select the model. So we're gonna choose Gemma 3 1 billion. It's a very small model, but it runs in the browser. So let's say I go ahead and I say, "Hello, tell me a joke." That's going to be able to quite quickly give me a joke, and the best part, like I said, is that it all runs in your browser. So you can use this on your computer, on your phone, without an internet connection. It's local, which is really cool.
And you can also use the transcribe feature. Here you can load a Whisper model, and you can transcribe either a local file or this little demo audio clip. Let me just transcribe this demo audio clip so you can see what it looks like. There we go. We get the result. You can copy it to clipboard, and you're off to the races.
So now that we know what this application does, I have a long list of small features that I want to add to it. So I thought that we would explore how you would do that in Coding Agent. So, of course, the first step is to go to your repository where you want the agent to work. So I have the repo here of the app I just showed you.
And according to the GitHub documentation, there's not a lot of documentation for agents because it was just literally released today. But according to the documentation for GitHub Copilot, so not agent, but Copilot only, there's supposed to be a way to add custom instructions, basically a list of things and rules that your repo is using. So maybe which languages you're using, which versions of libraries, which version of Node.js or whatever programming language you're using, those kinds of things. And you're supposed to put this file in .github/copilot-instructions.md.
Now, I have tried doing this. So I have the file here, and what I did was I basically fed the codebase to an AI and asked to generate these instructions. And I also, for example, this app uses Svelte 5, so I also asked it to always download the latest version of the Svelte 5 documentation and make sure to use correct syntax. Now, with the PRs that I've tried, it doesn't seem to actually be reading these instructions, or at least it's not showing me that it's reading them. So I'm not sure if this is working yet. It is still a preview, according to GitHub, so I don't know if this is something maybe they're going to fix down the line, or maybe if it's a little bit not deterministic, then it will read them sometimes. But if you want to be ready for when this feature actually starts working, you can already create this Copilot instructions file.
Now, I've already sort of pre-baked the cake here. I've already created a couple of these issues that I've asked Copilot Agent to work on, but I thought that I would go through one issue with you, at least, and see how the experience is. And then we'll look at some of these issues that Copilot has already worked on, and we'll see if it actually managed to work in this repo using Svelte 5, a really modern framework, and some non-standard things like small local AI libraries.
So how you would do it is, let's say you want it to start working on something new. You just create a new issue, which you're probably familiar with if you're collaborating with people on GitHub or even just for yourself. And then you basically describe what it is you want it to do. So I have a list of a few things that I want to do, but one thing I was thinking of is currently when you're here in the transcribe screen, if you like switch the model, so let's say you pick Whisper small, well, first of all, it doesn't actually allow you to load another model, and second, if I were to reload the screen, it resets back to the default value. So these are two things that I wanted to fix. I'm gonna actually go ahead and write an issue that should hopefully fix both of these problems. So let me go back to the issue and I'll go ahead and write it now.
All right, so now I've written a sort of not too specific but a general description of what I wanted to do. So this is something you would typically do if you want someone else to do this issue, not going into any technicals. I press the create button. Now the issue is created, and then just like it was a person working on your team, you just go ahead and assign it to Copilot. And we just put in a few seconds. You see this little cute eyes reaction, which I think is very charming, and then it right away creates a draft PR.
So I thought we could take a look a little bit on how this works, because you can actually follow them, the model, and what it's what it's doing. So you have the draft PR here, and you can scroll down a little bit to this view session button. And if you press view session, it takes you to the step-by-step tasks that the model is doing. So let's see while it boots up what it's actually going to do.
And what's interesting here is we can see that it starts a bunch of MCP servers. So this is kind of MCP native, and I would guess that there is a way probably to add your own MCP servers in here, and there's not, there's definitely gonna be soon. So that's gonna be able to sort of plug into that whole MCP ecosystem. All right, now it's started, and it's checking out the different files in the project.
Now, what I noticed sometimes is that it will try to run commands, like it will run a directory listing, like LS or tree, to see which files exist. Sometime it just seems to be able to read the files directly through this like MCP. It doesn't seem like they really like dialed in how it all like works perfectly, so it's kind of taking different paths every time you ask it to do something. And it's also not using any sort of a long context. Basically, it doesn't load the whole code into the context. Instead, it's reading like a few files here and there and they're trying to figure stuff out based on that. So it's reading this Whisper page. It's reading the reading stores page. And it's just for now, it's reading a bunch of files, and it's it's basically trying to solve the problem.
And I see what's interesting here is that it seems to also have some sort of, I don't know if this is an MCP or just a command, but it has a sort of thinking mode which it can which it can invoke. After it has like read a few of these files, and it seems like based on this, it can even read like parts of files, like a number of lines in a file. So I thought that we kind of let this let this do, let this work, which is one of the greatest things about this, because now, you know, I don't even need to spend time here. I can just go ahead and create another issue and have one, two, five agents working at the same time.
Now, what I thought we would we would check out is some of the other tasks I've given it and see if it actually managed to do them. I actually have not tried these yet. So we'll start with with this issue here where I asked to add an SRT export. SRT is a subtitle format. And I basically said, you know, make two tabs, meaning like if we let's say transcribe a piece of audio here, I asked it to make two tabs here and allow a user to export in a certain format, and then I asked it to actually check out this documentation for a transcriber library I'm using. And also, just for giggles, I also included the Svelte code standards and the specification for SRT files.
It created a PR based on that. Just like normal, you can review it. And just looking at this, I mean, it looks kind of like it's doing the right thing, but let's actually test it. Let's check it out. So I'm just going to go ahead and go to GitHub and I'm actually going to check out this branch. All right. So now I checked out the branch here, and the server is still running. So let's see if it actually did what I asked it to do. All right. Let's see here. So it's giving me the transcription result just like before, but now I can actually switch to an SRT file and download the SRT. Let's see if that works. Yeah, that works great.
So far, what I can tell, it seems to work amazing. And so now that I know that the PR is is good to go, I will of course still code review this. You can actually leave feedback in the PR, and I'm gonna show you what that what it looks like in a second. But this PR, I think looks pretty good. So I'm just gonna go ahead and approve it now. It does seem like it can finish, but it didn't mark it as ready for review. I'm not sure why, maybe that's just because they don't want non-humans to like mark things as ready for review, but I'm gonna mark it as ready and merge it.
Now let's have a look at some other issues that we raised. Of course, now it is closed, and the issue that line issues closed now. Let's look at this other issue that I started, which was about while the transcription is running, I would like the screen to stay on if you're using like a mobile device or a laptop. And the reason for that is like as soon as kind of screen turns off, you know, you can no longer really run any hard JavaScript code or really like intensive JavaScript code in your application. So therefore, I googled a little bit and I found this Screen Wake Lock API, and I basically told, please use the Screen Lock API and keep the screen on while transcription is running.
Again, it created a PR for this. Here, it initially duplicated the wake lock code between these two routes that I have. So it duplicated them between the chat and transcribe and added the same code block in both places. In this case, I actually went in and I commented on one of these lines that it added and I said, avoid duplication, create a separate reusable file. And because you tag it, it will actually catch that and make those changes. So again, let's have a look at this and see if this PR actually works.
So first, I'll check the code here. It added types, it added a wakelock function, and then it imported them in both the routes. So here it did not seem to work because it violated some of the Svelte 5 rules. That's okay, we know that LLMs are best at writing React, so if you're using React or any kind of older programming language, then it's probably gonna be fine. In this case, I'm gonna prompt it again to fix the issue and direct it to the appropriate box on the Svelte side. And something I actually would like to try to do in this case is ask it to run the application, because it doesn't seem like it did. So I'm gonna go ahead and add a review and I'm gonna say, "request changes," "code does not run."
Alright, so I gave it some instructions and asked it to check it out. Now let's see how that first PR we created is doing. The one that would allow us to switch between different models. So it's been about 12 minutes, and it already finished the job. It of course wrote down everything it did. And yeah, let's have a look. So I'm just going to go to the branch. All right, here we go. And I'm going to the transcribe route.
So let me just load this tiny model. That seems to work. Let me transcribe the demo audio. Yep, that also works. Now let me change the model. So it added this change model button. Let me change to this small model instead. It seems to have the correct loading state for loading model, and I can see that it's it's actually loading this new model. All right, we've finished now. Let me try to transcribe again with this new model, and there we go, completed. Now let's see if it does the second thing we asked it to actually retain, which was the last used model. Yeah, so it when I reloaded the page, it went right to small, and it right away loaded the last model that I I picked. So again, really good. Of course, you need to check the code first and make sure that nothing crazy is going on. But other than that, functionality-wise, it works great.
Now let's go back finally to this WakeLock implementation that wasn't working. I did ask it to build the app and see that it's not working, so let's see if it actually did that. So again, it read the different files in the app. Here we can see that it did actually build the application, and that is one of the amazing things with these cloud-based agents, right? They can actually run your code, build it, and see if there are any errors. And probably it found an error here, because later it actually managed to find what the issue was, which is that in Svelte 5, for universal reactivity files need to end with .svelte.js or .svelte.ts. And this, I think, probably comes from the LLMs file that I asked it to look into.
I also remember that there is actually a setting in the Copilot settings, which says Copilot can search the web. And for me, this was disabled. And I don't know if this applies to Coding Agent. If it does, it's not really visible from these sort of like logs, because they don't really show it that I've seen searching for things.
One thing that I found a little bit interesting is that you can go up here and look at the verbose logs. And when you do, you see quite a familiar user interface, because this is the normal actions interface, which, I mean, it makes total sense, right? These are just GitHub actions under the hood, like really, really beefy and cool GitHub actions that have all these cool tools, but still GitHub actions.
I hope you liked that walkthrough of the new GitHub Copilot agent. If you're interested in learning more about AI or about Svelte, for that matter, I have a bunch of videos on my channel, so check that out. And if you liked the video, please like and subscribe. And if you were interested by this application that I showed, I will also leave a link to that in the video description so you can try it out. Thanks so much for watching!