Learn MCP Server

A comprehensive guide to installing and configuring Model Context Protocol (MCP) servers for Claude Code, Zed, and Visual Studio Code. MCP servers provide AI assistants with access to external tools, APIs, and documentation.

What is MCP?

Model Context Protocol (MCP) is an open protocol that enables AI assistants to:

• Access external APIs and services
• Query documentation in real-time
• Interact with development tools
• Extend capabilities beyond basic code editing

Benefits of MCP Servers

Tip

• Real-time Documentation - Access latest docs from Astro, React, etc.
• Tool Integration - Connect to Sentry, Neon, and other services
• Enhanced Context - AI understands your tools and stack
• Productivity Boost - Less context switching, more coding

---

Prerequisites

Before installing MCP servers, ensure you have:

• Node.js 18+ or Bun installed
• Claude Code, Zed, or VS Code installed
• Basic command line knowledge
• API keys for services you want to use optional

Check Your Environment

Bun (recommended)

# Check Bun version
bun --version   # Any recent version

Node.js

# Check Node.js version
node --version  # Should be v18.0.0 or higher

# Check npm
npm --version

---

Installation Methods

MCP servers can be installed in two ways:

1. HTTP-based MCP Servers

• Hosted remotely
• No local installation required
• Just add URL to config
• Examples: Sentry, Astro Docs, Exa, Neon

2. Command-based MCP Servers

• Run locally via npm/npx
• More control and customization
• Examples: shadcn, custom servers

---

Installation by Editor

Claude Code

Configuration File Location

Claude Code stores MCP configuration in:

macOS/Linux

~/.config/claude/claude_desktop_config.json

Windows

%APPDATA%\Claude\claude_desktop_config.json

1. Create Configuration File

   If the file doesn’t exist, create it:

   macOS/Linux

   mkdir -p ~/.config/claude
   touch ~/.config/claude/claude_desktop_config.json

   Windows (PowerShell)

   New-Item -Path "$env:APPDATA\Claude" -ItemType Directory -Force
   New-Item -Path "$env:APPDATA\Claude\claude_desktop_config.json" -ItemType File

2. Add MCP Server Configuration

   Open the configuration file and add:

   claude_desktop_config.json

   {
     "mcpServers": {
       "sentry": {
         "type": "http",
         "url": "https://mcp.sentry.dev/mcp"
       },
       "astro-docs": {
         "type": "http",
         "url": "https://mcp.docs.astro.build/mcp"
       },
       "exa": {
         "type": "http",
         "url": "https://mcp.exa.ai/mcp",
         "headers": {}
       },
       "neon": {
         "type": "http",
         "url": "https://mcp.neon.tech/mcp"
       },
       "shadcn": {
         "command": "npx",
         "args": [
           "shadcn@latest",
           "mcp"
         ]
       }
     }
   }

3. Add API Keys Optional

   Some MCP servers require authentication. Add headers:

   claude_desktop_config.json

   {
     "mcpServers": {
       "exa": {
         "type": "http",
         "url": "https://mcp.exa.ai/mcp",
         "headers": {
           "Authorization": "Bearer YOUR_EXA_API_KEY"
         }
       },
       "neon": {
         "type": "http",
         "url": "https://mcp.neon.tech/mcp",
         "headers": {
           "Authorization": "Bearer YOUR_NEON_API_KEY"
         }
       }
     }
   }

4. Restart Claude Code

   macOS

   # Quit Claude Code completely (Cmd+Q)
   # Then relaunch from Applications

   Linux

   pkill claude-code
   claude-code

   Windows

   # Close Claude Code completely
   # Then restart from Start Menu

5. Verify Installation

   1. Open Claude Code
   2. Start a new conversation
   3. Type: “Can you access Astro documentation?”
   4. Claude should respond with access to Astro docs

---

Zed Editor

Configuration File Location

Zed stores MCP configuration in:

macOS/Linux

~/.config/zed/settings.json

Windows

%APPDATA%\Zed\settings.json

1. Open Zed Settings

   Command Palette

   Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   Type: "zed: open settings"

   Menu

   Zed > Settings > Open Settings (JSON)

   Keyboard Shortcut

   Cmd+, (macOS) or Ctrl+, (Windows/Linux)
   Click "Open settings.json" at bottom

