PlantNeeds

PlantNeeds: The AI gardener that knows your plants—and your weather.

Comment

Inspiration

Over 70% of houseplants die from overwatering, not neglect. Plant enthusiasts juggle erratic watering schedules, unpredictable weather swings, and perplexing leaf symptoms. Existing plant applications behave like static digital encyclopedias: they provide generic reference text but lack context, cannot inspect local weather, and cannot reason about actual care logs.

When OpenAI and the W3C community introduced WebMCP (document.modelContext.registerTool), we realized websites no longer need to be passive surfaces where AI agents clumsily guess buttons via computer vision or brittle DOM scraping. We envisioned a web app where an AI agent acts as a genuine gardener: checking live rainfall, cross-referencing care records, diagnosing ailments from physical evidence, and executing care routines—while the human watches the interface update live in real time.

"Plant apps today are reference books. PlantNeeds is an active gardener."

What it does

PlantNeeds is a full-stack botanical management application natively designed for dual consumption: human interaction via a glassmorphic interface and AI agent interaction via 7 WebMCP tools.

1. Dual-Audience Architecture

Humans click buttons and monitor dashboards; AI agents (such as ChatGPT in its in-app browser or Chrome with the WebMCP flag) discover and call registered browser tools via document.modelContext.registerTool(). Both share identical backend business logic and database persistence.

2. Weather-Adjusted Rain Skipping (Flagship Tool: get_watering_forecast)

Outdoor plants are automatically cross-referenced with live hyperlocal rainfall data (past 7 days + 7-day forecast via Open-Meteo). The agent computes effective precipitation:

$$P_{\text{eff}} = P_{\text{recent}} + \gamma \cdot P_{\text{forecast}}$$

