📚guidebeginner

Windsurf MCP Programming: Complete Video Tutorial Guide (2025)

Learn Windsurf MCP programming with curated video tutorials, code examples, and step-by-step guides. Build custom MCP servers, debug workflows, and master AI-assisted development.

ByMCP Directory Team
Published
⏱️30 minutes
windsurfmcpprogrammingvideo-tutorialsdevelopmentcascadeai-codingmcp-servercustom-serverswindsurf-programming

Windsurf MCP Programming: Complete Video Tutorial Guide

What you'll learn: How to program with Windsurf and MCP—from configuring servers to building custom integrations. Includes curated video resources, code patterns, and hands-on examples.

Introduction to Windsurf + MCP Development

Windsurf (formerly Codeium) is an AI-native IDE that uses "Cascade"—an AI agent that can read, write, and execute code. When combined with MCP (Model Context Protocol), Windsurf becomes exponentially more powerful, connecting to databases, APIs, file systems, and external services.

This guide covers everything you need to start programming with Windsurf and MCP, including video tutorials and practical code examples.

Getting Started: Quick Setup

Before diving into programming, ensure Windsurf is configured for MCP:

Enable MCP in Windsurf

  1. Open Windsurf
  2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
  3. Type "Windsurf: Configure MCP Servers"
  4. This opens your mcp_config.json file

Your First MCP Configuration

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    }
  }
}

Save the file and restart Windsurf to activate.

Video Learning Resources

Official & Curated Video Tutorials

While MCP is relatively new, several quality tutorials exist:

| Resource | Platform | Level | Topics Covered | |----------|----------|-------|----------------| | Windsurf University | Official | Beginner | MCP basics, first server setup | | Building MCP Servers | Blog + Code | Intermediate | Custom server development | | AI Coding with MCP | Tutorial | Beginner | Step-by-step MCP setup | | Azure MCP + Windsurf | Microsoft Learn | Intermediate | Cloud integration |

YouTube Channels to Follow

Search these channels for MCP-related content:

  • Codeium Official - Windsurf announcements and tutorials
  • AI Coding Channels - Often cover Windsurf + MCP workflows
  • Developer productivity - Many feature AI IDE comparisons

Finding Videos: Pro Tips

Search YouTube for:

  • "Windsurf MCP tutorial 2025"
  • "Cascade AI coding tutorial"
  • "MCP server Windsurf setup"
  • "AI-assisted coding Windsurf"

Programming Patterns with Windsurf + MCP

Pattern 1: Database-Driven Development

Connect Windsurf to your database for AI-assisted SQL:

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgresql"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
      }
    }
  }
}

Example prompts:

  • "Show me the schema for the users table"
  • "Write a migration to add an email_verified column"
  • "Query the last 10 orders with customer details"

Pattern 2: Git-Integrated Workflow

Let Cascade manage version control:

{
  "mcpServers": {
    "git": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-git", "/path/to/repo"]
    }
  }
}

Example prompts:

  • "Stage all changes and commit with a descriptive message"
  • "Create a new feature branch for user-authentication"
  • "Show me the diff from the last 3 commits"

Pattern 3: API Development with Live Testing

Combine filesystem access with HTTP testing:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    },
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    }
  }
}

Example prompts:

  • "Test the /api/users endpoint and show me the response"
  • "Create a new endpoint for user registration"
  • "Debug why the POST request is returning 401"

Pattern 4: Documentation-Driven Development

Access external docs while coding:

{
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your-api-key"
      }
    }
  }
}

Example prompts:

  • "Search for Next.js 15 App Router documentation"
  • "Find examples of React Server Components"
  • "Look up the latest TypeScript 5.x features"

Building Your First Custom MCP Server

For advanced workflows, create custom MCP servers. Here's a Python example:

Step 1: Project Setup

mkdir my-mcp-server
cd my-mcp-server
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install mcp

Step 2: Basic Server Code

Create server.py:

