Blog
/
It’s time to explore GitHub Copilot Agentic Mode. With its recent release, I wanted to see if it’s as good as v0.dev and if it can help me build an app effortlessly. In this article, I’ll share my experience using GitHub Copilot Agent Mode to build an app. Additionally, I wanted to see for myself…
It’s time to explore GitHub Copilot Agent Mode. With its recent release, I wanted to see if it’s as good as v0.dev and if it can help me build an app effortlessly. In this article, I’ll share my experience using GitHub Copilot Agent Mode to build an app. Additionally, I wanted to see for myself if it could automatically install dependencies like Shadcn/UI.
After reading GitHub’s press release, I was curious to see how it compared with v0.dev, something I use extensively for more than a year. To put it to the test, I’ll see if Copilot Agent mode can actually assist with building an app and managing my local environment.
GItHub Copilot Agent Mode
As a benchmark, I used this hello $name app, simple greeting app. The app would let users enter their name in a field and display a personalized greeting message. I have been able to give following instructions to build and deploy the app fully on Vercel cloud using v0.dev
hello $name app on v0.dev
Let’s go see how GitHub Copilot Agent mode can help me to build this app.
To get started, I needed to download VS Code Insiders. I followed the instructions on Visual Studio Code Insider to get it.
Once I installed it, I opened the settings page, typed “Agent” in the search field, and checked the box to enable the Agent Mode setting for GitHub Copilot Chat.
Enable Agent Mode on Setting page
Then clicked the copilot icon on the right of searching field on your editor. When in the Copilot Edits panel, switch from Edit to Agent right next to the model picker.
Choose Edit chat from a top icon / Select Agent Mode
Ok, time to build the app. I ask it to create a Next.js app with following command:
1Help me to create a simple single-page application using Next.js, server actions, and Shadcn UI components. We will call this app as greeting-app.In a secouds GitHub Copilot Agent respond to check with me if I want to run a code to create a project with Next.js. After click the continue button, it will automatically run the code on your terminal.
While the GitHub Copilot Agent performs tasks automatically for me, it still gives me the option to accept or undo the changes. This provides me with great flexibility and control over my project’s structure.
In the next step, I was prompted to install Shadcn/UI in the project. On the first attempt, an error occurred because the ‘shadcn-ui’ package was deprecated.
Agent Mode detected the error and automatically modified the package name. Without any additional commands, it troubleshot the issue and corrected the code.
Agent Mode showed me the next step to create a directory and a file to handle the app functionality.
GitHub Copilot Agent troubleshoot the errors automatically
It seemed like Copilot Agent was trying to create the directory and file, but it kept loading and didn’t respond to the command. I tried restarting the project and asked it to help me implement the server action, but it still wasn’t working. So, I decided to wait for about 15mins before continuing.
Copilot stop generating the response
After about 15 mins, I click the reload button on the chat space and now it’s working. It start from searching if there’s any existing content in the server actions file.
It first analyzed my project structure, checking the relating files to server actions. It identified that the greeting.ts file was empty and suggested implementing server actions to submit and retrieve greetings. Additionally, it proposed updating the main page to integrate these actions using Shadcn/UI components.
Copilot Agent modified the main page by adding a greeting form and a list to display submitted greetings. It implemented server actions and integrated Shadcn/UI components for a better user experience. After checking for errors, it confirmed the code was ready to use, with an explanation to suggest using Database in a production. Let’ see how the app looks like now.
GitHub Copilot Agent analyze the project files
Summary of the changes
With just few commands I gave—this is the result. The page includes Shadcn/UI input, button, and card components, all installed automatically by GitHub Copilot Agent. I didn’t specify the exact layout, at this moment but it generated the necessary components to display greetings and even added a recent greetings history.
hello $name app built with GitHub Copilot Agent Mode
Let’s see if I can style it to match the version I created on v0. dev Following the same instructions, I ran a few commands to test its capabilities.
1Help me to update the page. The page should Include the following items. 2Field and Submit Button: Add an input field for the user to enter their name. 3Include a submit button styled using Shadcn UI. 4When the button is clicked, use a server action to process the input and 5return a greeting message: 'Hello [Name]!'. 6Display Greeting Message: Show the greeting message below the form after 7submission.I could see the updates happening in real-time in my workspace. Once the process was complete, it highlighted the modified sections, allowing me to review and either keep or undo the changes.
Real-time updates
User can accept or undo the changes
The final result looks great! The app is now streamlined with a single input and button, displaying “Hello [Name]!” as the output.
hello $name app now has a single input and button
Next, I want to add an explanation section using Shadcn/UI‘s Card and Accordion components for styling. To do this, I ran the following commands:
1Help me to add Explanation section on the page. Use Shadcn UI components 2(Card or Accordion) to style this section. 3Cover the following topics: 4How server actions process the input and return the response. 5The Shadcn UI components used. 6Key Next.js 15.1 features involved in 7the implementation.The result?—It’s amazing. First, it checked whether the necessary Shadcn components were available, then installed them for the page.
Now, the explanation section is beautifully styled with Shadcn/UI’s Accordion components.
What’s fascinating is that it even generated content for the each topics I wanted to cover.
This is a comparison between v0.dev and GitHub Copilot Agent Mode. There are a few differences in the styles, such as the submit buttons, but overall, the basic layout is quite similar. I was able to build the app with the same functions using GitHub Copilot Agent Mode.
You can use the instructions to do this yourself. Find the instrctions on this course:
Next.js 15 for Beginners: Build, Style, and Deploy Your First App with Shadcn UI and Vercel
After using GitHub Copilot Agent Mode, I’m genuinely impressed by how effortlessly it can bring an app idea to life. With just few commands, it not only built the app but also installed the necessary dependencies without me having to do any manual setup.
What stood out the most was its ability to analyze my project structure, detect issues, and fix them automatically. Instead of constantly switching between the terminal and my editor, I could watch it troubleshoot problems in real time, making the entire development process much smoother.
Compared to the earlier version of Copilot, Agent Mode feels like a real coding assistant. It asks for permission before installing dependencies, giving me control over what gets added to my project. It also highlights the changes it makes, allowing me to accept or reject them as needed.
And the fact that it works directly in VS Code—a tool I already use daily—makes it even more convenient. Overall, Agent Mode feels like having an extra set of hands that understands my workflow and helps me move faster without sacrificing control.
Key Technologies Mentioned:
Project Github repo : Hello $name App