Based on a tutorial by Burke Holland
If you've been struggling to keep up with all the new AI features in Visual Studio Code, you're not alone. It seems like every week there's another update that could potentially transform your development workflow.
I've summarized this excellent tutorial to help you quickly understand the exciting new AI capabilities in VS Code, including Agent Mode, MCP servers, new completion models, and the ability to bring your own key.
Quick Navigation
Agent Mode: Your AI Development Partner
Visual Studio Code now offers three distinct AI interaction modes: Ask, Edit, and the new Agent mode. While some users already have access to Agent mode, it's being gradually rolled out.
My Take:
If you don't see Agent mode in your dropdown menu yet, don't worry! There's a simple way to enable it right now.
To enable Agent mode manually:
How to Enable Agent Mode:
- Go to User Settings in VS Code
- Search for "agent"
- Check the box to enable Agent mode
Each mode serves a different purpose in your development workflow:
Understanding the Three AI Modes:
- Ask Mode: Provides answers in the sidebar without modifying your code (standard chat interaction)
- Edit Mode: Can create and modify files based on your prompts
- Agent Mode: Acts like an autonomous developer, performing multiple steps including running terminal commands (with your permission)
One important limitation to note is the training cut-off date. The VS Code AI features use Claude 3.5, which has a training cut-off of April 2024. This means you need to provide context for newer technologies or documentation.
My Take:
The fetch tool is your best friend when working with newer technologies. Always provide the AI with relevant documentation links for best results.
MCP Servers: Connecting VS Code to Your Database
MCP (Model Context Protocol) servers solve a critical problem: how to give AI assistants access to external systems like databases without writing custom extensions.
What Are MCP Servers?
- Small programs that run locally on your machine
- Allow VS Code to communicate with external systems (like Postgres databases)
- Provide contextual information to the AI assistant
- Available in various formats (NPM packages, Docker containers, Python packages)
Setting up an MCP server for Postgres is straightforward:
How to Set Up an MCP Server:
- Find a suitable MCP server (like from mcp.so)
- Open the Command Palette and choose "MCP: Add Server"
- Select the package type (NPM, Docker, etc.)
- Enter your database connection string
- Choose between User Settings (available to all projects) or Workspace Settings (project-specific)
Once your MCP server is running, you'll have access to new tools in VS Code. For example, you can use the query tool to ask about your database schema and relationships.
My Take:
MCP servers are a game-changer for AI-assisted development. They provide context that would otherwise be impossible for the AI to access, making your prompts more effective and results more accurate.
Building a Complete Application with Agent Mode
With Agent mode enabled and an MCP server connected to your database, you can ask VS Code to build an entire application based on a product requirements document (PRD).
Elements Needed for Successful AI-Driven Development:
- Project Requirements Document (PRD): Defines user stories and application functionality
- Custom Instructions: Best practices for the technologies being used
- Database Context: Provided through MCP servers
In the tutorial demonstration, the AI successfully built a complete application called "TheUrlist" that allows users to track and share lists of links. The build process took about 30 minutes, with the AI handling everything from setting up components to implementing drag-and-drop functionality.
My Take:
While the AI can build impressive applications, you'll still need to review and potentially fix small issues. The example showed how the instructor needed to correct an import statement, but the Next Edit Suggestion feature helped complete the fix automatically.
The completed application demonstrated several impressive features:
Features Built by the AI:
- Creating and managing lists of links
- Automatically pulling metadata from added URLs
- Drag-and-drop reordering of links
- Database persistence
- Responsive UI design using Tailwind CSS
Bring Your Own Key: Using Custom AI Models
Visual Studio Code now allows you to use your preferred AI models by bringing your own API key. This feature gives you more flexibility in choosing the AI that powers your development experience.
How to Use Custom AI Models:
- Go to the models dropdown and select "Manage Models"
- Choose your preferred AI provider (Ollama, Gemini, etc.)
- Enter your API key
- The new model will appear in your model picker
My Take:
This feature is particularly valuable if you have a preference for specific AI models or need capabilities not available in the default options. It's also useful for organizations that have already invested in particular AI platforms.
Comments
Post a Comment