Where $\gamma = 0.5$ dampens forecast uncertainty. If $P_{\text{eff}} \ge W_{\text{weekly}}$ (where $W_{\text{weekly}}$ is the species' weekly water demand), the recommendation emits: $$\text{Verdict} = \text{SKIP} \quad (\text{"Rain already covered outdoor beds"})$$ Indoor plants are automatically isolated from rainfall logic.

3. History-Aware Plant Problem Diagnosis (diagnose_problem)

Instead of static symptom lookup tables, PlantNeeds scores candidate causes against actual care history stored in PostgreSQL:

$$S(C) = B(C, \text{symptoms}) + \sum_{k} w_k \cdot \mathbb{I}(\text{Condition}_k)$$

If a plant presents with yellow leaves and drooping, but care logs show: $$\Delta t_{\text{interval}} < f_{\text{recommended}} \quad \wedge \quad \text{drainage} = \text{false}$$ The likelihood of root rot / overwatering surges above 90%, citing concrete evidence rather than generic guesses.

4. Interactive Care Scheduling & Growth Tracking (get_care_schedule, log_care_activity, log_growth)

Urgency is continuously ranked: $$U(p) = \frac{\Delta t_{\text{since}}}{f_{\text{water}}} - 1$$ When $U(p) \ge 0$, the plant is flagged overdue. When the agent logs care (source: 'agent'), countdown timers reset instantly.

5. Reactive Live-Sync Animation

When the AI agent performs an action through WebMCP, PostgreSQL records the mutation, the client store refetches state, and the UI triggers an Agent Pulse ripple animation and a notification toast (🤖 Monstera deliciosa watered by agent) without refreshing the page.

How we built it

We implemented PlantNeeds around strict separation of concerns, ensuring zero duplicated logic between human and AI interfaces:

              ┌──────────────────────┐         ┌────────────────────────┐
              │    Human Web UI      │         │   WebMCP Agent Layer   │
              │  Buttons, Modals     │         │  7 × registerTool()    │
              └──────────┬───────────┘         └───────────┬────────────┘
                         │  UI Events                      │  Tool Execution
                         └────────────────┬────────────────┘
                                          ▼
                         ┌─────────────────────────────────┐
                         │    Client Logic & Event Bus     │
                         │   (Vite + Reactive Pub/Sub)     │
                         └────────────────┬────────────────┘
                                          │  HTTP REST + JWT
                                          ▼
                         ┌─────────────────────────────────┐
                         │    Server Logic Engine (Pure)   │
                         │  (Node.js / Express Middleware) │
                         └────────────────┬────────────────┘
                                          │  Parameterized SQL
                                          ▼
                         ┌─────────────────────────────────┐
                         │    PostgreSQL (Render Managed)  │
                         │  Users, Plants, Care & Growth   │
                         └─────────────────────────────────┘
  • WebMCP Integration (client/src/tools/register-tools.js): Guarded by runtime feature detection ('modelContext' in document). Each tool defines strict JSON Schema validation, semantic input parameters, and descriptive prompts optimized for LLM tool-calling routers.
  • Backend & Logic Engine (server/logic/): Pure functions isolated from transport handlers:
    • plants.js: Care schedule calculation and CRUD mutations.
    • weather.js: Open-Meteo proxy with a 30-minute PostgreSQL caching table to avoid API rate limits.
    • diagnose.js: 20-cause symptom matrix combined with historical timeline heuristics.
    • planner.js: Companion planting rules and seasonal frost-date calendars.
  • Frontend Reactive Store (client/src/state/store.js): Custom micro pub/sub bus triggering targeted DOM updates and glassmorphic micro-interactions.
  • Visual Design: Botanical Ether Glassmorphism (semi-transparent frosted glass rgba(255, 255, 255, 0.22), blur filters, Forest Deep #1B3022 palette, Plus Jakarta Sans, and JetBrains Mono).

Challenges we ran into

  1. Prompt Engineering as AI UX (Constraint C7): Early browser agent tests picked incorrect tools or omitted parameters. We learned that tool descriptions are the "UI for LLMs." Formulating explicit usage triggers, defining enum values, and clarifying sibling differences (e.g. routine care log_care_activity vs milestone journal log_growth) brought agent tool selection to 100% reliability.
  2. Headless & In-App Browser Geolocation: In the ChatGPT in-app browser and automated testing environments, HTML5 GPS permission requests fail silently. We engineered an automatic fallback pipeline: if coordinate parameters are omitted, the backend resolves approximate geographic coordinates via ipapi.co, ensuring rain forecasts never fail on headless agent visits.
  3. Database Contract Drift across Agent Sessions: During initial agent testing, temporary client-generated IDs (p-mtlpewzk-...) caused PostgreSQL UUID validation errors in subsequent tool calls (log_growth). We unified the entire pipeline around strict RFC-4122 UUIDv4 generation across both UI and WebMCP layers.
  4. Zero-Lag UI Synchronization: Agent calls happen outside the DOM event loop. Normal single-page apps do not reflect external state mutations. By coupling WebMCP execution directly to a unified client pub/sub store, mutations immediately trigger DOM diffing and visible audio/visual toast feedback.

Accomplishments that we're proud of

  • True 7-Tool Implementation: Built 7 fully functional, schema-validated WebMCP tools backed by real SQL storage and external weather APIs—not mocked or stubbed responses.
  • End-to-End Autonomous Agent Reasoning: In the ChatGPT browser, an agent can be asked: "It's been raining all week in Seattle. Which of my outdoor plants can skip watering, and why does my kitchen monstera have yellow leaves?" The agent executes get_watering_forecast and diagnose_problem, cross-references live precipitation with soil history, and updates the schedule in under 20 seconds.
  • Single Source of Truth: Perfect architectural parity where human clicks and agent tool calls execute the exact same server logic functions.

What we learned

  • WebMCP turns websites into programmable APIs for agents: Websites no longer need to build brittle third-party integrations or rely on screen-scraping bots. Exposing semantic tools directly within the browser session bridges the gap between conversational AI and transactional web interfaces.
  • Descriptions require defensive specification: An AI agent treats JSON schemas as strict legal contracts. Missing enum values or ambiguous property names lead directly to hallucinated parameters. Explicit schemas are essential.
  • State transparency creates user trust: Watching an agent operate on a user interface without seeing visual feedback is unnerving. Providing dedicated agent activity badges (source: 'agent') and pulse animations gives users immediate confidence in agent actions.

What's next for PlantNeeds

  • Soil Sensor Hardware Integration via Web Bluetooth: Ingesting real-time moisture, electrical conductivity (EC), and lux readings directly from IoT soil probes via WebMCP tools.
  • Multi-Agent Botanical Delegation: Allowing specialized sub-agents (e.g., an irrigation specialist agent and a pest-control agent) to collaborate asynchronously within the same page session.
  • Microclimate & UV Sun Tracking: Incorporating building orientation and indoor window lux modeling into the predictive care engine.

Built With

  • javascript-(es2023+)
  • json
  • node.js-(v20+)
  • open-meteo
  • postgresql
  • render
  • vite
  • webmcp
Share this project:

Updates

Submission history