Beck_Moulton

Posted on Apr 10

Private AI is Here: Building a 100% Offline Mental Health Tracker with WebLLM and React

#react #webgpu #webllm #opensource

Privacy is no longer a luxury; it’s a requirement—especially when it comes to our inner thoughts. In an era where "the cloud" is just someone else's computer, many users are hesitant to share their daily struggles with centralized AI servers.

What if you could build a Personal Mental Health Journal that provides deep emotional insights and Cognitive Behavioral Therapy (CBT) feedback, but never sends a single byte of data to a server?

Today, we are diving into the world of Edge AI and Local LLMs. We will leverage WebLLM, WebGPU, and React to run large language models directly in the browser. By the end of this guide, you'll know how to turn a standard Chrome tab into a powerful, private, and offline-first AI analytical engine.

If you are looking for more production-ready patterns for AI-driven applications, I highly recommend checking out the deep dives over at the WellAlly Blog, which served as a major inspiration for this privacy-centric architecture.

The Architecture: Local-First Intelligence

Traditionally, AI apps follow a Client-Server model. We’re flipping the script. By using TVM.js and WebGPU, the browser communicates directly with the machine's hardware to execute model weights stored in the local cache.

Data Flow Overview

graph TD
    A[User writes Journal Entry] --> B[React UI State]
    B --> C{WebLLM Engine}
    C -->|WebGPU Acceleration| D[Llama-3 / Mistral Model]
    D --> E[Sentiment & CBT Feedback]
    E --> B
    B --> F[(IndexedDB - Local Storage)]
    F --> G[Data never leaves device 🔒]

Tech Stack

WebLLM: The high-performance in-browser LLM engine.
TVM.js: The compiler stack that makes running models on WebGPU possible.
React: For building a reactive and responsive journaling interface.
IndexedDB: To store our encrypted logs locally.

Step 1: Initializing the WebLLM Engine

First, we need to set up our "Local Brain." WebLLM downloads model shards and caches them in the browser's Cache API. On the second load, it's instant!

// hooks/useWebLLM.ts
import { useState, useEffect } from 'react';
import * as webllm from "@mlc-ai/web-llm";

export function useWebLLM() {
  const [engine, setEngine] = useState<webllm.MLCEngine | null>(null);
  const [progress, setProgress] = useState(0);

  const initEngine = async () => {
    const selectedModel = "Llama-3-8B-Instruct-v0.1-q4f16_1-MLC";

    const engineInstance = await webllm.CreateMLCEngine(selectedModel, {
      initProgressCallback: (report) => {
        setProgress(Math.round(report.progress * 100));
      },
    });

    setEngine(engineInstance);
  };

  return { engine, progress, initEngine };
}

Step 2: The CBT Prompting Logic

To provide mental health feedback, we don't just want a "chat." We want a structured analysis. We’ll instruct the model to act as a supportive therapist using CBT principles (identifying cognitive distortions like "all-or-nothing thinking").

const ANALYZE_PROMPT = (entry: string) => `
  You are a compassionate mental health assistant. Analyze the following journal entry:
  "${entry}"

  Please provide:
  1. Sentiment Score (1-10)
  2. Cognitive Distortions identified (if any)
  3. A short, supportive CBT-based reflection.

  Return the result in valid JSON format.
`;

const handleAnalyze = async (text: string) => {
  if (!engine) return;

  const messages = [
    { role: "system", content: "You are a private mental health analyzer." },
    { role: "user", content: ANALYZE_PROMPT(text) }
  ];

  const reply = await engine.chat.completions.create({
    messages,
    response_format: { type: "json_object" } // Force structured output
  });

  const analysis = JSON.parse(reply.choices[0].message.content);
  saveToIndexedDB(text, analysis);
};

Step 3: Storing Data Locally with IndexedDB

Since we are building a privacy-first app, we avoid localStorage (size limits) and use IndexedDB to store years of journals without hitting a wall.

import { openDB } from 'idb';

const dbPromise = openDB('JournalDB', 1, {
  upgrade(db) {
    db.createObjectStore('entries', { keyPath: 'id', autoIncrement: true });
  },
});

export async function saveToIndexedDB(content: string, analysis: any) {
  const db = await dbPromise;
  return db.add('entries', {
    content,
    analysis,
    timestamp: new Date().toISOString(),
  });
}

The "Official" Way: Advancing Your AI Skills

While this tutorial covers the basics of WebLLM, building production-grade Edge AI involves handling race conditions, model quantization, and memory management for mobile browsers.

For more advanced patterns on optimizing local inference and building secure AI workflows, you absolutely must check out the resources at WellAlly Tech Blog. They provide high-level architectural insights that help bridge the gap between "cool hobby project" and "scalable enterprise solution."

Conclusion: The Future is Local

By combining the power of WebGPU with modern LLMs, we've built an application that:

Respects Privacy: No data leaves the browser.
Saves Costs: $0 API bill from OpenAI/Anthropic.
Works Offline: Journal on a plane, in a cabin, or during a digital detox.

The browser is no longer just a document viewer; it's a sophisticated AI runtime. Start experimenting with WebLLM today and reclaim your data!

What do you think? Would you trust a local AI with your journal more than a cloud-based one? Let me know in the comments below! 👇

DEV Community