ZoneIQ Explorer

🪪 Portfolio Summary

ZoneIQ Explorer is a Next.js application that simplifies location-based zoning analysis by combining interactive mapping, document ingestion, and AI-assisted data extraction into a single, cohesive workflow.

I built the full-stack application, integrating Mapbox for location search, a client-side PDF ingestion pipeline, and an advanced AI-driven zone-generation backend powered by LangChain and multimodal LLMs.

The project demonstrates the ability to orchestrate complex AI workflows, handle spatial data comparisons, and create a streamlined user experience to automate an otherwise tedious and manual urban planning process.

📌 Overview

ZoneIQ Explorer is a fast, location-based zoning analysis tool designed for urban planners, researchers, and developers. It provides an intuitive interface for exploring locations, uploading municipal zoning PDFs, and automatically extracting the applicable zoning designation for a specific pinned location.

The primary purpose of the application is to bridge the gap between user-friendly digital maps and static, difficult-to-read municipal zoning documents. By utilizing multimodal AI, the app visually cross-references a live map screenshot with an uploaded zoning PDF to infer the correct zone code and provide a plain-English summary, bypassing the need for manual legend parsing and spatial triangulation.

🎯 Problem / Purpose

Determining the exact zoning designation for a property often requires cross-referencing a digital address with large, complex, and unsearchable PDF zoning maps provided by municipalities. This process is slow, prone to human error, and requires manually parsing dense legends and matching street layouts visually.

ZoneIQ Explorer addresses this problem by automating the visual comparison. It exists to prove that multimodal LLMs can act as intelligent spatial assistants, reducing the time it takes to perform initial zoning due diligence from minutes to seconds by handling the visual cross-referencing automatically.

✨ Key Features

• Interactive Mapbox visualization and location search
• Target pin placement with automatic viewport screenshot capture
• In-browser PDF upload and image rendering
• Automated AI pipeline for map bounds checking and legend extraction
• Multimodal zone identification using map screenshots and zoning documents
• In-app zoning chat assistant for follow-up questions
• Real-time streaming status updates for long-running AI tasks

⚙️ How It Works

From a user perspective, the flow starts by searching for an address or dropping a pin on the interactive map. The user then uploads a local zoning PDF. With a single click, the application captures the current map view, analyzes it alongside the PDF, and returns the inferred zoning code (e.g., "R-1") and a brief explanation. Users can then ask follow-up questions about the zone using the built-in chat assistant.

Technically, the frontend uses Next.js and Mapbox GL to manage the spatial interface. When the user requests a zone generation, the client captures a base64 screenshot of the map and the first page of the PDF. These images are sent to a Next.js API route where LangChain orchestrates a multi-step prompt sequence via OpenRouter. The pipeline first verifies the location is within the map bounds, extracts the legend guide, and finally triangulates the pin's precise location on the zoning map to return structured JSON data representing the zone.

🧰 Tech Stack

Frontend

• React 19
• Next.js 16
• TypeScript

Mapping & Visuals

• Mapbox GL
• react-map-gl
• @mapbox/search-js-react
• pdfjs-dist

Backend & AI

• LangChain
• OpenRouter (Claude Sonnet)
• Node.js

Styling & Tools

• Tailwind CSS 4
• sharp

🏗️ Architecture / Implementation Highlights

The application uses the Next.js App Router for full-stack integration, keeping the frontend map interactions tightly coupled with the AI backend. The client-side architecture is split into distinct components: a MapInterface for handling Mapbox state and screenshots, and a ZoneManager for coordinating the PDF ingestion and generation workflow.

The standout engineering decision is the multi-step, multimodal AI pipeline orchestrated with LangChain. Instead of a single massive prompt, the backend breaks the task into logical, verifiable steps: a bounds check to prevent hallucinations, a dedicated legend extraction step, and a final triangulation step. This deterministic approach reduces errors by giving the LLM an explicit guide (the extracted legend) and strict instructions to analyze the exact needle tip of the pin rather than the general area.

To handle the latency of sequential LLM calls, the API route uses a custom ReadableStream to emit Server-Sent Events (NDJSON) back to the client. This allows the UI to display granular loading states (e.g., "Checking map bounds...", "Extracting zoning polygons...") during the execution, significantly improving the perceived performance and user experience.

👤 What I Built / My Role

I designed and developed the entire ZoneIQ Explorer application. I built the React-based map interface, implemented the client-side PDF processing logic, and created the responsive Tailwind UI that houses the workflow.

My most significant contribution was designing and tuning the AI pipeline. I authored the multi-step system prompts that force the LLM to act as a spatial analyst—instructing it to use street orientation to triangulate the map pin onto the PDF document. I also implemented the streaming backend architecture to ensure the user is constantly updated on the pipeline's progress, parsing and validating the AI's JSON output directly in the route handler.

🧩 Challenges & Solutions

Challenge Determining exact coordinates on a static PDF map without georeferencing data.

Solution Implemented a visual triangulation prompt that instructs the multimodal LLM to cross-reference street names, intersections, and street orientation from a live Mapbox screenshot to estimate the corresponding location on the static PDF map.

Challenge Preventing LLM hallucinations when the target location isn't actually on the uploaded map.

Solution Added a preliminary "bounds check" step in the LangChain pipeline. The model first evaluates if the location in the screenshot exists in the zoning document before attempting to extract a zone, failing early if the location is missing.

Challenge Managing long AI response times during complex image analysis.

Solution Built a custom Next.js API route using ReadableStream to stream processing statuses as NDJSON back to the client, allowing the frontend to show real-time progress indicators for each stage of the analysis instead of a single, long-loading spinner.

📈 Engineering Takeaways

This project demonstrates strong capabilities in full-stack Next.js development, API design, and practical AI integration. It highlights an ability to go beyond basic text generation, utilizing multimodal models to solve complex, real-world spatial problems.

The implementation of a deterministic, multi-step LLM pipeline with robust error handling and user-friendly streaming feedback showcases mature product thinking and a focus on developer experience, proving that complex AI workflows can be packaged into intuitive, responsive applications.