2. Add MCP Configuration

   Add or merge this into your settings.json:

   settings.json

   {
     "assistant": {
       "version": "2",
       "provider": {
         "name": "anthropic",
         "default_model": {
           "model": "claude-3-5-sonnet-20241022"
         }
       }
     },
     "context_servers": {
       "sentry": {
         "type": "http",
         "url": "https://mcp.sentry.dev/mcp"
       },
       "astro-docs": {
         "type": "http",
         "url": "https://mcp.docs.astro.build/mcp"
       },
       "exa": {
         "type": "http",
         "url": "https://mcp.exa.ai/mcp",
         "headers": {}
       },
       "neon": {
         "type": "http",
         "url": "https://mcp.neon.tech/mcp"
       },
       "shadcn": {
         "command": "npx",
         "args": [
           "shadcn@latest",
           "mcp"
         ]
       }
     }
   }

3. Add API Keys Optional

   settings.json

   {
     "context_servers": {
       "exa": {
         "type": "http",
         "url": "https://mcp.exa.ai/mcp",
         "headers": {
           "Authorization": "Bearer YOUR_EXA_API_KEY"
         }
       }
     }
   }

4. Reload Zed

   Command Palette

   Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   Type: "zed: reload"

   Restart

   Completely close and restart Zed

5. Verify Installation

   1. Open Zed Assistant (Cmd+Shift+A or Ctrl+Shift+A)
   2. Ask: “Can you search the Astro documentation?”
   3. Assistant should confirm access to MCP servers

---

Visual Studio Code

Configuration with Continue Extension

VS Code uses MCP through the Continue extension.

1. Install Continue Extension

   VS Code Marketplace
   1. Open VS Code
   2. Click Extensions icon (Cmd+Shift+X)
   3. Search “Continue”
   4. Click “Install” on “Continue - AI Code Assistant”
   Command Line

   code --install-extension continue.continue

2. Configuration File Location

   Continue stores config in:

   macOS/Linux

   ~/.continue/config.json

   Windows

   %USERPROFILE%\.continue\config.json

3. Create/Edit Configuration

   Open the config file:

   Command Palette

   Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   Type: "Continue: Open Config"

   Manual (macOS/Linux)

   code ~/.continue/config.json

   Manual (Windows)

   code %USERPROFILE%\.continue\config.json

4. Add MCP Configuration

   Add to your config.json:

   config.json

   {
     "models": [
       {
         "title": "Claude 3.5 Sonnet",
         "provider": "anthropic",
         "model": "claude-3-5-sonnet-20241022",
         "apiKey": "YOUR_ANTHROPIC_API_KEY"
       }
     ],
     "contextProviders": [
       {
         "name": "mcp",
         "params": {
           "servers": {
             "sentry": {
               "type": "http",
               "url": "https://mcp.sentry.dev/mcp"
             },
             "astro-docs": {
               "type": "http",
               "url": "https://mcp.docs.astro.build/mcp"
             },
             "exa": {
               "type": "http",
               "url": "https://mcp.exa.ai/mcp",
               "headers": {}
             },
             "neon": {
               "type": "http",
               "url": "https://mcp.neon.tech/mcp"
             },
             "shadcn": {
               "command": "npx",
               "args": [
                 "shadcn@latest",
                 "mcp"
               ]
             }
           }
         }
       }
     ]
   }

5. Reload VS Code Window

   Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   Type: "Developer: Reload Window"

6. Verify Installation

   1. Open Continue chat (Cmd+Shift+L or Ctrl+Shift+L)
   2. Type: “@mcp Can you access Astro docs?”
   3. Continue should respond with MCP access

---

Recommended MCP Servers

1. Sentry MCP Server

Purpose: Error tracking and monitoring integration

Features:

• Query error logs
• Check issue status
• Get performance metrics
• Access release information

Configuration

{
  "sentry": {
    "type": "http",
    "url": "https://mcp.sentry.dev/mcp"
  }
}

Use Cases:

• “Show me recent errors in production”
• “What’s the error rate for the last deployment?”
• “Get details about error ID 123456”

API Key Required No (for public data), Yes (for private projects)

---

2. Astro Docs MCP Server

