DEV Community

Cover image for GrassRoot: The Local AI Pocket Plant That Forces You to Touch Grass 🌱
Vaidik Raval
Vaidik Raval

Posted on Originally published at github.com AI-assisted

GrassRoot: The Local AI Pocket Plant That Forces You to Touch Grass 🌱

#devchallenge #hf26challenge #hacktoberfest #opensource

Hacktoberfest: Maintainer Spotlight

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

The Developer Dilemma

We have all lived through this scenario:

  • 10:00 AM: "I'm just going to fix this one quick CSS centering bug or review this pull request."
  • 3:45 PM: You blink. Your eyes burn like embers, you have 38 browser tabs open, and your spine is shaped like a question mark.

Standard break reminders simply don't work. A sterile popup notification like "You have been active for 45 minutes" is instantly swiped away without a second thought.

Meet GrassRoot 🌱

GrassRoot is an open-source, local-AI-powered Manifest V3 Chrome Extension featuring an expressive desktop houseplant mascot that lives right in your browser toolbar.

Instead of boring clinical alerts, GrassRoot:

  1. Monitors screen fatigue in real time: It keeps watch over your session duration.
  2. Has feelings & visual states:
    • 🌱 Sprouting Fresh (0–24m): Cheerful green leaves swaying rhythmically, perky stem, and sparkling eyes.
    • 🥱 Getting Thirsty (25–44m): Drooping leaves, drowsy eyelids, and warning progress gauge.
    • 🥀 Parched & Wilting (45m+ threshold): Slumps over the pot edge, turns an olive-brown tone, and triggers an urgent desktop alert: "🌱 I am wilting! Step outside and touch grass right now!"
  3. Contextual AI Quests (Powered by Local Ollama): It inspects what you're currently working on (e.g., debugging React code on GitHub, watching tutorials, or writing documentation) and prompts a local open-source LLM (phi3 or llama3) to craft a punchy, sarcastic 2-sentence outdoor micro-adventure.
  4. Instant Dopamine on Completion: When you step outside and click "🌱 Done!", the plant blooms with pink flowers, bursts into colorful particle confetti 🎉, and plays a soothing synthesizer nature chime 🎵!

Who Is It For?

  • Developers, students, and writers prone to hours of hyperfocus.
  • Privacy-conscious users who want intelligent assistance without sending their browsing history to commercial cloud APIs.
  • Anyone whose houseplant has died and needs a digital one that actually protects their health!

Demo

Here is how the dynamic SVG mascot transforms in real time as screen time advances:

State Screen Fatigue Plant Mascot Reaction
🌱 Sprouting Fresh 0 – 24 mins Radiant emerald leaves swaying in the virtual breeze; gentle smiling expression.
🥱 Getting Thirsty 25 – 44 mins Leaves tilt downward; eyelids get heavy; reminder to wrap up current sprint.
🥀 Parched & Wilting 45+ mins Plant slumps over pot edge, trembling with thirst; sends desktop alert to touch grass.
🌸 Thriving & Blooming Quest Complete! Flowers burst into bloom, golden aura ring appears, celebratory confetti & chimes!

🎮 Live Interaction:

  • Poke the plant: Click the plant pot anytime! It performs an animated spring wobble, emits a playful synth pop sound, and delivers witty remarks like: > "Hey! Don't poke me, go poke some actual moss outside!"
  • Try a generated quest: > "Your uncommitted git branch won't evaporate, but my leaves will. Step onto your porch, locate a real tree, and explain your bug to a leaf for 2 minutes."

(Screenshots and interactive demo available in the repository!)

Code

GitHub logo Vaidik-Raval / Meet-GrassRoot

🌱 GrassRoot: The Local AI Touch-Grass Companion

An open-source Manifest V3 Chrome Extension powered by local Ollama AI models. It monitors screen fatigue, features an animated desktop plant mascot that wilts when you work too long, and generates witty, contextual outdoor micro-quests to get you away from the screen and into the real world.

