Trying GitHub Copilot's Agent Mode (Public Preview)

| 6 min read
Author: masahiro-kondo masahiro-kondoの画像
Information

To reach a broader audience, this article has been translated from Japanese.
You can find the original version here.

Introduction

#

It seems that GitHub Copilot's agent mode has awakened.

An introductory video has also been posted on YouTube.


I’d like to try out GitHub Copilot’s agent to see what it’s like.

Information

It was predicted that the agent would arrive in 2025, as mentioned in last year’s Adkare article.

Getting Started

#

As of the time of writing this article, you'll need the Insiders version of VS Code rather than the release version, so download and install the VS Code Insiders edition from the link below.[1]

Once you launch VS Code Insiders, install the pre-release version of the GitHub Copilot Chat extension. If you search for "Copilot Chat" in the extensions tab, it will appear at the top.

Install GitHub Copilot Chat Pre-Release

To use Copilot, sign in with a GitHub account that holds an active subscription.

Sign in with GitHub

Check in the Copilot settings that the Agent is enabled.

Settings

Open the Copilot Edits mode.

Open Copilot Edits

For an agent mode that works autonomously, rather than a conventional Chat UI, Copilot Edits—which allows you to edit files directly—seems like the right fit.

Information

For more on Copilot Edits, please refer to the following article.

Switch from Edit to Agent using the options located beneath the prompt input box.

Switch to Agent

By doing so, Copilot Edits switches to Agent Mode (Experimental).

Agent Mode Panel

Since we're at it, I opted for the Claude 3.5 Sonnet (Preview) model instead of GPT 4o.

Cloude

Creating a Simple App Using Agent Mode

#

Since it's an agent, I decided to have it tackle something a bit more advanced by giving the following instruction:

“Create a site for managing ToDo items with Nuxt 3. Configure it so that data is saved in SQLite.”

Initially, a dialog prompting to enable Sonnet appeared, so I clicked Enable.

Enable sonnet

Next, it suggested running a command to generate a Nuxt app.

Create Nuxt app

Clicking Continue executed the command, and it waited while the command ran.

waiting for executing CLI

In the terminal, generation of the Nuxt project began, installing packages and creating the project (during nuxi execution, a human typically selects a package manager, etc.).

npx nuxi

After creating the project, it proceeded to install SQLite-related components. I simply clicked Continue as instructed.

Install SQLite

Packages were installed in the terminal.

Install npm packages

Once the project and required packages were installed, the app was generated at a rapid pace. Finally, it prompted to start the development server.

Building App and run app

At this point, the generated files have been added to the project.

Explorer

For now, I launched the development server.

npm run dev

The app became accessible.

ready to use

When I connected to localhost:3000, the app was displayed.

Open App

I tried entering a ToDo item and clicked the Add button, but there was no response.

Cannot add todo

The terminal showed an error stating that the todos table does not exist.

Error message

Fixing Runtime Errors

#

Although the app was generated rapidly, it wasn't working correctly. So I copied the error message from the terminal and pasted it into the prompt. It appears that it planned to create the table via a migration using Dizzle ORM.

recover from error

Clicking Continue resulted in an error, possibly because the target terminal’s current path was incorrect.

Command execution error

After detecting the execution error, it proposed an alternative, so I clicked Continue.

retry command

A deprecation warning was issued, but it appears to have succeeded.

dizzle-kit

Upon detecting the command's success, it prompted a restart of the development server, so I clicked Continue.

Rerun app

This time, it worked flawlessly.

ToDo App worked

Adding a New Feature

#

Now that I’ve seen enough of the power of agent mode, I decided to have it add an extra feature.

I issued the prompt: “I want to add a due date to the ToDo items. The default due date should be today’s date. I’d like to input it with a calendar control.”

Add feature

Once again, tasks were planned and executed rapidly, and the code modifications were completed. All that remained was to initialize the database and restart.

Feature implemented

Due to an operational error on my part, the database wasn't created. In a pinch, I asked for the command via the prompt.

Ask DB initialize command

While the database creation succeeded, an error occurred at startup, so I pasted the error message and asked about it.

Fix error

It quickly identified the issue in the generated code and corrected it. As a result, the desired functionality has been added.

Updated app

Conclusion

#

That concludes my trial of Copilot's agent functionality. The time taken to generate the app and add new features was only a matter of tens of seconds each. As demonstrated, it operates very autonomously and truly lives up to the name "agent." Even when errors occur, providing feedback prompts it to autonomously correct the code. It's incredibly capable.


  1. Installing Insiders will not affect the release version of VS Code, so rest assured. ↩︎

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。