VS Code Agent Mode Just Changed Everything

Summary

In this video, the speaker explores new AI features in Visual Studio Code, including Agent Mode, a new completions model, MCP servers, and the ability to bring your own AI key. The tutorial walks through setting up Agent Mode, installing Tailwind CSS with AI assistance, and building an application using a Product Requirements Document (PRD). The video showcases how these AI tools can autonomously perform tasks, including querying databases and modifying code. With the integration of MCP servers and Next Edit Suggestions, the video highlights how AI can help developers build complex applications faster and more efficiently.

Takeaways

• 😀 Agent Mode in VS Code automates tasks like a developer, running commands and modifying files autonomously.
• 😀 Ask Mode provides simple answers and suggestions from the AI to assist developers in coding tasks.
• 😀 Edit Mode allows the AI to modify files directly, such as adding dependencies or changing code.
• 😀 Agent Mode is the most advanced mode, capable of executing terminal commands and following step-by-step documentation to complete tasks.
• 😀 VS Code now includes MCP servers that allow AI to interact with local databases, such as Postgres, providing real-time schema access.
• 😀 Using a Product Requirements Document (PRD), developers can guide AI agents to build applications by specifying functionality requirements.
• 😀 Tailwind CSS installation and setup were automated by the AI using agent mode, showing its ability to handle end-to-end tasks.
• 😀 The Next Edit Suggestions feature predicts required code changes and suggests them in real-time based on previous modifications.
• 😀 Developers can now bring their own keys to integrate models like Gemini 2.5 Pro, giving them more flexibility in selecting AI tools.
• 😀 The demonstration showcased building an app called 'TheUrlist' with AI assistance, with features like adding, sorting, and persisting links.
• 😀 With AI-powered automation in VS Code, developers can reduce manual coding efforts and streamline development workflows.

Q & A

What is Agent Mode in Visual Studio Code?

Agent Mode in Visual Studio Code is a new feature where the AI acts like a developer, automatically running through steps such as installing dependencies and modifying project files based on your requests.

How can I enable Agent Mode in Visual Studio Code?

To enable Agent Mode, go to User Settings, search for 'agent,' and check the corresponding checkbox. If the feature isn't available, it may still be in a gradual rollout.

What are the differences between 'Ask,' 'Edit,' and 'Agent' modes in VS Code?

'Ask' mode simply provides a text-based answer to your query. 'Edit' mode allows VS Code to make file modifications based on your requests. 'Agent' mode goes further by autonomously carrying out tasks like running terminal commands and following documentation to complete the steps.

Why does the AI sometimes provide outdated information, and how can I fix it?

The AI might give outdated answers because its training cut-off date is fixed (April 2024 for this example). To ensure accuracy, you can provide the AI with relevant documentation and ask it to follow those instructions specifically.

How do I make the agent follow up-to-date documentation?

To make the agent follow the latest documentation, use the 'fetch' tool in Agent Mode to provide a URL to the updated documentation. The agent will read and follow the instructions directly from the page.

What is the role of the MCP server in Visual Studio Code?

MCP (Model Context Protocol) servers are tools that allow Visual Studio Code to communicate with external systems, like databases. They are used to provide context to the AI, enabling it to understand the structure of your database or other external systems.

How do I set up an MCP server for a Postgres database?

To set up an MCP server for a Postgres database, install an appropriate MCP server package (like one from mcp.so) and integrate it with Visual Studio Code. You'll need to provide a connection string and start the server locally.

What is the significance of 'Bring Your Own Key' in VS Code?

'Bring Your Own Key' allows developers to use external models, like Gemini, by integrating their own API keys into Visual Studio Code. This gives access to different AI models outside of the default options.

How does Visual Studio Code handle the agent's changes and ensure safety?

Visual Studio Code automatically saves changes made by the agent but allows you to undo them easily. Additionally, the AI will not execute potentially dangerous commands, such as running terminal commands, without explicit permission from the user.

Can the AI automatically build a complete application from a Product Requirements Document (PRD)?

Yes, using Agent Mode and the right context, the AI can build an application by following a PRD. After receiving the document and necessary database context, it can autonomously generate the code and deploy the application.