DEV Community: Bechattaoui Dhiaeddine

Visualizing AI Memories: Building a Local Knowledge Graph for Agent Logs using Tauri & React

Bechattaoui Dhiaeddine — Mon, 08 Jun 2026 13:45:29 +0000

As AI agents become more advanced, they are doing more than just answering questions—they are taking actions, analyzing files, and executing multi-step plans on our local machines.

But this raises a massive problem: How do we debug their thought process? When an agent fails, or hallucinates, reading through a 5,000-line JSON transcript log is a nightmare.

To solve this, I built Cortex, an open-source, local-first memory visualizer that parses AI agent logs (specifically Gemini logs) and transforms them into interactive Knowledge Graphs and Timelines.

Here is a look under the hood at how I built it using Tauri, React, and Rust.

The Architecture: Why Local-First?

AI agent logs often contain extremely sensitive data. If an agent is indexing your local file system, reading your codebase, or executing terminal commands, you cannot safely upload those transcript logs to a cloud-based visualization tool.

It had to run entirely on the user's machine. I chose Tauri v2 for the architecture:

Rust Backend: For lightning-fast local file system scanning and data processing.
React + TypeScript Frontend: For rendering complex interactive graphs.
Tauri IPC: To securely bridge the local logs to the UI without a traditional web server.

Step 1: Scanning the File System with Rust

The first technical challenge is automatically finding the logs. Gemini and other agents typically store their conversation history in hidden app data directories (like ~/.gemini/).

Instead of making the user manually upload JSON files, the Rust backend actively scans the hard drive on startup.

// A simplified example of the Tauri command
#[tauri::command]
fn get_gemini_conversations() -> Result<Vec<Conversation>, String> {
    let mut conversations = Vec::new();
    let log_dir = dirs::home_dir().unwrap().join(".gemini/logs");

    // Read the directory and parse the raw transcripts
    for entry in std::fs::read_dir(log_dir).unwrap() {
        // ... parse JSONL or Markdown files
        conversations.push(Conversation { id, transcript });
    }

    Ok(conversations)
}

This command is exposed to the frontend, which fetches the array of conversations the moment the app loads.

Step 2: Parsing Transcripts into a Knowledge Graph

Once the frontend receives a raw transcript string, we need to convert text into structured relational data.

Inside the React app, a custom parser reads the transcript and extracts:

Nodes: Key decisions, tool executions, or insights.
Edges: The relationships between a thought, a tool call, and the resulting outcome.
Timeline Events: The chronological sequence of actions.

// Inside App.tsx
useEffect(() => {
  if (selectedConvId) {
    const conv = conversations.find(c => c.id === selectedConvId);
    if (conv) {
      // The magic happens here: parsing flat text into a Graph structure
      const parsed = parseConversation(conv.transcript);
      setNodes(parsed.nodes);
      setEdges(parsed.edges);
      setTimeline(parsed.timeline);
    }
  }
}, [selectedConvId]);

Step 3: Visualizing the Mind of the AI

With the data structured, we render two main views:

The Memory Graph: A visual web of nodes (e.g., "User Request" -> "Search Web" -> "Summary"). This allows you to instantly see how the AI clustered information.
The Timeline: A chronological step-by-step breakdown. If the agent got stuck in a loop, the timeline makes it blatantly obvious.

Because the app is built with Tauri, the React frontend renders these complex visualizations using the OS's native webview engine, ensuring it remains incredibly snappy even with thousands of nodes, while consuming a fraction of the RAM an Electron app would use.

The Future: Vector Databases

Right now, Cortex parses local logs directly. The next big step on the roadmap is integrating a local Vector Database to allow semantic searching across all past agent memories. Imagine asking your visualizer: "Show me the graph of the time the agent fixed my Webpack config."

Check it out!

If you are building AI agents, interested in Knowledge Graphs, or just want to see a cool Tauri app in action, you can check out the source code here:

⭐ View Cortex on GitHub

I would love to hear your feedback, and contributions are always welcome!

How I built an offline, privacy-first receipt scanner using Rust, Tauri, and WebAssembly OCR

Bechattaoui Dhiaeddine — Mon, 08 Jun 2026 13:44:34 +0000

