Switch language to العربية

MCP

Model Context Protocol for AI coding. Connect Claude to external tools and data sources.

What is MCP?

Model Context Protocol (MCP) is an open protocol that allows AI assistants to connect to external tools, databases, and services. It enables Claude to take actions beyond text generation.

Tools

Functions that Claude can call: database queries, API requests, file operations.

Resources

Data that Claude can read: files, database records, API responses.

Official MCP Servers

ServerPackageUse Case
GitHub@modelcontextprotocol/server-githubPRs, issues, repos
PostgreSQL@modelcontextprotocol/server-postgresDatabase queries
Filesystem@modelcontextprotocol/server-filesystemFile operations
Browser@anthropics/mcp-browserWeb automation
shadcn@anthropics/mcp-shadcnComponent registry
Neon@anthropics/mcp-neonServerless Postgres

Configuration

Configure MCP servers in Claude Desktop or Claude Code.

claude_desktop_config.jsonjson
// claude_desktop_config.json (macOS: ~/Library/Application Support/Claude/)
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxx"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@host:5432/db"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    },
    "browser": {
      "command": "npx",
      "args": ["-y", "@anthropics/mcp-browser"]
    }
  }
}

Claude Code MCP

Enable MCP servers in Claude Code settings.

.claude/settings.jsonjson
// .claude/settings.json - Enable MCP in Claude Code
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "@anthropics/mcp-shadcn"]
    },
    "neon": {
      "command": "npx",
      "args": ["-y", "@anthropics/mcp-neon"],
      "env": {
        "NEON_API_KEY": "your-api-key"
      }
    }
  }
}

Custom MCP Server

Build your own MCP server for project-specific tools.

index.tstypescript
// .claude/mcp-servers/custom/src/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

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

// Define a tool
server.setRequestHandler("tools/list", async () => ({
  tools: [{
    name: "generate_report",
    description: "Generate a custom report",
    inputSchema: {
      type: "object",
      properties: {
        type: { type: "string", enum: ["pdf", "docx"] },
        data: { type: "object" }
      },
      required: ["type", "data"]
    }
  }]
}));

// Handle tool calls
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "generate_report") {
    const { type, data } = request.params.arguments;
    // Generate report logic
    return { content: [{ type: "text", text: "Report generated" }] };
  }
});

// Start server
const transport = new StdioServerTransport();
await server.connect(transport);

Resources