Skip to content
MIYA·AI·LAB / generative-AI test logs LLM · Claude Code · MLX · Ollama
AI MiyaAILab_
  • // Lab
  • // all logs
JA / EN
← Miya-Gadget
Generative AI PC

Building a Weather Forecast App with Claude Code and API Integration

2025年11月21日 · Shichinomiya
Building a Weather Forecast App with Claude Code and API Integration

Table of Contents

Toggle
  • Building a Weather Forecast App with Claude Code and API Integration
  • What We’re Building A Weather Forecast App
      • Key Features
  • Conversation with Claude Code
  • Implementation Walkthrough
      • 1. City Name Input
      • 2. Current Weather Display
      • 3. Weekly Forecast
      • 4. Temperature Trend Graph
  • Learning How to Use APIs
      • Getting an API Key
      • API Call Basics
  • Impressions After Using It
      • What Went Well
      • Room for Improvement
  • Summary
  • You might also like

Building a Weather Forecast App with Claude Code and API Integration

In previous articles, I built projects up to a price monitoring tool. This time, I’m taking on “API integration.” I built a weather forecast app that fetches real-time weather data from an external service’s API.

What We’re Building: A Weather Forecast App

Key Features

  • Current weather display: Shows temperature, humidity, and weather conditions
  • Weekly forecast: Lists the 7-day weather forecast at a glance
  • Multi-city support: Search weather for any city you like
  • Visual presentation: Weather icons and temperature graphs
  • API integration: Fetches the latest data from the OpenWeatherMap API

Claude Code - Weather App Creation Request

Conversation with Claude Code

I asked Claude Code: “Build an app that displays the weather forecast. I want it to fetch real-time weather information using an API.”

Claude Code suggested an implementation using the OpenWeatherMap API:

  • How to set up the API key
  • Making API calls with the requests library
  • Parsing JSON responses
  • Temperature unit conversion (Kelvin to Celsius)

Implementation Walkthrough

1. City Name Input

Enter the name of the city you want to check, and the app fetches the weather data for that location.

City name input screen

2. Current Weather Display

The data retrieved from the API is formatted and displayed in an easy-to-read layout.

Current weather display

Information shown:

  • Weather conditions (sunny, cloudy, rainy, etc.)
  • Temperature (current / high / low)
  • Humidity
  • Wind speed

3. Weekly Forecast

You can also view the 7-day weather forecast in a list format.

Weekly weather forecast

4. Temperature Trend Graph

Using matplotlib, the weekly temperature changes are visualized in a graph.

Temperature trend graph

Learning How to Use APIs

Getting an API Key

You sign up for the OpenWeatherMap free plan and obtain an API key. Claude Code even walked me through the registration steps.

API Call Basics

Using the requests library, calling an API is straightforward:

  • Send a GET request with parameters appended to the URL
  • Handle the JSON response as a Python dictionary
  • Error handling (e.g., when a city is not found)

Impressions After Using It

What Went Well

  • Real-time data: Always up-to-date weather information
  • API learning: Gained practical API integration skills
  • Visually intuitive: Graphs and icons make it easy to understand
  • Multi-city support: Can check weather for cities around the world

Room for Improvement

  • Make the weather icons more visually appealing
  • Add notification features (e.g., when rain is expected)
  • Save favorite locations
  • Add hourly detailed forecasts

Summary

Using Claude Code, I was able to build a weather forecast app with API integration.

I learned that by leveraging external APIs, you can add all sorts of capabilities to your own apps. Beyond OpenWeatherMap, there are news APIs, translation APIs, map APIs, and many more — I’m looking forward to exploring them in future projects.

Next time, I plan to build on this app and turn it into something even more practical.

See you in the next article!

You might also like

More generative-AI logs from the lab.

  • Modded RTX 4080 32GB Benchmarked: Qwen3.8-27B at 262K Context, 125B MoE, and MiniMax H3 Video — What 32GB Actually Delivers
  • Darkbloom Review: Can a Mac Really Earn Money Serving AI? (I Tested It for a Day)
  • Building a Full-Stack Blog System with Claude Code: Applying Everything I Learned
  • Smart Shopping with Claude Code: Building an Automatic Price Monitoring Tool
Previous Article Smart Shopping with Claude Code: Building an Automatic Price Monitoring Tool
Next Article Automate File Organization with Claude Code: Tidy Up Messy Folders in Seconds

Related Posts

Qwen 3.6 on a Mac, Measured: on an M1 Max 64GB, the MoE 35B ran 3.7x faster than the 27B

Qwen 3.6 on a Mac, Measured: on an M1 Max 64GB, the MoE 35B ran 3.7x faster than the 27B

Darkbloom Review: Can a Mac Really Earn Money Serving AI? (I Tested It for a Day)

Darkbloom Review: Can a Mac Really Earn Money Serving AI? (I Tested It for a Day)

Your First Program with Claude Code! Building a Game Through Conversation

Your First Program with Claude Code! Building a Game Through Conversation

The Complete Guide to Claude Code: Get Started with AI Development on Windows in 5 Minutes

The Complete Guide to Claude Code: Get Started with AI Development on Windows in 5 Minutes

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Shichinomiya

Shichinomiya

A blogger who loves PC and gadgets. Sharing daily discoveries.

@shichinomiya_s

Popular Posts

  • Does the trending Claude Code skill “ADHD” actually make the agent smarter? A measured duel vs single-shot
  • Simplify Task Management with Claude Code! Building a Simple Todo List App
  • Tesla V100 32GB in 2026: Local LLM Benchmark with Qwen 3.6 — 98.8 tok/s on MoE 35B, 1.6x Faster Than M1 Max (Used, ≈$900)
  • Automate File Organization with Claude Code: Tidy Up Messy Folders in Seconds
  • Tesla V100 32GB Runs Qwen3.8-27B: 131k Context on a Single Card — Measured Benchmark

Categories

  • Announcements
  • Cars
  • Cycling
  • Gadgets
  • Generative AI
  • Home Appliances
  • Internet Service
  • Outings
  • Overseas Shopping
  • PC
  • Rental Servers & VPS
  • Travel

MiyaAILab

A hands-on lab for generative AI — new models, tools, and services tested for real, from benchmarks to everyday usefulness.

Lab

  • AI Lab トップ
  • 生成AI 全記事
  • ← Miya-Gadget 本体

Latest

  • Dual Tesla V100 SXM2 on a Single PCIe Slot: 64GB VRAM & 300 GB/s NVLink Tested — Is This $700 Setup Worth It?
  • Modded RTX 4080 32GB Benchmarked: Qwen3.8-27B at 262K Context, 125B MoE, and MiniMax H3 Video — What 32GB Actually Delivers
  • Tesla V100 32GB Runs Qwen3.8-27B: 131k Context on a Single Card — Measured Benchmark
  • Tesla V100 32GB in 2026: Local LLM Benchmark with Qwen 3.6 — 98.8 tok/s on MoE 35B, 1.6x Faster Than M1 Max (Used, ≈$900)
© 2026 Miya AI Lab — a section of Miya-Gadget. miyagadget.page