Purpose: Real-time access to Astro documentation

Features:

• Search Astro documentation
• Get latest API references
• Access guides and tutorials
• Query best practices

Configuration

{
  "astro-docs": {
    "type": "http",
    "url": "https://mcp.docs.astro.build/mcp"
  }
}

Use Cases:

• “How do I configure Astro for Cloudflare?”
• “What are the latest Astro 5 features?”
• “Show me Astro routing examples”

API Key Required No

---

3. Exa Search MCP Server

Purpose: AI-powered web search for developers

Features:

• Semantic code search
• Find technical documentation
• Discover libraries and tools
• Search GitHub repositories

Configuration

{
  "exa": {
    "type": "http",
    "url": "https://mcp.exa.ai/mcp",
    "headers": {
      "Authorization": "Bearer YOUR_EXA_API_KEY"
    }
  }
}

Use Cases:

• “Find React component libraries for dashboards”
• “Search for Tailwind CSS animation examples”
• “What are the best practices for Drizzle ORM?”

API Key Required Yes
Get API Key: https://exa.ai

---

4. Neon MCP Server

Purpose: PostgreSQL database management

Features:

• Query database schema
• Run SQL queries
• Manage database branches
• Monitor connection pools

Configuration

{
  "neon": {
    "type": "http",
    "url": "https://mcp.neon.tech/mcp",
    "headers": {
      "Authorization": "Bearer YOUR_NEON_API_KEY"
    }
  }
}

Use Cases:

• “Show me the schema for the users table”
• “Create a new database branch for testing”
• “What are the current connection pool stats?”

API Key Required Yes
Get API Key: https://neon.tech/dashboard > API Keys

---

5. shadcn MCP Server

Purpose: shadcn/ui component CLI integration

Features:

• Browse available components
• Get component installation commands
• Access component documentation
• Check component dependencies

Configuration

{
  "shadcn": {
    "command": "npx",
    "args": [
      "shadcn@latest",
      "mcp"
    ]
  }
}

Use Cases:

• “How do I add the dialog component?”
• “What shadcn components are available?”
• “Show me the button component documentation”

API Key Required No

Note

Requires npx and internet connection

---

Getting API Keys

Exa API Key

1. Visit https://exa.ai
2. Click “Sign Up” or “Get API Key”
3. Create account (GitHub sign-in available)
4. Navigate to Dashboard > API Keys
5. Click “Create New API Key”
6. Copy the key (starts with exa_)

Free Tier 1,000 requests/month

Neon API Key

1. Visit https://neon.tech
2. Sign in to your account
3. Go to Account Settings > API Keys
4. Click “Create API Key”
5. Give it a name (e.g., “MCP Server”)
6. Copy the key

Free Tier 10 GB storage, 100 hours compute/month

Sentry API Key Optional

1. Visit https://sentry.io
2. Sign in to your organization
3. Go to Settings > Developer Settings > Auth Tokens
4. Click “Create New Token”
5. Select scopes: project:read, event:read
6. Copy the token

Free Tier 5,000 events/month

---

Advanced Configuration

Environment Variables for API Keys

Instead of hardcoding API keys, use environment variables:

Claude Code

claude_desktop_config.json

{
  "mcpServers": {
    "exa": {
      "type": "http",
      "url": "https://mcp.exa.ai/mcp",
      "headers": {
        "Authorization": "Bearer ${EXA_API_KEY}"
      }
    }
  }
}

Set environment variables:

macOS/Linux

# Add to ~/.zshrc or ~/.bashrc
export EXA_API_KEY="your_key_here"

Windows

# System Environment Variables
setx EXA_API_KEY "your_key_here"

Zed Editor

Zed automatically reads from environment variables:

settings.json

{
  "context_servers": {
    "exa": {
      "type": "http",
      "url": "https://mcp.exa.ai/mcp",
      "headers": {
        "Authorization": "Bearer ${EXA_API_KEY}"
      }
    }
  }
}

VS Code (Continue)

Use .env file in your project:

.env

# .env
EXA_API_KEY=your_key_here
NEON_API_KEY=your_key_here

Reference in config.json:

config.json

