DEV Community

Cover image for Close Those 20 Browser Tabs: How MCP Servers Bring Documentation into VS Code
Glaucia Lemos
Glaucia Lemos

Posted on

Close Those 20 Browser Tabs: How MCP Servers Bring Documentation into VS Code

#mcp #azure #javascript #vscode

Introduction

How many tabs do you have open in your browser right now? If you're a developer, probably more than 10, right? Azure documentation, PostgreSQL setup guides, connection string formats, security best practices... The list keeps growing.

What if I told you that you can close all those tabs and have instant access to Microsoft documentation directly in VS Code? That's what the Microsoft Learn MCP Server provides!

📺 Based on the video by Chris Noring (Senior A.I Developer Advocate for JavaScript): Add a database in minutes using the Microsoft Learn MCP server and GitHub Copilot - Watch the complete demonstration in action!

🎯 The Problem Every Developer Knows

Imagine this scenario: you're building an application and need to add database support. Suddenly, you have:

  • 5, 10, or even 20 tabs open
  • Multiple monitors with scattered documentation
  • Constant context switching between code and documentation
  • Doubts about whether the information is up to date
  • Neck pain from looking sideways so much 😅

💡 The Solution: Microsoft Learn MCP Server

The Microsoft Learn MCP Server solves all these problems by bringing Microsoft documentation directly into your development environment. No more tab switching, no outdated information, just instant and accurate answers right where you code.

🚀 Setup and Configuration

The configuration is surprisingly simple! You can install an MCP server directly through its own registry:

  1. Select the MCP server from the list
  2. Click the Install button
  3. VS Code automatically adds the Microsoft Learn MCP Server to your configuration in the mcp.json file

Done! Now just open GitHub Copilot Chat, make sure you're in agent mode, and start using it.

🎬 Real-World Scenario: Connecting NodeJS to PostgreSQL on Azure

Let's look at a practical example. Imagine you have a basic NodeJS application that needs database connectivity. In the past, you would open multiple tabs to research:

  • Connection patterns
  • Security configurations
  • How to integrate with Azure

Now, Just Ask Copilot:

"How do I connect a NodeJS application to PostgreSQL on Azure with proper security practices?"

And watch the magic happen! 🪄

What GitHub Copilot Agent Does:

GitHub Copilot in agent mode:

  • ✅ Identifies exactly which files need to be changed
  • ✅ Adds seed data to the database
  • ✅ Updates package.json with necessary libraries
  • ✅ Creates database management scripts
  • ✅ Suggests commands for execution
  • ✅ Generates .env file with appropriate environment variables

Generated Files:

  • README.md - Project documentation
  • Setup and seed tasks - To initialize and populate the database
  • Management scripts - To administer the database
  • .env file - With user, ports, development mode, and more

Testing the Application: 

npm run setup  # Creates the database
npm run seed   # Inserts initial data
npm start      # Starts the service
Enter fullscreen mode Exit fullscreen mode

Done! Your application is now reading correctly from PostgreSQL. 🎉

☁️ Deploying to Azure with Bicep and Azure Developer CLI

But it doesn't stop there! You can also ask Copilot to prepare the Azure deployment:

"Create Bicep files and use Azure Developer CLI (azd) to deploy to Azure"

The Azure MCP Server Comes into Action:

Copilot uses another powerful MCP server - the Azure MCP Server - to:

  • 📋 Get deployment best practices
  • 🏗️ Create Bicep files for infrastructure as code
  • 🐳 Generate Dockerfiles
  • 📦 Configure Azure Developer CLI (azd)

Created Resources:

Copilot generates all the necessary infrastructure:

  • Container Apps - For your application
  • PostgreSQL Database - Managed database
  • Container Registry - For your Docker images
  • Key Vault - For secrets management
  • Managed Identity - For secure authentication

Security and Best Practices:

  • ✅ Everything stored in Key Vault
  • ✅ Encryption at rest
  • ✅ RBAC (Role-Based Access Control)
  • ✅ Production-ready
  • ✅ Auto-scaling configured
  • ✅ Monitoring included
  • ✅ Cost-optimized

Generated Commands:

Copilot even shows you the necessary commands and in what order to run them!

🎯 Conclusion

The Microsoft Learn MCP Server combined with GitHub Copilot revolutionizes the developer workflow:

  • ❌ No more 20 open tabs
  • ✅ Up-to-date documentation right in VS Code
  • ✅ Database configuration in minutes
  • ✅ Azure deployment with best practices
  • ✅ Production-ready and secure by design code

This entire process that would take hours of research and manual configuration can now be done in minutes, with the confidence that you're following industry best practices.

📺 See It in Action!

Want to see all this working in practice? Check out the complete video where this entire process is demonstrated step by step:

👉 Watch the video: Add a database in minutes using the Microsoft Learn MCP server and GitHub Copilot!

📚 Additional Resources

📲 Follow VS Code

Credits: This article was based on the demonstration presented by Chris Noring, Senior A.I Developer Advocate for JavaScript at Microsoft.

Have you already tried MCP servers in your workflow? Share your experience in the comments! 👇

Top comments (0)