Skip to main content
Glama
amrahman90

Weather MCP App

by amrahman90
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

Weather MCP App

A Model Context Protocol (MCP) server with an interactive React UI for fetching weather data. Works with Claude Desktop, ChatGPT, and any MCP-compatible client.

Features

  • Current Weather - Real-time temperature, feels-like, humidity, wind speed/direction

  • Hourly Forecast - 24-hour forecast with weather icons

  • 7-Day Forecast - Daily high/low temperatures and conditions

  • Air Quality - US AQI, PM2.5, PM10, and ozone levels

  • Unit Toggle - Switch between Celsius and Fahrenheit

  • Dual Transport - Works with stdio (Claude Desktop) and HTTP (ChatGPT)

  • Rate Limiting - 100/hour, 1000/day, 30000/month

Related MCP server: Weather MCP Server

Installation

# Clone the repository
git clone <repository-url>
cd weather-mcp-app

# Install dependencies
npm install

# Build the project
npm run build

Quick Start

Claude Desktop (Stdio)

# Run with stdio transport
npm run start:stdio

ChatGPT (HTTP)

# Run HTTP server (listens on http://localhost:3001/mcp)
npm run start

# Or in development with hot reload
npm run dev

Configuration

Claude Desktop

Add to your Claude Desktop settings (~/Library/Application Support/Claude/settings.json):

{
  "mcpServers": {
    "weather-mcp-app": {
      "command": "npx",
      "args": ["-y", "weather-mcp-app", "--stdio"]
    }
  }
}

Or if running locally:

{
  "mcpServers": {
    "weather-mcp-app": {
      "command": "node",
      "args": ["path/to/weather-mcp-app/dist/main.js", "--stdio"]
    }
  }
}

ChatGPT

Use the HTTP endpoint: http://localhost:3001/mcp

Usage

Tool: get_weather

name: get_weather
description: Get current weather, hourly forecast, 7-day forecast, and air quality for a city name or zip code.

Input Parameters

Parameter

Type

Required

Description

location

string

Yes

City name (e.g., "London") or zip code (e.g., "10001,US")

unit

string

No

"celsius" or "fahrenheit" (default: "celsius")

Example Request

{
  "name": "get_weather",
  "arguments": {
    "location": "San Francisco, CA",
    "unit": "celsius"
  }
}

Example Response

{
  "content": [
    {
      "type": "text",
      "text": "Weather in San Francisco:\nMainly clear, 18°C\nFeels like 17°C\nHumidity: 65%\nWind: WNW 15 km/h\nAir Quality: Good (AQI: 35)\n\nHourly Forecast:\nNow: 18°C ☀️\n1PM: 19°C 🌤️\n...\n\n7-Day Forecast:\nToday: 15° - 20°, Mainly clear\nTue: 14° - 19°, Partly cloudy\n..."
    }
  ],
  "structuredContent": {
    "current": { ... },
    "hourly": [ ... ],
    "daily": [ ... ],
    "location": { ... },
    "airQuality": { ... }
  }
}

Project Structure

weather-mcp-app/
├── src/
│   ├── api/
│   │   └── weather-client.ts      # Open-Meteo API client
│   ├── constants/
│   │   └── weather.ts             # Weather codes & utilities
│   ├── handlers/
│   │   └── weather-handler.ts    # MCP tool handler
│   ├── services/
│   │   └── weather-formatter.ts   # Text formatting
│   ├── types/
│   │   └── weather.ts             # Zod schemas & types
│   ├── errors/
│   │   └── index.ts              # Custom errors
│   ├── utils/
│   │   └── logger.ts             # Logging utilities
│   ├── components/ui/            # shadcn/ui components
│   ├── App.tsx                   # Main React UI
│   ├── server.ts                  # MCP server setup
│   ├── main.ts                    # Entry point
│   └── config.ts                  # Configuration
├── dist/                          # Built output
│   ├── main.js                    # Compiled server
│   └── mcp-app.html              # Compiled UI
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Environment Variables

Variable

Description

Default

PORT

HTTP server port

3001

NODE_ENV

Environment mode

development

ALLOWED_ORIGINS

CORS origins (production)

-

Development Commands

# Build the project
npm run build

# Build server only
npm run build:server

# Run with stdio transport
npm run start:stdio

# Run with HTTP server
npm run start

# Development mode with watch
npm run dev

# Type checking
npm run typecheck

# Run tests
npm run test

# Run unit tests
npm run test:unit

# Run e2e tests
npm run test:e2e

API Reference

Uses free Open-Meteo APIs (no API key required):

  • Geocoding: https://geocoding-api.open-meteo.com/v1/search

  • Weather: https://api.open-meteo.com/v1/forecast

  • Air Quality: https://air-quality-api.open-meteo.com/v1/air-quality

Security

  • HSTS headers enabled in production

  • CORS restricted to localhost in development

  • Request body limit: 10KB

  • Input validation with Zod schemas

  • Rate limiting on all requests

  • Structured logging with Pino

Changelog

See CHANGELOG.md for detailed changes.

Acknowledgments

  • Open-Meteo API - Free weather and air quality data API. This project uses their Geocoding, Weather Forecast, and Air Quality APIs.

  • MCP Apps SDK - For enabling interactive UI capabilities in MCP servers.

  • shadcn/ui - For the beautiful and accessible React components.

  • Lucide - For the icon library.

License

MIT

This server cannot be installed

A
license - permissive license
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/amrahman90/weather-mcp-app'

If you have feedback or need assistance with the MCP directory API, please join our Discord server