AI Experiment · 2026

AI Weather Agent

A natural language AI agent that uses locally defined tools to call live weather APIs and return plain-English answers — powered by Claude and Open-Meteo.

AI / LLMs Tool Use APIs JavaScript Anthropic

Overview

What I Built

This project is a minimal AI agent that lets you ask a weather question in plain English and get a real answer back — powered by live data. Type something like "What's the weather like in Kyoto right now?" and within a few seconds Claude has called a real API and returned a conversational response with actual temperature, conditions, and wind data.

What makes it interesting isn't the weather part — it's the architecture underneath. The core pattern is what the AI community calls tool use: instead of having Claude guess or hallucinate an answer, we give it structured capability definitions ("tools") that it can choose to invoke when it needs real-world information. Each tool has a name, a natural-language description, and a typed input schema — defined directly in JavaScript and passed to the Anthropic Messages API alongside the user's question. There is no MCP server involved. The tools are hardcoded locally in this single HTML file, and the tool execution logic (geocoding, API calls, data parsing) runs entirely in the browser.

In a production system, you might host these same tool definitions on an MCP (Model Context Protocol) server — a standardized way to expose tools so that any compatible AI client can discover and invoke them over a network protocol. This project skips that layer intentionally: by defining and executing the tools locally, every step of the agentic loop is visible in one file without any infrastructure in the way.

The problem it solves is a real one: most APIs return raw JSON that requires parsing, formatting, and presentation logic before it's useful to a person. With tool use, the AI handles both sides — it decides when to call the API, passes the right inputs, interprets the structured result, and composes a response that makes sense in context. You write less glue code, and the interface becomes far more flexible.

Try It

Live Demo

Ask any weather question in plain English. The agent resolves your location, calls the Open-Meteo API, and has Claude compose a response from real data.

Requests are routed through a Cloudflare Worker proxy — the Anthropic API key is stored as a Worker secret and never exposed client-side. The Open-Meteo weather and geocoding calls are free and require no key.
Enter a question above to see the agent in action.

Architecture

How It Works

The agent runs a multi-round conversation with Claude. In round one, Claude receives the question and the locally defined tool schemas, then decides which tool to call and with what inputs. The browser executes the tool (geocoding + weather API fetch) and returns the result. Claude reads the live data and composes the final answer. If the question requires multiple tools, this loop repeats — up to three iterations.

How this differs from MCP: In this project, the tool definitions and their execution logic live directly in the page's JavaScript — the browser both defines and runs the tools. In an MCP deployment, those same tool schemas would be hosted on a dedicated MCP server, which exposes them over a standardized protocol so that any compatible AI client can discover, list, and invoke them without knowing the implementation details. The AI model's interface to the tools (name, description, input schema) is identical either way — the difference is where the tool definitions live and who executes them. This project keeps everything local so you can read the full loop in a single file.

Reflection

What I Learned

Built and written from the perspective of a Product Manager learning to work hands-on with AI tooling.

Tools Used

Tech Stack

Built entirely without frameworks or build tools — a single HTML file, vanilla JavaScript, and two free public APIs.

Claude Sonnet Anthropic Messages API Tool Use (JSON Schema) Open-Meteo Weather API Open-Meteo Geocoding API Vanilla JavaScript (ES2022+) HTML / CSS GitHub Pages

Keep exploring

Head back to the projects page or take a look at the source on GitHub.