Combining DuckDB, MapLibre GL JS, and AI for Browser-Native Map Visualization
2026-09-02 , Ran2

We built a conversation-first data analysis tool for Japan's MLIT LINKS project that lets non-engineers explore location-rich datasets using natural language. The stack runs entirely in-browser DuckDB-WASM for SQL execution, Claude on AWS Bedrock, and MapLibre GL JS and Vega-Lite for declarative visualization.


Japan's MLIT LINKS project manages large volumes of data, much of it geospatial, but the people who need to analyze it aren't engineers. Writing SQL, building charts, or plotting data on maps requires technical skills that create a bottleneck.
We built a conversation-first tool that bridges this gap. Users describe what they want in plain language, and the system handles the rest — generating SQL queries, rendering interactive charts, and plotting results on maps, all within the browser.
The architecture is fully client-side. DuckDB-WASM executes AI-generated SQL directly in the browser with no backend required, using Parquet for efficient columnar storage. For visualization, we chose MapLibre GL JS and Vega-Lite because their declarative specs are natural targets for AI generation — the model outputs a spec, and the library renders it. Inference runs through AWS Bedrock with Claude, restricted to Tokyo and Osaka regions for compliance.
The UI splits into a chat panel on the left and a live preview panel on the right showing tables, charts, and maps. Each conversation can reference multiple tables, and each table supports an optional chart and map view.
Our biggest challenge was AI response quality. Tool design for DuckDB queries, chart specs, and map specs required careful prompt engineering — but a single monolithic system prompt proved brittle and hard to maintain. We solved this with an AI skill system: the system prompt is broken into many small, focused markdown files, and the model retrieves only what it needs for a given task via a get_skill tool. This reduces context size while significantly improving response quality and stability. Improving the AI's behavior now means creating or editing a skill markdown file in the codebase — no prompt rewrites needed.
To close the feedback loop, we built an AI regression testing pipeline. It generates detailed markdown and JSON reports scoring response quality, enabling automated tuning. Skill refinement is now largely handled by AI itself through GitHub Issues paired with Claude Code Actions.


Level of technical complexity: 2 - intermediate Give indication of resources (video, web pages, papers, etc.) to read in advance, that will help get up to speed on advanced topics.:

DuckDB-WASM: https://duckdb.org/docs/api/wasm/overview
MapLibre GL JS: https://maplibre.org/maplibre-gl-js/docs/
Vega-Lite specification: https://vega.github.io/vega-lite/
Vercel AI SDK: https://sdk.vercel.ai/docs
Apache Parquet format: https://parquet.apache.org/

Indicate what is (are) the open source project(s) essential in your talk:

DuckDB, MapLibre GL JS, Vega-Lite

I make my conference contribution available under the CC BY 4.0 license. The conference contribution comprises the abstract, the text contribution for the conference proceedings, the presentation materials as well as the video recording and live transmission of the presentation:

Software engineer working on the MLIT LINKS, Plateau project, building browser-native data analysis tools for non-technical users, and OSS WebGIS Platform.