This educational demo teaches the Model Context Protocol (MCP) - a protocol for AI assistants to interact with external tools and data sources.
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
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
Before starting, ensure you have Node.js 18+ installed:
node --version # Should show v18.x.x or higherIf not installed, download from nodejs.org
π‘ Tip: Print or bookmark
CHEATSHEET.mdfor quick reference while working through the demo!
Best for: Learning local MCP communication
cd mcp-server
npm install
npm run buildWhat this does: Compiles the TypeScript server to JavaScript
cd ../mcp-client-stdio
npm install
npm run build
npm startExpected output:
- β Server starts via stdio
- β Lists 4 math tools (add, subtract, multiply, divide)
- β Executes calculations automatically
- β Demonstrates error handling
Duration: ~2 minutes
Best for: Understanding networked MCP servers
cd mcp-server
npm install # If not already done
npm run build # If not already done
npm run start:httpExpected output:
π Starting MCP Math Server in HTTP mode
β
HTTP Server running on http://localhost:5001
Keep this terminal running!
cd mcp-client-remote
npm install
npm run build
npm startWhat you'll see:
- π€ JSON-RPC requests
- π₯ Server responses
- β Math operations over HTTP
- β Error handling examples
Duration: ~3 minutes
Try these curl commands to test the server directly:
curl -X POST http://localhost:5001/mcp \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0","method":"tools/list","id":1}'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}'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}'"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:httpPort 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 startEvery 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
}| 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 |
| 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 |
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| 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 |
# Change server port
PORT=3000 npm run start:http
# Change client server URL
MCP_SERVER_URL=http://localhost:3000/mcp npm start- Review
CHEATSHEET.md- Keep this handy for quick reference - Modify the examples - Change values in
examples/*.jsonfiles and test - Add error handling - Try invalid inputs and see responses
- Explore the code - Read through
src/index.tsfiles to understand implementation
- Official MCP Documentation - modelcontextprotocol.io
- Build Your Own Tools - Add new operations (modulo, power, square root)
- Add Resources - Learn MCP resource management
- Implement Prompts - Add prompt templates
- Real Integration - Connect MCP to Claude, GPT, or other AI systems
- Official MCP Documentation - modelcontextprotocol.io
- Protocol specification, concepts, and best practices
- MCP GitHub Repository - github.com/modelcontextprotocol
- Official SDKs, examples, and discussions
- MCP TypeScript SDK - npmjs.com/package/@modelcontextprotocol/sdk
- The SDK used in this demo
- MCP Specification - spec.modelcontextprotocol.io
- Detailed protocol specification
- JSON-RPC 2.0 Specification - jsonrpc.org/specification
- Official spec for the protocol format MCP uses
- JSON-RPC Best Practices - jsonrpc.org/historical/json-rpc-over-http.html
- Guidelines for JSON-RPC over HTTP
- TypeScript Handbook - typescriptlang.org/docs/handbook
- Learn TypeScript fundamentals
- Node.js Documentation - nodejs.org/docs
- Official Node.js docs and guides
- Node.js Best Practices - github.com/goldbergyoni/nodebestpractices
- Comprehensive Node.js best practices
- Express.js Guide - expressjs.com/en/guide
- Official Express.js documentation
- Express.js Best Practices - expressjs.com/en/advanced/best-practice-performance.html
- Production best practices
- 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
- Anthropic Claude API - docs.anthropic.com
- Integrate MCP with Claude
- OpenAI API - platform.openai.com/docs
- Connect with GPT models
- LangChain - python.langchain.com
- Framework for building LLM applications
- 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
- Protocol Buffers - protobuf.dev
- Alternative serialization format
- gRPC - grpc.io
- Modern RPC framework
- GraphQL - graphql.org
- Query language for APIs
- WebSockets - developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
- Real-time bidirectional communication
- 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
- "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
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
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.