🌤️ Weather MCP Project

A real-time weather chat app powered by a custom MCP (Model Context Protocol) server, Groq AI (llama-3.3-70b), and the Open-Meteo API — fully free, no weather API key required.

🔗 Live Demo: weather-mcp-project.vercel.app 📁 GitHub: github.com/yogeshrana-1209/weather-mcp-project

---

📸 What It Does

Type any weather question in plain English and get a real-time answer with a beautiful weather card:

• "What's the weather in Ahmedabad right now?"
• "Give me a 7-day forecast for Mumbai."
• "Compare the weather in Delhi and Bangalore."
• "Will it rain in Surat today?"
• "Which is hotter right now — Dubai or Chennai?"

---

🛠️ Tech Stack

Layer	Technology
AI Model	Groq — llama-3.3-70b-versatile (free tier)
Tool Protocol	MCP (Model Context Protocol)
Weather Data	Open-Meteo API (free, no key needed)
Geocoding	Open-Meteo Geocoding API
Frontend	Vanilla HTML + CSS + JS (single file)
Hosting	Vercel (free)

---

🧰 MCP Tools

The MCP server exposes 3 tools that the AI can call:

Tool	Description
get_current_weather	Current temp, humidity, wind, conditions for any city
get_weather_forecast	Daily forecast for up to 16 days
compare_weather	Side-by-side weather comparison of two cities

---

📁 Project Structure

weather-mcp-project/
├── weather-chat-ui.html        ← Chat UI (deployed on Vercel)
├── vercel.json                 ← Vercel routing config
└── weather-mcp-server/
    ├── index.js                ← MCP server with all 3 tools
    ├── package.json
    └── README.md

---

🚀 Run Locally

1. Clone the repo

git clone https://github.com/yogeshrana-1209/weather-mcp-project.git
cd weather-mcp-project

2. Start the MCP server

cd weather-mcp-server
npm install
node index.js
# Output: "Weather MCP Server running via stdio..."

3. Open the Chat UI

Double-click weather-chat-ui.html in your file explorer — it opens directly in the browser.

4. Add your Groq API key

• Get a free key at console.groq.com
• Paste it in the top-right field of the UI (gsk_...)
• The dot turns green when the key is valid

---

⚙️ How It Works

User types a question
        ↓
Groq AI (llama-3.3-70b) decides which tool to call
        ↓
Browser calls Open-Meteo API (MCP tool logic)
        ↓
Tool result sent back to Groq
        ↓
Groq writes a friendly natural language response
        ↓
UI renders weather card / forecast / comparison

Flow in detail:

1. User asks a weather question
2. Groq decides to call e.g. get_current_weather with { city: "Mumbai" }
3. The browser geocodes the city → gets lat/lon from Open-Meteo
4. Fetches live weather data from Open-Meteo Forecast API
5. Returns JSON result back to Groq
6. Groq responds conversationally with the data

---

🌐 Deployment

The chat UI is deployed as a static site on Vercel.

Note: The weather-mcp-server (Node.js stdio process) runs locally only. The live Vercel site works fully because the MCP tool logic runs directly in the browser calling Open-Meteo.

To deploy your own fork:

1. Fork this repo on GitHub
2. Go to vercel.com → Import the forked repo
3. Framework: Other | Build command: (empty) | Output: .
4. Click Deploy — live in ~30 seconds

---

🔑 Environment

No .env file needed. The only key required is your Groq API key, entered directly in the UI at runtime. It is never stored or sent anywhere except the Groq API.

---

📡 APIs Used

API	Purpose	Cost
Groq	AI model inference	Free tier
Open-Meteo Forecast	Weather data	Free, no key
Open-Meteo Geocoding	City → lat/lon	Free, no key

---

📜 License

MIT — free to use, fork, and build on.