UI Experiment · 2026

Country-Aware Address Form

A dynamic address form that adapts fields based on the selected country — validated via Claude AI, which interprets each address in plain language and flags issues that structurally valid inputs can miss.

AI / LLMs Forms & Validation Prompt Engineering JavaScript Anthropic

Overview

What I Built

This project is a country-aware address form that dynamically restructures itself based on the country a user selects. Different countries have fundamentally different address formats — the United States uses a city, state, and ZIP code; the United Kingdom uses a town, county, and postcode; Japan reverses the entire hierarchy. A single static form fails all of them. This form adapts.

What makes it interesting is the validation approach. Once a user fills out an address, they can verify it via Claude AI, which interprets the address in plain language and flags issues that structured validation often misses — ambiguous apartment numbers, likely typos in street names, or combinations of fields that look technically valid but wouldn’t reach a real recipient.

Claude excels at reasoning about edge cases, explaining what might be wrong in terms a person can act on, and handling address formats from countries where postal databases have sparser coverage. Rather than returning a binary pass/fail, it returns a plain-English explanation alongside a corrected version of the address — something a person can actually use.

The underlying challenge this solves is real: international address collection is one of those problems that looks simple until you try to build it properly. Most implementations either force every country into a US-shaped form and lose data, or ship a massive static configuration file per country. This project explores what it looks like when you bring an LLM into the loop — not as a fallback, but as the primary validation layer.

Try It

Claude AI Address Validation

Fill in an address and click Validate. Claude reads the form values, checks the format against the selected country's conventions, and returns a structured assessment alongside a standardized version of the address.

Requests are routed through a Cloudflare Worker proxy — the Anthropic API key is stored as a Worker secret and never exposed client-side. No address data is stored or logged anywhere.
Fill out the form above and click Validate to see Claude’s address validation.

Architecture

How It Works

The form operates in two stages. In the first stage, selecting a country triggers a field-swap: a per-country configuration determines which fields appear, what they're labeled, in what order they render, and what input constraints apply (e.g. postal code format). In the second stage, submitting the form sends the collected address to Claude for validation.

Why Claude? Claude handles the cases rule-based validation misses: rare address formats, ambiguous inputs, and natural-language explanations of what’s wrong and how to fix it. Rather than returning a binary pass/fail, it returns a corrected version alongside a plain-English explanation — something a person can actually act on.

Reflection

What I Learned

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

Tools Used

Tech Stack

Built without frameworks or build tools — vanilla JavaScript, Claude AI, and a single HTML file.

Claude Sonnet Anthropic Messages API Country Address Schemas Vanilla JavaScript (ES2022+) HTML / CSS Cloudflare Workers GitHub Pages

Keep exploring

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