Use GitHub Copilot Agent Mode to create a Copilot Chat application in 5 minutes

Last week, GitHub Copilot released a new Agent Mode mode. We can use GitHub Copilot Agent Mode to create new applications or add features to existing projects based on new requirements. You can experience this feature through Visual Studio Code Insiders (1.98).

To enable GitHub Copilot Agent Mode, you need to enable GitHub Copilot Agent Mode through Visual Studio Code Insiders.

After completion, you can select Edit with GitHub Copilot, select Agent Mode and the corresponding model. Currently, GitHub Copilot Agent Mode supports GPT-4o, Claude 3.5 Sonnet, and Gemini 2.0 Flash. I recommend considering GPT-4o because it supports image uploads.

After completing the relevant settings, we can enter the Copilot Chat application development. We want to have a Facebook Messenger-style Copilot Chat, so we find a screenshot of Facebook Messenger as a requirement.

In the GitHub Copilot Mode + GPT-4o scenario, we add the image as an attachment to the GitHub Copilot chat window

Enter the following Prompt

"Generate a Python Flask application based on the content of the image"

We can see that GitHub Copilot Agent Mode has helped us generate a Python + Flask application. You can check the generated file to accept it.

Then follow the prompts and run it. You will find missing elements, style and layout errors, etc.

You can adjust it through the prompt, such as

• “Adjust page content based on image content, style, and layout”
• “The chat window height and width are adaptive to the browser size, and the user picture is removed”

You can successfully get a satisfactory interface through chatting, and then hope that AI can be adjusted according to the existing code. This is the most basic front end, of course, you can make comprehensive adjustments according to your needs.

After completing the front-end settings, we want to combine o3-mini in GitHub Models as the backend, but GitHub Copilot cannot correctly use Azure AI Inference SDK to call GitHub Models. Agent Mode can be used to reference related documents, ask new requirements and provide reference code. I put the Python reference code of GitHub Models into the project folder

reference it through Agent Mode, and use the following prompt to add it

"According to #file:demo.py Use GitHub Models as the backend to provide an API and call it using JavaScript"

At this time, Agent Mode will help you add the corresponding GitHub Models calling code in the corresponding code, and you just need to accept it.

Note: If you want to get GITHUB_TOKEN, please get it through Get API Key.

Let's try to run it, and a Copilot Chat application is completed.

GitHub Copilot Agent Mode allows GitHub Copilot users to complete applications more quickly and conveniently, and allows non-computer users to complete prototypes or application building more efficiently. The dream of "everyone can program" is not far away.

Resources

1. Sign up to use GitHub Copilot For free https://aka.ms/CopilotFree_R
2. Learn about GitHub Models https://gh.io/models
3. GitHub Copilot: The agent awakens https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/