Digital Agency

ANF STUDIO

0%
BACK TO BLOG
Custom DevApr 5, 202511 min read

MCP (Model Context Protocol): How to Add Superpowers to AI in Your Code Editor

MCP is the open standard that lets AI models connect to databases, APIs, file systems, and tools. Learn how to create and add MCP servers to Claude Code, Cursor, and VS Code.

MCP (Model Context Protocol): How to Add Superpowers to AI in Your Code Editor

What Is MCP (Model Context Protocol)?

MCP — Model Context Protocol — is an open standard created by Anthropic that lets AI models connect to external tools, data sources, and services. Think of it as a "USB port" for AI: a universal way to plug in new capabilities.

Without MCP, AI assistants are limited to what they know from training data. With MCP, they can:

  • Query your database in real-time
  • Call external APIs (Slack, GitHub, Jira, etc.)
  • Read and write files beyond the local filesystem
  • Access private knowledge bases and documentation
  • Control external services (deploy, monitor, alert)

How MCP Works

#

The Architecture

MCP uses a client-server model: MCP Client (your AI tool — Claude Code, Cursor, VS Code):

  • Discovers available MCP servers
  • Sends requests to servers
  • Presents results to the AI model
MCP Server (your custom code):
  • Exposes "tools" (functions the AI can call)
  • Exposes "resources" (data the AI can read)
  • Handles requests and returns results
Communication: Uses JSON-RPC over stdio (local) or HTTP/SSE (remote)

#

What MCP Servers Provide

Tools: Functions the AI can call
  • query_database(sql) — run a SQL query
  • create_jira_ticket(title, description) — create a ticket
  • send_slack_message(channel, text) — post to Slack
  • deploy_to_staging() — trigger a deployment
Resources: Data the AI can read
  • Database schemas
  • API documentation
  • Configuration files
  • Live system metrics
Prompts: Pre-built prompt templates
  • Reusable instruction sets
  • Domain-specific workflows
  • Best practice templates

Building Your First MCP Server

#

Step 1: Setup

Create a new Node.js project for your MCP server. Install the MCP SDK from npm — the package is called @modelcontextprotocol/sdk.

Initialize your server with a name and version.

#

Step 2: Define Tools

Each tool needs:

  • name: What the AI calls it (e.g., "query_database")
  • description: What it does (AI uses this to decide when to call it)
  • inputSchema: JSON Schema defining the parameters
  • handler: The function that runs when called
Example: Database Query Tool Define a tool named "query_database" with a description like "Execute a read-only SQL query against the production database." The input schema requires a "sql" parameter of type string.

The handler function: 1. Receives the SQL query from the AI 2. Connects to your database 3. Executes the query (with safety checks — read-only!) 4. Returns the results as formatted text Example: Slack Notification Tool Define a tool named "send_slack_message" that takes a channel and message text. The handler uses the Slack Web API to post the message and returns a confirmation.

#

Step 3: Define Resources

Resources expose data the AI can read without calling a function: Example: Database Schema Resource Expose your database schema so the AI knows your table structure when writing queries. The resource URI might be "db://schema" and it returns your CREATE TABLE statements. Example: API Documentation Resource Expose your internal API docs so the AI can reference them when building integrations.

#

Step 4: Connect to Your Editor

##

Claude Code

Add MCP servers to your Claude Code configuration. In your project's .claude/settings.json or global settings, add:

mcpServers configuration with:

  • Server name (e.g., "my-database")
  • Command to start it (e.g., "node")
  • Args pointing to your server file
  • Environment variables (database URL, API keys)
Restart Claude Code and it auto-discovers the tools.

##

Cursor

Cursor supports MCP through its settings. Add the MCP server configuration in Cursor's settings panel under the MCP section. Same format — command, args, environment variables.

##

VS Code (with Copilot)

VS Code is adding MCP support in 2025. Configuration goes in .vscode/settings.json under the MCP section.

Practical MCP Server Examples

#

1. Shopify Store MCP Server

