MCP Servers

Model Context Protocol (MCP) servers extend AI coding agents with specialized capabilities like accessing documentation, interacting with APIs, and automating workflows.

What is MCP?

MCP is an open protocol that allows AI agents to connect to external tools and data sources. Think of it as plugins for your AI assistant - each MCP server provides specific capabilities that enhance what your AI can do.

Configuration

Most AI agents that support MCP have built-in configuration interfaces. The exact setup varies by tool:

• Cursor: Settings → Features → Model Context Protocol
• Windsurf: Settings → MCP Servers
• Claude Desktop: Edit claude_desktop_config.json
• Kiro: Create .kiro/settings/mcp.json

Recommended MCP Servers

Here are some powerful MCP servers to enhance your development workflow:

Clerk SDK Snippets

Get instant access to Clerk authentication code snippets and patterns.

What it does:

• Provides ready-to-use Clerk SDK code snippets
• Offers authentication patterns and examples
• Includes B2B SaaS bundles and organization management patterns

Setup:

{
  "mcpServers": {
    "clerk": {
      "command": "npx",
      "args": ["-y", "@clerk/mcp-server-clerk"]
    }
  }
}

Example prompts:

• "Show me the b2b-saas bundle from Clerk"
• "Get Clerk useUser hook example"
• "Show me organization management patterns"

Context7 Documentation

Access up-to-date documentation for any library or framework.

What it does:

• Fetches latest documentation from thousands of libraries
• Provides code examples and API references
• Keeps you updated with current best practices

Setup:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"]
    }
  }
}

Example prompts:

• "Search Context7 for Stripe webhook handling"
• "Get Prisma transaction documentation"
• "Look up Tailwind CSS 4 features"

Next.js DevTools

Deep integration with Next.js development server for runtime insights.

What it does:

• Connects to your running Next.js dev server
• Provides real-time error diagnostics
• Shows route information and build status
• Enables cache management

Setup:

{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-nextjs"]
    }
  }
}

npm run dev

Example prompts:

• "What routes are available in my Next.js app?"
• "Check for compilation errors"
• "Clear Next.js cache"
• "Show me runtime diagnostics"

Figma Integration

Connect Figma designs to your codebase for design-to-code workflows.

What it does:

• Fetches Figma file data (layouts, content, styles)
• Downloads images and assets
• Helps maintain design-code consistency

Setup:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

Example prompts:

• "Get data from Figma file [file-key]"
• "Download images from Figma design"
• "Show me the layout structure from Figma"

Complete Configuration Example

Here's a full MCP configuration with all recommended servers. Add this to your AI agent's MCP settings:

{
  "mcpServers": {
    "clerk": {
      "command": "npx",
      "args": ["-y", "@clerk/mcp-server-clerk"],
      "disabled": false
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"],
      "disabled": false
    },
    "nextjs-devtools": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-nextjs"],
      "disabled": false
    },
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your-token-here"
      },
      "disabled": false
    }
  }
}

Configuration Options

Each MCP server supports these options:

• command: The executable to run (usually npx or uvx)
• args: Arguments passed to the command
• env: Environment variables (API keys, tokens)
• disabled: Set to true to temporarily disable a server
• autoApprove: Array of tool names to auto-approve (skip confirmation)

Auto-Approve Tools

To skip confirmation prompts for specific tools:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/mcp-server"],
      "autoApprove": ["query-docs", "resolve-library-id"]
    }
  }
}

Managing MCP Servers

Reconnect Servers

After changing your MCP configuration, reload servers in your AI agent:

• Cursor/Windsurf: Command Palette → "Reconnect MCP Servers"
• Claude Desktop: Restart the application
• Kiro: Command Palette → "Reconnect MCP Servers"

Disable a Server

Set disabled: true to temporarily turn off a server:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "disabled": true
    }
  }
}

View Active Servers

Most AI agents have a way to view active MCP servers:

• Cursor/Windsurf/Kiro: Command Palette → "View MCP Servers"
• Claude Desktop: Check the MCP section in settings

Troubleshooting

Best Practices

1. Start with essential servers: Don't install every MCP server - start with ones you'll actually use
2. Keep API keys secure: Never commit tokens to git - use environment variables or local configs
3. Use project-specific configs when needed: Some AI agents support workspace-level MCP configs for project-specific servers
4. Auto-approve trusted tools: If your AI agent supports it, add frequently-used, safe tools to auto-approve lists
5. Test after setup: Always test a new MCP server with a simple prompt to verify it's working

Next Steps

• AI Agent Setup - Configure AI agent context files
• Environment Variables - Manage secrets and config
• IDE Setup - Configure your development environment