Skip to content

This educational demo teaches the Model Context Protocol (MCP) - a protocol for AI assistants to interact with external tools and data sources.

Notifications You must be signed in to change notification settings

MehdiBukhari/CURL_TO_CONTEXT

Repository files navigation

From Curl to Context: Mastering MCP

πŸ“š Overview

This educational demo teaches the Model Context Protocol (MCP) - a protocol for AI assistants to interact with external tools and data sources.

What You'll Learn

By working through this demo, you'll understand:

  • βœ… MCP Protocol Basics - How tools are defined, listed, and called
  • βœ… JSON-RPC 2.0 - Request/response format used by MCP
  • βœ… Transport Methods - stdio (local) vs HTTP (remote) communication
  • βœ… Error Handling - Proper error codes and messages
  • βœ… TypeScript Development - Building and compiling MCP servers/clients
  • βœ… Real-world Testing - Using curl, Postman, and programmatic clients

🎯 Contents

CURL_TO_CONTEXT/
β”œβ”€β”€ README.md                          # This file - Full documentation
β”œβ”€β”€ CHEATSHEET.md                      # Quick reference (print this!)
β”œβ”€β”€ mcp-server/                        # Simple MCP Server Implementation
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   └── index.ts                   # Math operations MCP server
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── README.md
β”œβ”€β”€ mcp-client-stdio/                  # Client using stdio transport
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   └── client.ts                  # stdio client implementation
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── README.md
β”œβ”€β”€ mcp-client-remote/                 # Client using HTTP transport
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   └── client.ts                  # HTTP client implementation
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── README.md
└── examples/                          # JSON-RPC request examples
    β”œβ”€β”€ tools-list-request.json        # List all tools
    β”œβ”€β”€ add-request.json               # Addition example
    β”œβ”€β”€ subtract-request.json          # Subtraction example
    β”œβ”€β”€ multiply-request.json          # Multiplication example
    β”œβ”€β”€ divide-request.json            # Division example
    └── README.md                      # Usage guide

πŸš€ Quick Start

Prerequisites

Before starting, ensure you have Node.js 18+ installed:

node --version  # Should show v18.x.x or higher

If not installed, download from nodejs.org

πŸ’‘ Tip: Print or bookmark CHEATSHEET.md for quick reference while working through the demo!


Option A: stdio Transport (Recommended First)

Best for: Learning local MCP communication

Step 1: Build the MCP Server

cd mcp-server
npm install
npm run build

What this does: Compiles the TypeScript server to JavaScript

Step 2: Run the stdio Client Demo

cd ../mcp-client-stdio
npm install
npm run build
npm start

Expected output:

  • βœ… Server starts via stdio
  • βœ… Lists 4 math tools (add, subtract, multiply, divide)
  • βœ… Executes calculations automatically
  • βœ… Demonstrates error handling

Duration: ~2 minutes


Option B: HTTP Transport (Remote Connection)

Best for: Understanding networked MCP servers

Terminal 1 - Start HTTP Server:

cd mcp-server
npm install       # If not already done
npm run build     # If not already done
npm run start:http

Expected output:

πŸš€ Starting MCP Math Server in HTTP mode
βœ… HTTP Server running on http://localhost:5001

Keep this terminal running!

Terminal 2 - Run HTTP Client:

cd mcp-client-remote
npm install
npm run build
npm start

What you'll see:

  • πŸ“€ JSON-RPC requests
  • πŸ“₯ Server responses
  • βœ… Math operations over HTTP
  • βœ… Error handling examples

Duration: ~3 minutes


Quick Manual Test (HTTP Server Running)

Try these curl commands to test the server directly:

List available tools:

curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

Calculate 10 + 5:

curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"add","arguments":{"a":10,"b":5}},"id":2}'

Test error (divide by zero):

curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"divide","arguments":{"a":10,"b":0}},"id":3}'

Troubleshooting

"Server not found" error?

# Make sure you built the server first:
cd mcp-server
npm run build

"Connection refused" error?

# Start the HTTP server in another terminal:
cd mcp-server
npm run start:http

Port 5001 already in use?

# Use a different port:
PORT=3000 npm run start:http
# Then update client:
MCP_SERVER_URL=http://localhost:3000/mcp npm start

πŸ“– Key Concepts

