What is MCP Server and How to Use it in VSCode?

What is MCP Server and How to Use it in VSCode?

12/8/2025 • Development Tools • By Tech Writers
MCP ServerVSCodeAI AssistantModel Context ProtocolDevelopment ToolsProductivity

Table of Contents

Introduction to MCP Server

Model Context Protocol (MCP) is an open protocol developed by Anthropic to connect AI applications with various data sources and tools. MCP Server acts as a bridge that enables AI applications like Claude to access local data, external APIs, and various services in a standardized and secure way.

With MCP, you can provide additional context to your AI assistant without manual copy-paste or integrating each data source separately. This opens new possibilities for productivity and automation in your development workflow.

Why MCP Server Matters

MCP Server provides several key advantages:

Standardized Integration: With a consistent protocol, you don’t need to create custom integrations for each application or different data source.

Security: MCP is designed with security in mind, enabling granular access control over data and tools accessible to AI.

Flexibility: You can connect various types of data sources, from local filesystem, databases, to third-party APIs like Google Drive, Slack, or GitHub.

Productivity: AI can access relevant information directly, making responses more accurate and contextual for your specific needs.

How to Use MCP Server in VSCode

Step 1: Install Extension

To use MCP in VSCode, you need to install an extension that supports MCP. Currently, several AI assistant extensions in VSCode are beginning to integrate MCP support.

  1. Open VSCode
  2. Go to Extensions marketplace (Ctrl+Shift+X or Cmd+Shift+X)
  3. Search for extensions that support MCP (like Cline, Continue, or other AI extensions)
  4. Click Install

Step 2: Configure MCP Server

After installing the extension, you need to configure the MCP Server you want to use. Configuration is typically done through a JSON file in VSCode’s configuration folder or the extension’s config.

Example basic MCP configuration (usually in settings.json or extension’s config file):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      }
    }
  }
}

Step 3: Install MCP Server Packages

Many MCP servers are available as npm packages. You can install them globally or use npx to run them on-demand.

Some popular MCP servers:

  • @modelcontextprotocol/server-filesystem: Access to local filesystem
  • @modelcontextprotocol/server-github: GitHub integration
  • @modelcontextprotocol/server-postgres: PostgreSQL database connection
  • @modelcontextprotocol/server-sqlite: SQLite database access

To install globally:

npm install -g @modelcontextprotocol/server-filesystem

Step 4: Enable and Use MCP

After configuration is complete:

  1. Restart VSCode or reload window (Ctrl+Shift+P > “Reload Window”)
  2. Open the AI assistant you’re using in VSCode
  3. Configured MCP servers will automatically be available for use by AI
  4. You can directly request AI to access data or perform operations through MCP servers

Example usage:

  • “Read the README.md file in this project” (using filesystem MCP)
  • “Show all open issues in my GitHub repository” (using GitHub MCP)
  • “Query the database to get users registered this week” (using database MCP)

Step 5: Creating Custom MCP Server (Optional)

If you have specific needs, you can create your own MCP server. Anthropic provides SDKs for various programming languages.

1. Filesystem MCP Server

Provides access to files and folders in your project:

npx @modelcontextprotocol/server-filesystem /path/to/project

2. GitHub MCP Server

Full GitHub integration for repository management:

GITHUB_TOKEN=your_token npx @modelcontextprotocol/server-github

3. Database MCP Servers

For PostgreSQL:

npx @modelcontextprotocol/server-postgres \
  --host localhost \
  --port 5432 \
  --database mydb \
  --user postgres

For SQLite:

npx @modelcontextprotocol/server-sqlite /path/to/database.db

Creating Custom MCP Server

Basic Setup with TypeScript

npm init -y
npm install @modelcontextprotocol/sdk
npm install -D typescript ts-node

Custom server example:

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio";
import { Server } from "@modelcontextprotocol/sdk/server/base";
import {
  Tool,
  TextContent,
  CallToolRequestSchema,
} from "@modelcontextprotocol/sdk/types";

const server = new Server({
  name: "my-custom-server",
  version: "1.0.0",
});

const tools: Tool[] = [
  {
    name: "get_weather",
    description: "Get current weather for a city",
    inputSchema: {
      type: "object",
      properties: {
        city: { type: "string", description: "City name" },
      },
      required: ["city"],
    },
  },
];

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_weather") {
    const city = request.params.arguments.city;
    // Implement your logic here
    return {
      content: [
        {
          type: "text" as const,
          text: `Weather information for ${city}...`,
        },
      ],
    };
  }
  throw new Error("Unknown tool");
});

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools,
}));

const transport = new StdioServerTransport();
server.connect(transport);

Best Practices

✅ Best Practices for MCP Server:

  1. Secure Tokens: Don’t hardcode API tokens. Use environment variables.

    export GITHUB_TOKEN="your_token"
export DATABASE_URL="your_db_url"

  2. Rate Limiting: Implement rate limiting to prevent abuse.

  3. Error Handling: Always handle errors gracefully and provide informative messages.

  4. Logging: Add logging for debugging and monitoring.

  5. Testing: Test your MCP server before deploying to production.

  6. Versioning: Maintain backward compatibility or document breaking changes clearly.

Troubleshooting

MCP Server Not Connected

Problem: VSCode can’t connect to MCP server.

Solution:

  • Verify command path and arguments in configuration
  • Check if package is installed: npm list @modelcontextprotocol/sdk
  • Check VSCode output in Developer Tools (Help > Toggle Developer Tools)

Permission Denied

Problem: “Permission denied” when accessing files or resources.

Solution:

  • Verify path permissions
  • Ensure user has access to requested resources
  • Check environment variables (e.g., GITHUB_TOKEN)

Timeout Issues

Problem: MCP server frequently times out.

Solution:

  • Increase timeout in extension settings
  • Optimize slow queries/requests
  • Check network connectivity if using remote resources

FAQ

Q: Is MCP free? A: Yes, MCP is an open-source protocol from Anthropic and free to use.

Q: Can MCP work offline? A: Yes, local MCP servers (filesystem, SQLite) can work offline. MCP servers requiring external APIs need internet connectivity.

Q: Is MCP secure? A: MCP is designed with security as a priority. Always use HTTPS for communication and never expose API tokens.

Q: How many MCP servers can connect? A: There’s no hard limit, but performance depends on your system resources.

Resources

Already tried MCP Server? Share your experience in the comments! 💬