MCP Components

MCPs (Model Context Protocol servers) enable Claude Code to integrate with external services, databases, APIs, and tools. They extend Claude’s capabilities beyond the local codebase.

Browse All MCPs

Explore 65+ MCP integrations at aitmpl.com

Installation

# Install a single MCP
npx claude-code-templates@latest --mcp neon

# Install multiple MCPs
npx claude-code-templates@latest --mcp neon --mcp supabase --mcp web-fetch

# Install from specific category
npx claude-code-templates@latest --mcp database/neon

MCP Categories

Database MCPs

Connect to databases and manage data:

Neon

Neon serverless Postgres integration

npx claude-code-templates@latest --mcp neon

Features:

Query databases directly
Manage schemas and migrations
Access Neon Management API

Supabase

Supabase platform integration

npx claude-code-templates@latest --mcp supabase

Features:

Database operations
Authentication management
Storage and realtime

PostgreSQL

Direct PostgreSQL database access

npx claude-code-templates@latest --mcp postgresql-integration

MySQL

MySQL database integration

npx claude-code-templates@latest --mcp mysql-integration

Web MCPs

Fetch and interact with web content:

Web Fetch

Fetch and parse web content

npx claude-code-templates@latest --mcp web-fetch

Features:

HTTP requests
HTML parsing
Content extraction

Web Reader

Read and analyze web pages

npx claude-code-templates@latest --mcp web-reader

Web Search Prime

Advanced web search capabilities

npx claude-code-templates@latest --mcp web-search-prime

ZRead

Enhanced web content reading

npx claude-code-templates@latest --mcp zread

Browser Automation MCPs

Automate browser interactions and web scraping:

Puppeteer

Browser automation with Puppeteer

npx claude-code-templates@latest --mcp puppeteer

Features:

Page navigation
Form filling
Screenshot capture
PDF generation

Productivity MCPs

Task management, notes, and workflow automation:

Todoist

Todoist task management integration

npx claude-code-templates@latest --mcp todoist

Notion

Notion workspace integration

npx claude-code-templates@latest --mcp notion

Development Tools MCPs

Developer utilities and integrations:

GitHub

GitHub API integration

npx claude-code-templates@latest --mcp github

Features:

Repository management
Issue tracking
Pull request automation

Docker

Docker container management

npx claude-code-templates@latest --mcp docker

Audio MCPs

Audio processing and transcription:

Whisper

Audio transcription with OpenAI Whisper

npx claude-code-templates@latest --mcp whisper

Marketing MCPs

Marketing automation and analytics:

Google Analytics

Google Analytics data access

npx claude-code-templates@latest --mcp google-analytics

MCP Configuration

MCPs are configured in .claude/.mcp.json:

{
  "mcpServers": {
    "Neon": {
      "description": "MCP server for Neon database",
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.neon.tech/mcp"]
    }
  }
}

How MCPs Work

Installation: MCP configuration is added to .mcp.json
Startup: Claude Code loads configured MCPs on launch
Tool Access: MCPs expose tools that Claude can use
Execution: When Claude uses an MCP tool, it communicates with the external service

Environment Variables

Many MCPs require API keys or credentials:

# In your .env file
NEON_API_KEY=your_api_key
SUPABASE_URL=your_project_url
SUPABASE_KEY=your_service_key
GITHUB_TOKEN=your_github_token

Example Usage

# Install Neon MCP
npx claude-code-templates@latest --mcp neon

# Add your Neon API key to .env
echo "NEON_API_KEY=your_key" >> .env

# In Claude Code chat:
# "Query my Neon database for all users"
# "Create a new branch in my Neon project"

Browse Components

Featured Categories

MCP Components

MCP Components

Browse All MCPs

Installation

MCP Categories

Database MCPs

Neon

Supabase

PostgreSQL

MySQL

Web MCPs

Web Fetch

Web Reader

Web Search Prime

ZRead

Browser Automation MCPs

Puppeteer

Productivity MCPs

Todoist

Notion

Development Tools MCPs

GitHub

Docker

Audio MCPs

Whisper

Marketing MCPs

Google Analytics

MCP Configuration

How MCPs Work

Environment Variables

Example Usage

Popular MCPs

Neon

Supabase

Web Fetch

GitHub

Next Steps

​MCP Components

Browse All MCPs

​Installation

​MCP Categories

​Database MCPs

Neon

Supabase

PostgreSQL

MySQL

​Web MCPs

Web Fetch

Web Reader

Web Search Prime

ZRead

​Browser Automation MCPs

Puppeteer

​Productivity MCPs

Todoist

Notion

​Development Tools MCPs

GitHub

Docker

​Audio MCPs

Whisper

​Marketing MCPs

Google Analytics

​MCP Configuration

​How MCPs Work

​Environment Variables

​Example Usage

​Popular MCPs

​Neon

​Supabase

​Web Fetch

​GitHub

​Next Steps

MCP Components

Installation

MCP Categories

Database MCPs

Web MCPs

Browser Automation MCPs

Productivity MCPs

Development Tools MCPs

Audio MCPs

Marketing MCPs

MCP Configuration

How MCPs Work

Environment Variables

Example Usage

Popular MCPs

Neon

Supabase

Web Fetch

GitHub

Next Steps