I love the idea of subscription and warranty trackers. But the irony of paying a monthly cloud subscription just to track my other subscriptions—while handing over my personal financial data—always bothered me.

I wanted a "Life Ops" command center that was completely local, ridiculously fast, and actually respected my privacy.

So, I built OpenAdmin. It’s an open-source, local-first dashboard built with Tauri, React, and Rust. It features an embedded SQLite database, a beautiful Glassmorphism UI, and—the coolest part—completely offline receipt OCR via WebAssembly.

Here is a breakdown of how I built it and the technical decisions behind it.

The Architecture: Why Tauri?

For a long time, Electron was the default for web-tech desktop apps. But for a simple dashboard, shipping a bundled Chromium browser that eats 500MB of RAM was out of the question.

I chose Tauri v2 because it hooks into the native OS webview (WebKit on Mac, WebView2 on Windows), resulting in:

A tiny binary size.
Negligible RAM usage.
A blazing-fast backend written in Rust.

The architecture is simple:

Frontend: React + TypeScript + Vanilla CSS (for that sweet custom glassmorphism).
Backend: Rust.
Database: Local SQLite (rusqlite) embedded directly into the app.

The Challenge: Offline OCR

The standout feature of OpenAdmin is the ability to drag and drop a receipt, have the app scan it, and automatically extract the "Total Cost" and raw text without ever making a network request to an API like Google Cloud Vision or AWS Textract.

To achieve this entirely offline, I used Tesseract.js.

Despite the .js in the name, Tesseract.js is actually a WebAssembly (WASM) port of the famous C++ Tesseract OCR engine. It runs directly inside the Tauri Webview thread.

How the implementation works:

The Dropzone: A React component listens for the onDrop event when a user drops an image file.
The Worker: We spin up a Tesseract WebAssembly worker.

import Tesseract from 'tesseract.js';

const performOCR = async (file: File) => {
  // Runs 100% locally in the browser/webview via WASM
  const { data: { text } } = await Tesseract.recognize(file, 'eng');
  return text;
};

The Regex Extraction: Once we have the raw text blob, we run a regular expression to intelligently hunt for the final total cost, looking for keywords like "Total" followed by a currency symbol.

const match = text.match(/(?:Total|Amount|Sum)[\s:]*?\$?\s*([0-9,]+\.[0-9]{2})/i);
if (match) {
  const extractedCost = parseFloat(match[1].replace(/,/g, ''));
}

Because this runs entirely client-side, it costs $0 in API fees and your receipt data never leaves your hard drive.

Rust Backend: SQLite & Native Notifications

While the frontend handles the UX and WASM, Rust does the heavy lifting for persistence and system-level integrations.

I used the rusqlite crate to automatically initialize a local .db file in the user's hidden app data directory. We use Tauri's #[tauri::command] macro to expose database operations to the React frontend.

But we didn't stop at just CRUD operations. We wanted the app to actively alert you when a warranty or subscription was about to expire.

We spawned a background Rust thread during Tauri setup that wakes up periodically, queries the SQLite database for items expiring within 7 days, and uses tauri-plugin-notification to trigger a native Mac OS push notification.

tauri::async_runtime::spawn(async move {
    loop {
        // Query SQLite for expiring items
        if let Some(item) = get_expiring_item(&db) {
            // Trigger native OS notification
            app_handle.notification()
                .title("Warranty Expiring!")
                .body(&format!("Your {} is expiring soon.", item.name))
                .show()
                .unwrap();
        }
        tokio::time::sleep(Duration::from_secs(86400)).await; // Sleep for a day
    }
});

The Result

The end result is OpenAdmin: a lightning-fast, highly secure, zero-telemetry desktop application that solves a real-world problem without sacrificing user privacy.

Building with Tauri + Rust forces you to think carefully about where your data lives and how it moves, and WebAssembly is proving to be a superpower for bringing complex server-side capabilities (like OCR) directly to the edge.

Check it out!

If you're interested in local-first apps, Rust, or just want a cool dashboard to track your own subscriptions without giving away your data, check out the source code!

⭐ View OpenAdmin on GitHub

I'd love to hear your thoughts, feedback, or any Pull Requests!