This project demonstrates a interconnected system with 4 modules:

1. API Server: Python FastAPI returning weather data (Port 8000).
2. API Client: TypeScript Express web server displaying weather (Port 3000).
3. MCP Server: Python Model Context Protocol server proxying the API (Port 8001).
4. MCP Client: React Chatbot App using Gemini + MCP Tools (Port 5173).

A .env file has been generated with API_SERVER_KEY and MCP_SERVER_KEY. Please open .env and add your Gemini API Key to GEMINI_API_KEY or VITE_GEMINI_API_KEY manually if checking the source code, although the client uses a placeholder INSERT_GEMINI_KEY_HERE.

# In project root
python3 -m venv api_server/venv
./api_server/venv/bin/pip install -r api_server/requirements.txt
./api_server/venv/bin/uvicorn api_server.main:app --host 0.0.0.0 --port 8000

Open http://localhost:3000 to see the client.

cd api_client
npm install
npx ts-node src/index.ts

Running on http://127.0.0.1:8001/sse.

python3 -m venv mcp_server/venv
./mcp_server/venv/bin/pip install -r mcp_server/requirements.txt
./mcp_server/venv/bin/python3 mcp_server/server.py

Open http://localhost:5173.

cd mcp_client
npm install
npm run dev

• Secure API Requests: API Server checks x-api-key.
• MCP Proxy: MCP Server uses the API Key to fetch data securely.
• Smart Client: MCP Client (Chatbot) discovers tools dynamically with a 5-minute cache TTL.
• Combined Tools: The Chatbot combines remote MCP tools (get_running_weather) with local custom tools (set_title).