AgriFlow: Cultivating Intelligence for the Future of Farming

💡 Inspiration

Agriculture is facing a perfect storm: climate instability, skyrocketing input costs, and soil degradation. While reviewing the state of modern AgTech, I noticed that most tools are fragmented—farmers have one app for weather, another for markets, and a third for record-keeping.

I was inspired to build AgriFlow to create a unified "Field Command" operating system. My goal was to empower farmers—specifically those transitioning to regenerative agriculture—with a tool that doesn't just track data, but actively helps them make decisions using multimodal AI. I wanted to bridge the gap between traditional wisdom and the cutting-edge capabilities of Generative AI.


🧠 What I Learned

Building AgriFlow was a deep dive into the intersection of biophysics and real-time AI.

  • Multimodal AI Integration
    I learned how to leverage the Google GenAI SDK not just for text, but for vision (diagnosing crop diseases from photos) and low-latency voice interactions.

  • The Live API
    Implementing the VoiceAgent taught me how to manage WebSocket streams for real-time audio processing, handling raw PCM audio data, and syncing AI responses with frontend state.

  • Agricultural Mathematics
    I had to understand the physics behind resource management—specifically calculating Evapotranspiration (ET) to optimize irrigation schedules.

Where:

  • Kc is the crop coefficient dependent on the growth stage.

    • Offline-First Architecture
      I learned to build a robust PersistenceService using LocalStorage to mimic a complex database, ensuring the app feels responsive even in low-connectivity rural areas.

🛠️ How I Built It

AgriFlow is a React 19 application built with TypeScript and styled using Tailwind CSS.

1. The Architecture

  • State Management
    A central FarmContext manages the complex state of crops, livestock, and user settings, exposing actions to the UI components.

  • Data Visualization
    I used Recharts to render complex financial projections and market volatility trends.

  • The AI Core (Gemini 3)

    • Advisor: Uses gemini-3-flash-preview with Grounding (Google Search) to provide up-to-date market news and agronomy advice.
    • Vision: The CropManager captures image data and sends it to the model to identify pests or nutrient deficiencies.
    • Voice OS: The VoiceAgent establishes a bi-directional stream using gemini-2.5-flash-native-audio.

2. The Math Behind the Resources

To help farmers save money, I built a ResourceCalculator. The logic for determining the exact irrigation volume required relies on the following derivation:

Where:

  • V is the volume in liters
  • A is the area in hectares (ha)
  • η (eta) is the irrigation system efficiency (e.g., 0.9 for drip irrigation)

3. Function Calling Implementation

One of the coolest features is the Voice Agent's ability to control the app. I defined tools like navigateApp and createTask in the AI configuration.

