How does MCP work?

I cover the basics of MCP (setup with Cursor, Windsurf, OpenAI Agents, Claude Desktop), but also a few more advanced tricks:

• Best practises for browser navigation (using playwright)

• A custom Github MCP service so you can add remove collaborators

• A custom LiteLLM MCP agent that is capable of handling image responses (like screenshots), Cursor and Windsurf and OpenAI agents cannot do this yet.

Cheers, Ronan

P.S. The scripts are in the ADVANCED-inference repo:

---

Video Links:

• Slides

• MCP Servers

• OpenAI MCP

---

Trelis Links:

🤝 Are you a talented developer? Work for Trelis

💡 Need Technical or Market Assistance? Book a Consult Here

💸 Starting a New Project/Venture? Apply for a Trelis Grant

---

TIMESTAMPS:

0:00 What is MCP (Model Context Protocol)?

0:46 Table of Contents

1:46 How does MCP work?

5:18 What problem does MCP solve?

9:22 Finding the scripts for this video (https://trelis [dot] com/ADVANCED-inference)

10:03 How to inspect an MCP tool service?

16:56 How to use MCP with Cursor?

20:33 Browser navigation with MCP using Playwright or Puppeteer

23:09 How to use MCP with Github to grant repo access

25:01 How to use MCP with Stripe

27:50 Running a remote MCP server with SSE

30:45 How to use MCP with Windsurf?

32:33 How to use MCP with Claude Desktop App?

35:58 How to use MCP with OpenAI agents?

42:41 How to use MCP with a Custom LLM? (via LiteLLM, and supporting image responses)

55:22 Conclusion

---

Model Context Protocol (MCP): A Technical Guide to Tool Integration for LLMs

Model Context Protocol (MCP) enables language models to interact with external tools and services through a standardized interface. This article explains how MCP works, its key components, and implementation approaches across different platforms.

Core Concepts

MCP provides a protocol for:

1. Defining tool specifications and capabilities

2. Handling tool calls from language models

3. Processing tool responses and feeding results back to LLMs

4. Supporting additional features like resources and prompts (though tools are the primary use case)

The protocol can operate in two modes:

1. Local execution via standard input/output

2. Remote execution through server-sent events

Technical Implementation

The basic flow works as follows:

1. Tool Service Setup:

   1. MCP tool service stores API endpoints and available actions

   2. Tool information is injected into LLM context

   3. LLM uses this information to make appropriate tool calls

2. Tool Call Process:

   1. LLM generates structured tool call based on user input

   2. Call is sent to MCP service for execution

   3. Response is returned to LLM's context window

   4. LLM processes response and continues conversation

Supported Platforms

MCP integration is available on several platforms:

Cursor:

1. Configure via MCP.json configuration file

2. Supports multiple concurrent tool services

3. Requires API keys for services like GitHub/Stripe

Windsurf:

1. Similar configuration to Cursor

2. Tools displayed directly in chat interface

3. Limited by image response handling

Claude Desktop:

1. Configuration through Desktop Config file

2. Free tier has context length limitations

3. Approximately 30 tool limit on free plan (as a consequence of context length limits, which depend on busyness of service)

Current Limitations

Some technical constraints exist:

1. Image handling: Screenshots and visual feedback not currently supported in Cursor/Windsurf

2. Context limits: Free tiers may restrict number of concurrent tools

3. API requirements: Services like GitHub/Stripe require valid API keys/tokens

4. Custom integration: Requires additional code for direct LLM integration

Custom Integration

For direct LLM integration, developers need to:

1. Convert MCP tool specifications to LLM-compatible format

2. Transform LLM tool calls to MCP protocol format

3. Handle tool responses appropriately

4. Manage image responses if supported by the LLM

Available Tools

Common MCP tools include:

1. Browser navigation (Playwright/Puppeteer)

2. GitHub repository management

3. Stripe payment processing

4. Custom tool services

Each tool requires proper configuration and appropriate access credentials for successful integration.

Technical Requirements

To implement MCP:

1. Node.js/NPM for running services

2. API keys for relevant services

3. Environment variables for credentials

4. Proper configuration files for chosen platform

5. Additional dependencies based on specific tools

MCP provides a structured way to extend LLM capabilities through external tools, though implementation details vary by platform and specific use case.