In-Depth
Vibe Coding with Latest Visual Studio Preview
Microsoft's latest Visual Studio preview facilitates "vibe coding," where developers mainly use GitHub Copilot AI to do all the programming in accordance with spoken or typed instructions.
The term "vibe coding" first appeared in Microsoft documentation last month in a Visual Studio Code team post (see "AI's Takeover of Software Development Gets a Name: 'Vibe Coding'") and we did it successfully in the code editor (see "Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds").
Just last week, Microsoft's Amy Nguyen showed off vibe coding with the Copilot Edits feature in Visual Studio 2022 in a video titled "Build an App from Scratch with GitHub Copilot & Visual Studio." She started with a Blazor Web App template in Visual Studio 2022 v17.14 Preview 2, and simply asked Copilot Edits to replace that template's counter page with a to-do list, using Copilot's "vision" capabilities. Copilot Edits allows developers to make natural language code changes and is continually being improved with new functionality, such as understanding images.
So I did the same thing, first asking ChatGPT to create a mockup image of a to-do app, and then feeding that image to Copilot Edits and asking it to generate corresponding code. While the advanced vision capabilities come in v17.14 Preview 2, the Copilot Edits functionality is available from v17.13 on.
[Click on image for larger view.] 'Tell me what do do' (source: Ramel).
That worked out okay, with a fully functioning, interactive to-do list capable of creating, editing and deleting to-do items.
[Click on image for larger view.] The To-Do List (source: Ramel).
Note that Nguyen's prompt was much simpler: "Can you update the counter page into an interactive todo app set up like this?"
In addition to understanding clumsy and overly detailed prompts, Copilot Edits is great about telling you what it's doing, generating a plan and listing proposed actions that can be accepted individually with a series of Tabs, or accepted all at once.
The To-Do List Summary (source: Ramel).
With the to-do experiment basically working out okay -- a couple of minor hiccups were encountered -- I decided to try something more ambitious, replacing the weather page of the Blazor Web App with another web app.
For this I used the same image that VS Code's Copilot successfully turned into a web app, even though it's degraded and of poor quality.
[Click on image for larger view.] AI-Generated Mockup Image (source: Ramel).
I also used a Visual Studio Magazine logo to serve as an anchor image in the new web app. Both images were simply uploaded to a new Copilot Edits thread along with instructions.
Web App Prompt (source: Ramel).
That's when things went to hell.
I spent hours and hours in an error-generating rabbit hole, with Copilot Edits completely unable to handle the task or even fix errors, with all fixes generating new errors.
For one simple example, while I instructed Copilot to place the VSM logo image in a new "images" folder under the "wwwroot" folder, and it dutifully reported doing so, that was simply a hallucination. I concluded Copilot Edits isn't capable of creating new folders, which it confirmed: "I can provide instructions and code to create new folders in a project, but the actual creation of folders must be done within your development environment or file system." So much for agentic AI.
That was the least problematic of a rat's nest of issues. I easily fixed that manually, but tired of playing whack-an-error, I ended up asking ChatGPT to generate the scaffolding code for a web page and manually replaced the existing page code with it. That worked fine.
[Click on image for larger view.] The Final Result (source: Ramel).
I guess that could be called vibe coding, but it certainly wasn't a good vibe.
About the Author
David Ramel is an editor and writer at Converge 360.