✨ Features

  • 🌿 Dynamic Animated Plant Mascot: An expressive SVG houseplant living in your toolbar that shifts through 4 distinct visual states
    • Sprouting Fresh (Hydrated & perky, leaves gently swaying)
    • Getting Thirsty (25–44 minutes of active screen time)
    • Parched & Wilting (45+ minutes, leaves slumped, begging for outdoor air)
    • Thriving & Blooming (Sprouts flowers and golden aura after completing a quest)
  • 🤖 100% Local & Private AI Integration: Connects directly to Ollama running on your machine (http://localhost:11434). Zero cloud subscriptions, zero telemetry, full privacy.
  • 🎯 Context-Aware Micro-Quests: Inspects active tab themes…
View on GitHub

The entire codebase is 100% open-source under the MIT License:
👉 GitHub Repository: https://github.com/Vaidik-Raval/Meet-GrassRoot

Project Architecture: 

Meet-GrassRoot/
├── manifest.json       # Chrome Manifest V3 declaration & permissions
├── background.js       # Background service worker (timers, alarms, Ollama fetch)
├── content.js          # Lightweight tab context & topic keyword extractor
├── popup.html          # Dark-forest glassmorphism UI & interactive SVG mascot
├── popup.js            # State machine, Web Audio API synth, confetti physics
├── styles.css          # Design tokens, swaying & drooping CSS keyframes
├── icons/              # Extension icons (16x16, 48x48, 128x128)
└── README.md           # Quick setup & Ollama CORS guide
Enter fullscreen mode Exit fullscreen mode

How I Built It

1. Local Open-Source AI (Ollama + phi3 / llama3)

Rather than depending on proprietary cloud APIs, GrassRoot connects directly to a local Ollama instance at http://localhost:11434.

  • Model of Choice: Microsoft's phi3 (default) or Meta's llama3. phi3 runs locally with sub-second latency and delivers razor-sharp, sarcastic humor without burning CPU/GPU cycles.
  • Dynamic System Prompting: 
  const systemPrompt = `You are GrassRoot, a sarcastic yet loving pocket houseplant living in a browser extension. 
  The user has been staring at a screen too long. 
  Generate a short, punchy, witty 2-sentence outdoor micro-quest to force them to touch grass right now. 
  Keep it actionable (e.g., walk barefoot on grass for 2 minutes, look at a cloud, stretch outside). 
  Do not use bullet points or preamble. Deliver only the witty quest.`;
Enter fullscreen mode Exit fullscreen mode

2. Context-Aware In-Page Intelligence (content.js)

When you request a quest, content.js safely extracts high-level metadata (domain name, page category, and non-sensitive topic keywords) without collecting any private information:

  • If you're on GitHub / StackOverflow, the prompt knows you're knee-deep in code and suggests a "debugging stroll".
  • If you're on YouTube / Netflix, it urges you to trade pixel streams for real sky horizons.
  • If you're browsing late at night, it crafts a quest tailored to cool evening air.

3. Conquering Chrome Extension CORS with Ollama

Because Chrome Extensions execute network requests from a unique chrome-extension://<id> origin, standard local endpoints block them by default.

To solve this, GrassRoot provides built-in diagnostics and straightforward setup instructions:

# Windows PowerShell:
$env:OLLAMA_ORIGINS="chrome-extension://*"; ollama serve

# macOS / Linux:
OLLAMA_ORIGINS="chrome-extension://*" ollama serve
Enter fullscreen mode Exit fullscreen mode

Built-in Reliability: If Ollama is offline or warming up, GrassRoot gracefully switches to a curated Offline Quest Vault so the extension remains completely functional without throwing blank screens!

4. Zero-Dependency Audio & Confetti

To keep the extension lightweight and instantaneous:

  • Sound Synthesis: Uses the native browser AudioContext to procedurally generate soothing harp arpeggio chords upon quest completion and playful pops when poked. Zero external .mp3 files required!
  • Particle Confetti: Built with an optimized HTML5 Canvas overlay running smooth 60 FPS physics.

Why Does Open Innovation Matter?

Open innovation is the cornerstone of why GrassRoot can exist in this form:

  1. Absolute User Privacy: Screen fatigue extensions need to understand what you're doing to make relevant recommendations. With open-weight local AI, your browsing habits never leave your computer. No telemetry, no logs, and no cloud data harvesting.
  2. Zero Financial Barriers: Users don't need credit cards, API keys, or recurring subscription fees. Anyone with a laptop can install Ollama, pull a model, and run their own personal assistant for free forever.
  3. True Offline Resilience: Cloud APIs fail during outages, rate limits, or network drops. Open-source local models run on a plane, in a cabin, or during power fluctuations without breaking a sweat.
  4. Community Extensibility: Because the models, extension code, and prompts are completely open, contributors can easily plug in fine-tuned botanical personas, multi-language support, or new mascots (cacti, bonsai trees, succulents).

My Agent Session

This project was ideated, planned, architected, and coded with pairing from an agentic AI coding environment.

Key engineering highlights accomplished during the session:

  • Designed Manifest V3 service worker lifecycle with chrome.alarms to circumvent MV3 background script idle terminations.
  • Created standalone, self-generating SVG assets and PNG icon builders.
  • Handled Chrome Extension cross-origin headers (OLLAMA_ORIGINS) and implemented failover mechanisms for local LLM daemon downtimes.

Prize Categories

  • Main Track: Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
  • Partner Categories / Highlights:
    • Best Use of Open-Source / Open-Weight AI (Ollama + phi3 / llama3)
    • Most Creative Real-World Health & Wellness Hack
    • Best Local-First & Privacy-Preserving Extension

Quick Start (Run It in 60 Seconds)

  1. Clone the Repo: 
   git clone https://github.com/Vaidik-Raval/Meet-GrassRoot.git
Enter fullscreen mode Exit fullscreen mode
  1. Start Ollama with CORS: 
   $env:OLLAMA_ORIGINS="chrome-extension://*"; ollama serve
Enter fullscreen mode Exit fullscreen mode
  1. Load into Chrome:
    • Open chrome://extensions/
    • Enable Developer mode
    • Click Load unpacked and select the Meet-GrassRoot folder!

Did you step outside today? Drop a ⭐ on GitHub and let me know in the comments what wild outdoor quest GrassRoot generated for you! 🌿

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.