Inspiration

Ecological reports are extremely important. We use them to identify environmental risks, ensure legal compliance for developments, and protect local biodiversity. Making one often begins with a simple moment on a trail when you notice an unusual insect, a damaged tree, or a plant growing where it shouldn't.

Turning that observation into useful data, however, is difficult. A typical reporting portal asks for ten or more fields, including scientific names, exact coordinates, dates, ecological status, and photographic evidence. This process is frustratingly awkward when you're outdoors on a mobile phone. You may not know the formal species name, you might only be able to describe a relative location, or you may simply lose patience with a long form. The result is missing field data, especially regarding invasive species where early observations matter most.

FloraLink attempts to solve this by asking: What if an AI agent could handle the research and structuring, without taking control away from the human observer?

How I built it

FloraLink is a mobile-first Next.js application built with React, TypeScript, Tailwind CSS, Zustand, Leaflet, and Supabase. I used the iNaturalist API for normalized taxonomy searches, turning generic observations into formal ecological classifications based on nearby occurrences.

The browsing agent acts as a spatial data curator. FloraLink registers five narrow tools through direct document.modelContext.registerTool(...) bindings: taxonomy search, ecological verification, permission-based device location, sighting staging, and staged-draft reading. These tools are defined together in src/features/webmcp/register-floralink-tools.ts.

Importantly, there is no tool for agent driven submission. A hallucinated species ID or a fabricated GPS coordinate could pollute real-world conservation data, so I created a strict human-in-the-loop consensus model:

  1. The user describes what they saw and where they saw it.

  2. The agent researches possible taxonomy and sourced regional context.

  3. The agent stages structured data, including any uncertainty, in FloraLink.

  4. WebMCP writes the draft into a session-hydrated Zustand store. 

  5. React immediately renders the draft as an editable review card and Leaflet map geometry.

  6. The human checks the fields, resolves location questions, attaches an evidence photo, accepts the acknowledgement, and clicks Confirm sighting.

Agent actions remain temporary. Only the human-controlled confirmation path can call the server-side submission flow and create a durable report. Supabase provides anonymous authentication, private image Storage, PostgreSQL, and PostGIS. Anonymous authentication lets a contributor securely own a report without requiring account credentials.

Challenges I ran into

  • Preserving unresolved locations: Field descriptions are often relative (e.g., “two miles north of the trailhead”). Allowing an agent to guess this coordinate would create false precision. FloraLink accepts an explicit unresolved-location state. The human must intervene to use device location, drop a pin, or draw an approximate area before confirmation is enabled. 

  • Keeping WebMCP and React state in sync: WebMCP callbacks live outside React's normal component event flow, while our review interface needs to update the exact millisecond a tool finishes. I bridged the two using a Zustand store and its imperative getState() API. I also utilized an AbortController to clean up registrations during React 19 Strict Mode double-mounting, preventing duplicate tools and stale callbacks. 

  • Handling photo metadata safely: Photo GPS can recover a lost location, but uploading the original image exposes hidden personal metadata. FloraLink reads EXIF GPS locally before processing, offers it to the human as an explicit fallback choice, and then re-encodes the photo through a browser canvas. This completely strips the EXIF metadata before uploading to private storage. 


Accomplishments

AI-assisted data collection is as much a governance problem as an interface problem. Ecological data influences conservation work, so unsupported confidence is actively harmful. I prioritized scientific integrity by preserving an unknown species, bounding an approximate area, and citing the source of a status claim, which I think is more valuable than filling every field with an AI guess.

WebMCP also allowed me to build a totally different style of collaboration. The agent and the person work side by side in the same application. The agent researches and stages information, while the person sees each change instantly on the map and review card. There is no hidden transfer from a chat response into a separate form.

Most importantly, this proved that useful AI autonomy can be bounded. FloraLink gives the agent enough capability to remove tedious research, but its tools stop at staging. The person supplies private evidence, corrects the draft, makes privacy decisions, and alone authorizes submission. That narrow boundary makes the workflow faster, safer, and highly trustworthy.

What's next for FloraLink

  • Scientific Data Export: Implementing Darwin Core data exports so our verified, human-confirmed reports can be seamlessly ingested by state conservation databases and global research networks. 

  • Civic Infrastructure Integrations: Expanding our verification tables to support local park services and municipalities for rapid anomaly and trail-damage reporting. 


Extensions

The technology behind FloraLink has potential far beyond ecology. In fact, my original idea was "UFOLink", an anonymous sighting tracker where people could submit UFO reports using WebMCP tools. I quickly pivoted to biodiversity because it offered more testable, real-world use cases. That said, the core architecture remains incredibly versatile. Whether it is powering rapid citizen journalism, acting as a corporate field auditor for a "company brain", or intaking municipal infrastructure reports, this human-in-the-loop WebMCP model can be applied to almost any field that requires quickly turning unstructured data and field images into verified, database-ready information.

Built With

Share this project:

Updates

Submission history