Claude + MCP Explained

Claude + MCP Explained | CampusX

Overview

This video is a practical deep dive into integrating Model Context Protocol (MCP) servers with Claude Code. Unlike the earlier architectural overview, this session demonstrates three MCP servers end-to-end and catalogs seven additional production-ready servers.

What MCP Solves

Before MCP, connecting an LLM to external tools required custom, non-standardized code. Any API change from the service provider broke the integration. MCP acts as a universal connector — an open standard by Anthropic that standardizes how AI models communicate with external data sources, tools, and services.

Three MCP Servers Demonstrated

1. SQLite MCP Server (Database Exploration)

• Replaces the failed db-hub server (incompatible with local SQLite)
• Connect via npx command pointing to the .db file path
• Natural language queries: list tables, inspect schemas, run grouped aggregations
• Eliminates the need to write SQL or Python code for database exploration
• Supports MySQL, PostgreSQL, and SQLite
• Key insight: In large projects with 15–20 tables, MCP lets you understand schema relationships on the fly

2. Figma MCP Server (Design-to-Code)

• Installed as a plugin (bundles MCP server + Skills)
• Requires Figma account OAuth authentication
• Workflow: paste Figma design URL → Claude reads design → generates matching HTML/CSS/JS
• Demonstrated creating a “Coming Soon” analytics page from a Figma wireframe
• Plugin architecture: A plugin is a package that can contain MCP servers, Skills, Agents, and Hooks together

3. GitHub MCP Server (Repository Automation)

• Requires a Personal Access Token (PAT) with fine-grained permissions
• Setup: generate PAT on GitHub → set environment variables → add HTTP MCP server
• Capabilities: query repositories, list issues, summarize PRs, create/merge PRs
• Demonstrated automated PR workflow: commit → push → create PR → squash merge → delete branch
• Gotcha: PAT must explicitly include PR write permissions; otherwise the flow breaks at PR creation

Top 10 MCP Servers Catalog

Server	Purpose
SQLite/Database	Natural language database queries
Figma	Design-to-code workflow
GitHub	Repository management, PR automation
Context7	Live, up-to-date documentation for any library/framework
Jira	Pull tickets, find bugs, implement features from Jira context
Notion	Read product specs, API design docs directly from Notion
Slack	Post PR links, check incident channels, read production errors
AWS	Deploy to EC2, check CloudWatch logs, manage infrastructure
Docker	Generate optimized Dockerfiles, analyze image size, manage containers
Figma (repeated as top pick)	Design system integration

Critical Warning: MCP Context Bloat

This is the most important takeaway: Each MCP server loads its tool descriptions into the context window at session start. Connecting too many servers fills the context with unnecessary description text, degrading model performance. The recommendation is to keep MCP server usage minimal — only retain servers you actively use and remove the rest.

MCP Management Commands

• /mcp — list all connected MCP servers and their status (Connected/Failed)
• claude mcp remove <server-name> — remove an MCP server
• View tools per server — select a server in /mcp → “View Tools” → inspect capabilities

Plugins Architecture

Plugins are a higher-level packaging mechanism that can bundle:

• MCP servers
• Skills
• Agents
• Hooks

The Figma plugin demonstrated this pattern — installing one plugin provided both the MCP server and associated Skills for common Figma workflows.

Related

• Model Context Protocol (MCP)
• Claude Code
• Context Engineering
• Claude Skills
• Agentic Workflows
• CampusX

See Also

Wiki Concepts

• Model Context Protocol — core architecture, top 10 server catalog, context bloat warning, plugin architecture
• Claude Code — MCP integration section updated with server list and context bloat note
• Context Engineering — MCP context loading as automatic context injection, bloat as anti-pattern
• Claude Skills — plugins as bundled capability packages (MCP + Skills + Agents + Hooks)
• Agentic Workflows — MCP-enabled workflows (Figma→Code, GitHub PR automation, Slack notifications)
• Agent-Native SDLC — GitHub MCP for automated PR/merge pipeline
• LLM Observability — MCP context bloat as observability concern
• Agent Memory Systems — MCP servers as live external memory sources
• Claude SubAgents — MCP scoping to prevent context pollution
• Custom Subagent Design Patterns — MCP-scoped subagent patterns (db-analyst)
• Minimalist Agent Design — “four MCP servers, not forty” aligns with minimalist philosophy
• AI Security — MCP token security, PAT permission scoping

Related Sources

• Claude Code & MCP: The AI USB-C Standard — earlier architectural overview of MCP
• Claude Custom Subagents: Build Your Own AI Workers — MCP scoping in subagent frontmatter

Creator / Entity

• CampusX — part of the Claude Code playlist series