MCP Learning Projects

Hands-on projects for understanding how to build applications using Model Context Protocol (MCP).

Projects

weather/ — MCP Server + Custom Client

A weather MCP server built from the official MCP Quickstart, extended with a custom Python MCP client that routes tool calls through the OpenAI Chat Completions and Responses APIs.

calculator/ — MCP Server with Resources and Interactive UI

A calculator MCP server that demonstrates MCP resources and MCP Apps — an extension that renders an interactive HTML calculator widget directly inside Claude Desktop.

chatkit/ — Chat Web App with MCP Backend

A full-stack chat application built on OpenAI ChatKit. The frontend is a React + Vite app; the backend is a FastAPI server that routes messages to MCP tool servers based on the selected composer mode.

• Echo mode — echoes user input back verbatim

• Weather mode — runs a LangChain agent backed by the weather/ MCP server; tool calls (get_alerts, get_forecast) are streamed live to the UI as a workflow with per-step status indicators

Requires Python 3.14+ for the backend.

Related MCP server: MCP Server Basic Example

Requirements

• Python 3.13+ and uv

• Node.js 18+ and npm (for chatkit/)

• Claude Desktop (for MCP Apps UI in the calculator project)

• OpenAI API key (for the weather client and chatkit weather agent)

See each subfolder's README.md for setup and run instructions.