{
  "contextProviders": [
    {
      "name": "mcp",
      "params": {
        "servers": {
          "exa": {
            "headers": {
              "Authorization": "Bearer ${EXA_API_KEY}"
            }
          }
        }
      }
    }
  ]
}

---

Troubleshooting

Issue: MCP Server Not Working

Symptoms

• AI assistant doesn’t recognize MCP commands
• “MCP server not found” errors
• No response from MCP queries

Solutions

1. Check Configuration File Syntax

# Validate JSON syntax
cat ~/.config/claude/claude_desktop_config.json | jq .

2. Verify Server URLs

# Test HTTP MCP servers
curl -I https://mcp.docs.astro.build/mcp
# Should return 200 OK

3. Check API Keys

# Test with curl
curl -H "Authorization: Bearer YOUR_API_KEY" https://mcp.exa.ai/mcp

4. Restart Editor Completely Fully quit and restart (not just reload)

Issue: Command-based MCP Fails

Symptoms

• shadcn MCP server not responding
• “Command not found” errors

Solutions

1. Check Node.js/npm Installation

node --version
npm --version
npx --version

2. Test Command Manually

npx shadcn@latest mcp
# Should show MCP server output

3. Update npm/npx

npm install -g npm@latest

Issue: Slow MCP Response

Symptoms

• Long wait times for MCP queries
• Timeouts

Solutions

1. Check Network Connection
2. Verify Server Status - Check service status pages
3. Use Local MCP Servers - Host your own for better performance

---

MCP Servers Comparison

Server	Type	API Key	Free Tier	Best For
Sentry	HTTP	Optional	5k events/mo	Error tracking
Astro Docs	HTTP	No	Unlimited	Astro development
Exa	HTTP	Yes	1k searches/mo	Code search
Neon	HTTP	Yes	10GB/100hrs	Database queries
shadcn	Command	No	Unlimited	UI components

---

Best Practices

Best Practices

1. Use Environment Variables for API Keys

# Never commit API keys to git
echo "*.env" >> .gitignore

2. Start with HTTP-based Servers

• Easier to configure
• No local dependencies
• Faster to troubleshoot

3. Enable Only Needed Servers

// Don't add servers you don't use
// Reduces startup time and API calls
{
  "mcpServers": {
    "astro-docs": { /* only if using Astro */ }
  }
}

4. Monitor API Usage

• Check dashboard for rate limits
• Upgrade plan if needed
• Use caching when possible

5. Keep Configuration Backed Up

# Backup your config
cp ~/.config/claude/claude_desktop_config.json ~/backup/

---

Next Steps

After installing MCP servers:

1. Test Each Server

   • Ask AI to query each MCP server
   • Verify responses are accurate

2. Explore Capabilities

   • Try different queries
   • Learn what each server can do

3. Integrate into Workflow

   • Use MCP servers in daily coding
   • Create custom workflows

4. Build Custom MCP Servers

   • Learn MCP protocol
   • Create server for your tools

---

Additional Resources

Official Documentation

MCP Specification Learn about the Model Context Protocol

Claude Code MCP Guide Official Claude Code documentation

Zed MCP Documentation Context servers in Zed editor

Continue Extension Docs VS Code AI assistant documentation

MCP Server Directories

Official MCP Servers Collection of official MCP server implementations

Awesome MCP Servers Curated list of community MCP servers

Tutorials

Building Custom MCP Servers Learn to create your own MCP servers

MCP Best Practices Recommended patterns and practices

---

Quick Reference

Claude Code Config Location

macOS/Linux

~/.config/claude/claude_desktop_config.json

Windows

%APPDATA%\Claude\claude_desktop_config.json

Zed Config Location

macOS/Linux

~/.config/zed/settings.json

Windows

%APPDATA%\Zed\settings.json

VS Code (Continue) Config Location

macOS/Linux

~/.continue/config.json

Windows

%USERPROFILE%\.continue\config.json

Minimal Working Configuration

Minimal config

{
  "mcpServers": {
    "astro-docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

---

Conclusion

You now have MCP servers configured for your AI coding assistant! This enables:

• Real-time documentation access
• External tool integration
• Enhanced AI capabilities
• More productive coding

Tip

Start by asking your AI assistant to query the MCP servers and explore their capabilities!

Happy coding with MCP!