from mcp import Server
from mcp.types import Tool, TextContent

server = Server("my-custom-server")

@server.tool("greet_user")
async def greet_user(name: str) -> list[TextContent]:
    """Greet a user by name"""
    return [TextContent(
        type="text",
        text=f"Hello, {name}! Welcome to my custom MCP server."
    )]

@server.tool("calculate")
async def calculate(expression: str) -> list[TextContent]:
    """Safely evaluate a mathematical expression"""
    try:
        result = eval(expression, {"__builtins__": {}}, {})
        return [TextContent(type="text", text=f"Result: {result}")]
    except Exception as e:
        return [TextContent(type="text", text=f"Error: {str(e)}")]

if __name__ == "__main__":
    server.run()

Step 3: Configure in Windsurf

{
  "mcpServers": {
    "my-custom": {
      "command": "python",
      "args": ["/path/to/my-mcp-server/server.py"]
    }
  }
}

Step 4: Test Your Server

In Windsurf's Cascade pane:

  • "Greet me with my name John"
  • "Calculate 15 * 7 + 23"

Debugging & Testing Workflows

Check Server Status

  1. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
  2. Type "Developer: Toggle Developer Tools"
  3. Check Console for MCP connection messages

Common Debug Patterns

Test MCP connection:

"List all available MCP tools"

Verify specific server:

"What tools does the filesystem server provide?"

Check for errors:

"Check if the postgres server is connected"

Logging for Custom Servers

Add logging to debug issues:

import logging

logging.basicConfig(level=logging.DEBUG)
logger = logging.getLogger(__name__)

@server.tool("my_tool")
async def my_tool(param: str):
    logger.debug(f"Tool called with param: {param}")
    # ... tool logic

Real-World Project Examples

Example 1: Full-Stack Development Setup

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/projects/my-app"]
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgresql"],
      "env": {"DATABASE_URL": "postgresql://localhost:5432/myapp"}
    },
    "git": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-git", "/projects/my-app"]
    }
  }
}

Workflow:

  1. "Create a new user model with email, password, and created_at fields"
  2. "Generate the SQL migration for the users table"
  3. "Build the API endpoint for user registration"
  4. "Stage and commit these changes"

Example 2: Data Analysis Pipeline

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/data"]
    },
    "sqlite": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite", "/data/analytics.db"]
    }
  }
}

Workflow:

  1. "Read the sales_data.csv file and show me the structure"
  2. "Create a SQLite table for this data"
  3. "Import the CSV into the database"
  4. "Query for top 10 products by revenue"

Example 3: API Integration Testing

{
  "mcpServers": {
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/tests"]
    }
  }
}

Workflow:

  1. "Fetch the response from https://api.example.com/health"
  2. "Test the /api/users endpoint with a POST request"
  3. "Save the response to tests/api_responses.json"
  4. "Compare with expected output"

Troubleshooting

Server Not Starting

Symptoms: MCP server doesn't appear in Cascade

Solutions:

  1. Verify Node.js is installed: node --version
  2. Check paths are correct in config
  3. Restart Windsurf after config changes
  4. Check Developer Tools console for errors

Tools Not Available

Symptoms: Cascade doesn't recognize MCP commands

Solutions:

  1. Confirm server is running (check logs)
  2. Ask: "List all MCP tools" to verify connection
  3. Ensure environment variables are set correctly

Slow Responses

Symptoms: MCP operations take too long

Solutions:

  1. Reduce scope of filesystem access
  2. Optimize database queries
  3. Check network connectivity for API servers

Community Resources

Discord & Forums

Documentation

Code Repositories

Next Steps

  1. Basic Setup: Windsurf MCP Setup Guide
  2. Explore Servers: MCP Server Directory
  3. Advanced Patterns: MCP Troubleshooting
  4. Build Custom Servers: Check the MCP SDK documentation

Last updated: December 2025 | Have questions? Browse more MCP guides

← Back to Learn Hub