JSON-RPC 2.0 Format

Every MCP message follows this structure:

{
  "jsonrpc": "2.0",        // Always "2.0"
  "method": "tools/call",   // MCP method name
  "params": {               // Optional parameters
    "name": "add",
    "arguments": {
      "a": 10,
      "b": 5
    }
  },
  "id": 1                   // Unique request ID
}

MCP Protocol Methods

Method Purpose When to Use
initialize Handshake between client and server First connection
tools/list Discover available tools Before calling tools
tools/call Execute a specific tool Perform operations
resources/list Get available resources Access data sources
prompts/list Get available prompts Template management
notifications/ Server-to-client updates Real-time events

Error Codes (JSON-RPC 2.0)

Code Name Meaning
-32700 Parse error Invalid JSON
-32600 Invalid Request Malformed JSON-RPC
-32601 Method not found Unknown method
-32602 Invalid params Wrong parameters
-32603 Internal error Server error

🎯 Quick Reference

Common Commands

List available tools:

curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

Call a tool:

curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"add","arguments":{"a":10,"b":5}},"id":2}'

Using example files:

cd examples
curl -X POST http://localhost:5001/mcp \
  -H "Content-Type: application/json" \
  -d @add-request.json

Project Commands

Command Location Purpose
npm install Any directory Install dependencies
npm run build Any directory Compile TypeScript
npm start mcp-server Run in stdio mode
npm run start:http mcp-server Run HTTP server
npm start mcp-client-stdio Run stdio demo
npm start mcp-client-remote Run HTTP demo
npm run dev Any directory Build + run
npm run watch mcp-server Auto-rebuild on changes

Environment Variables

# Change server port
PORT=3000 npm run start:http

# Change client server URL
MCP_SERVER_URL=http://localhost:3000/mcp npm start

πŸ“š Learning Path

Immediate Next Steps

  1. Review CHEATSHEET.md - Keep this handy for quick reference
  2. Modify the examples - Change values in examples/*.json files and test
  3. Add error handling - Try invalid inputs and see responses
  4. Explore the code - Read through src/index.ts files to understand implementation

After Completing This Demo

  1. Official MCP Documentation - modelcontextprotocol.io
  2. Build Your Own Tools - Add new operations (modulo, power, square root)
  3. Add Resources - Learn MCP resource management
  4. Implement Prompts - Add prompt templates
  5. Real Integration - Connect MCP to Claude, GPT, or other AI systems

πŸ”— Additional Resources

MCP Protocol & Specification

JSON-RPC 2.0

TypeScript & Node.js

Express.js (HTTP Server)

Testing Tools

  • curl Documentation - curl.se/docs
    • Command-line tool for testing HTTP endpoints
  • Postman Learning - learning.postman.com
    • API testing and documentation platform
  • HTTPie - httpie.io
    • User-friendly alternative to curl

AI & LLM Integration

Community & Examples

  • Awesome MCP - Search for "awesome-mcp" on GitHub
    • Curated list of MCP resources and projects
  • MCP Community Servers - github.com/modelcontextprotocol/servers
    • Official collection of MCP server implementations
  • Discord/Slack Communities - Check MCP documentation for links
    • Get help and share your projects

Related Concepts

Video Tutorials

  • YouTube - MCP Tutorials - Search for "Model Context Protocol"
    • Video walkthroughs and explanations
  • Anthropic's YouTube Channel - youtube.com/@AnthropicAI
    • Official videos about MCP and Claude

Books & Articles

  • "Designing Data-Intensive Applications" by Martin Kleppmann
    • Understanding distributed systems and protocols
  • "RESTful Web APIs" by Leonard Richardson & Mike Amundsen
    • API design principles
  • MDN Web Docs - developer.mozilla.org
    • Web development reference

🀝 Contributing

This is an educational resource. Contributions welcome:

  • Add more math operations (power, square root, etc.)
  • Improve error messages and validation
  • Add more detailed examples
  • Create video tutorials or blog posts
  • Translate documentation

πŸ“ License

MIT License - Free for educational purposes


Questions or Issues? Open an issue or check the individual README files in each directory for more detailed information.

About

This educational demo teaches the Model Context Protocol (MCP) - a protocol for AI assistants to interact with external tools and data sources.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published