// VoiceAgent.tsx
const navTool: FunctionDeclaration = {
  name: "navigateApp",
  description: "Navigate to a specific section of the application.",
  parameters: {
    type: Type.OBJECT,
    properties: {
      destination: {
        type: Type.STRING,
        enum: ["DASHBOARD", "CROPS", "MARKET", ...],
      }
    },
    required: ["destination"]
  }
};
```markdown
# AgriFlow: Cultivating Intelligence for the Future of Farming

## 💡 Inspiration

Agriculture is facing a perfect storm: climate instability, skyrocketing input costs, and soil degradation. While reviewing the state of modern AgTech, I noticed that most tools are fragmented—farmers have one app for weather, another for markets, and a third for record-keeping.

I was inspired to build **AgriFlow** to create a unified **"Field Command" operating system**. My goal was to empower farmers—specifically those transitioning to regenerative agriculture—with a tool that doesn't just track data, but actively helps them make decisions using multimodal AI. I wanted to bridge the gap between traditional wisdom and the cutting-edge capabilities of Generative AI.

---

## 🧠 What I Learned

Building AgriFlow was a deep dive into the intersection of biophysics and real-time AI.

- **Multimodal AI Integration**  
  I learned how to leverage the Google GenAI SDK not just for text, but for vision (diagnosing crop diseases from photos) and low-latency voice interactions.

- **The Live API**  
  Implementing the VoiceAgent taught me how to manage WebSocket streams for real-time audio processing, handling raw PCM audio data, and syncing AI responses with frontend state.

- **Agricultural Mathematics**  
  I had to understand the physics behind resource management—specifically calculating Evapotranspiration (ET) to optimize irrigation schedules.

  Where:
  - **Kc** is the crop coefficient dependent on the growth stage.

- **Offline-First Architecture**  
  I learned to build a robust `PersistenceService` using LocalStorage to mimic a complex database, ensuring the app feels responsive even in low-connectivity rural areas.

---

## 🛠️ How I Built It

AgriFlow is a **React 19** application built with **TypeScript** and styled using **Tailwind CSS**.

### 1. The Architecture

- **State Management**  
  A central `FarmContext` manages the complex state of crops, livestock, and user settings, exposing actions to the UI components.

- **Data Visualization**  
  I used **Recharts** to render complex financial projections and market volatility trends.

- **The AI Core (Gemini 3)**  
  - **Advisor**: Uses `gemini-3-flash-preview` with Grounding (Google Search) to provide up-to-date market news and agronomy advice.  
  - **Vision**: The `CropManager` captures image data and sends it to the model to identify pests or nutrient deficiencies.  
  - **Voice OS**: The `VoiceAgent` establishes a bi-directional stream using `gemini-2.5-flash-native-audio`.

---

### 2. The Math Behind the Resources

To help farmers save money, I built a `ResourceCalculator`. The logic for determining the exact irrigation volume required relies on the following derivation:

Where:
- **V** is the volume in liters  
- **A** is the area in hectares (ha)  
- **η (eta)** is the irrigation system efficiency (e.g., 0.9 for drip irrigation)

---

### 3. Function Calling Implementation

One of the coolest features is the Voice Agent's ability to control the app. I defined tools like `navigateApp` and `createTask` in the AI configuration.

```ts
// VoiceAgent.tsx
const navTool: FunctionDeclaration = {
  name: "navigateApp",
  description: "Navigate to a specific section of the application.",
  parameters: {
    type: Type.OBJECT,
    properties: {
      destination: {
        type: Type.STRING,
        enum: ["DASHBOARD", "CROPS", "MARKET", ...],
      }
    },
    required: ["destination"]
  }
};

🚧 Challenges I Faced

1. Real-Time Audio Processing

Integrating the Gemini Live API was the biggest technical hurdle. The browser's AudioContext operates at variable sample rates, but the model expects specific PCM formats.

  • The Challenge
    Sending raw audio from the microphone often resulted in static or connection drops.

  • The Solution
    I implemented a custom floatTo16BitPCM converter and an arrayBufferToBase64 utility to ensure the binary data stream was perfectly formatted for the WebSocket message payload.


2. Simulating a Living World

I wanted the app to feel alive even without a backend.

  • The Challenge
    Making market prices and weather feel dynamic and realistic.

  • The Solution
    I wrote a MarketService that uses a random walk algorithm with trend bias to simulate commodity price volatility, and a deterministic weather generator based on geolocation coordinates.


3. Strict Type Safety

Using TypeScript with complex AI responses (which can be unpredictable) required rigorous type guarding. I ensured that the JSON returned by the AI for the Eco Tycoon game and the NewsHub strictly adhered to my interfaces to prevent runtime crashes.


🚀 What's Next

AgriFlow is currently a powerful frontend prototype. The next steps include:

  • IoT Integration
    Connecting the dashboard to real soil moisture sensors via MQTT.

  • Market API
    Replacing the simulated market data with a live commodities exchange API.

  • Offline PWA
    Fully converting the app to a Progressive Web App (PWA) so farmers can use the AI diagnostic tools completely offline in remote fields.

Built With

  • ai
  • and
  • charting).
  • css3.-framework:-react-19-(leveraging-the-latest-hooks-and-concurrent-features).-styling:-tailwind-css-(for-rapid
  • dark
  • data
  • design
  • engine:
  • financial
  • for
  • genai
  • google
  • google/genai).
  • html5
  • icons:
  • languages:-typescript-(-)
  • lucide
  • mode
  • recharts
  • responsive
  • sdk
  • support).
  • visualization:
  • yield
Share this project:

Updates