Give your AI access to your Shopify store: Tools:
  • get_orders(status, date_range) — fetch recent orders
  • get_product(id) — get product details
  • update_inventory(product_id, quantity) — adjust stock
  • get_analytics(metric, period) — revenue, traffic, conversion
Use case: Ask Claude "What were our top 5 products by revenue this week?" and it queries your Shopify store directly.

#

2. Project Management MCP Server

Connect to Jira, Linear, or Asana: Tools:
  • create_ticket(title, description, priority)
  • update_ticket(id, status)
  • get_sprint_status()
  • assign_ticket(id, user)
Use case: "Create a bug ticket for the checkout page crash on mobile" — Claude creates it directly in your project management tool.

#

3. Deployment MCP Server

Automate your CI/CD: Tools:
  • deploy(environment, branch)
  • get_deploy_status(deploy_id)
  • rollback(environment)
  • get_logs(service, lines)
Use case: "Deploy the main branch to staging and show me the last 50 log lines" — Claude handles the entire process.

#

4. Documentation MCP Server

Give AI access to your internal docs: Resources:
  • Architecture decision records
  • API specifications (OpenAPI)
  • Runbooks and playbooks
  • Team conventions and standards
Use case: "How does our authentication flow work?" — Claude reads your internal docs and explains accurately.

#

5. Monitoring MCP Server

Connect to your observability stack: Tools:
  • get_metrics(service, metric, timerange)
  • get_alerts(status)
  • get_error_logs(service, level, count)
  • create_incident(title, severity)
Use case: "Are there any critical alerts right now? Show me error logs from the payment service" — Claude checks your monitoring in real-time.

Security Best Practices

#

Authentication

  • Store API keys in environment variables, never in code
  • Use service accounts with minimal permissions
  • Rotate keys regularly
  • Use OAuth for user-specific access
#

Authorization

  • Implement read-only by default
  • Add explicit write permission checks
  • Log all tool invocations
  • Rate limit dangerous operations
#

Data Safety

  • Never expose production write access in development
  • Sanitize SQL queries to prevent injection
  • Validate all inputs in tool handlers
  • Don't log sensitive data (passwords, tokens)
#

Network Security

  • Use stdio transport for local-only servers
  • Use HTTPS for remote MCP servers
  • Whitelist allowed endpoints
  • Implement request signing

MCP Ecosystem in 2025

#

Official MCP Servers

Anthropic and the community maintain servers for:
  • Filesystem: Read/write files
  • GitHub: Issues, PRs, repos
  • Slack: Messages, channels
  • PostgreSQL: Database queries
  • Google Drive: Documents, sheets
  • Brave Search: Web search
#

Community MCP Servers

Growing ecosystem of community-built servers:
  • MongoDB, MySQL, Redis connectors
  • AWS, GCP, Azure management
  • Figma, Linear, Notion integrations
  • Custom CMS connectors
#

The MCP Hub

A registry of available MCP servers — like npm for AI tool integrations. Browse, install, and configure servers with minimal setup.

The Future of MCP

MCP is becoming the standard for AI-tool integration:

  • More editors adopting it: VS Code, JetBrains, Zed are all adding support
  • Remote MCP servers: Run servers in the cloud, connect from anywhere
  • MCP marketplaces: Install pre-built integrations with one click
  • Composable AI workflows: Chain multiple MCP servers for complex operations
  • Enterprise MCP: Managed MCP infrastructure for teams

Getting Started Checklist

1. Identify your use case: What data/tools should your AI have access to? 2. Start simple: Build one tool that solves one real problem 3. Test locally: Use stdio transport for development 4. Add security: Auth, rate limiting, input validation 5. Document: Describe what each tool does and when to use it 6. Share with team: Version control your MCP servers 7. Iterate: Add more tools based on team feedback Need help building custom MCP servers for your development workflow? Let's build your AI toolkit.

Ready to Start Your Project?

Let's bring your vision to life. Get in touch with our team to discuss your requirements.

GET IN TOUCH