That's exactly what we built. This project uses Vision Language Models (VLMs) to transform how businesses track inventory, turning a tedious manual process into something that happens in real-time with a quick photo.

Why This Matters

Traditional inventory management has three major problems:

1. Human Error: Typos in product names and miscounts create inconsistent data

2. Time Lag: Records get updated hours or days after stock arrives

3. Wasted Effort: Staff spend valuable time on data entry instead of core tasks

By using computer vision, we eliminate all three issues. The system identifies products from images and syncs them instantly with your ERP.

How It Works

The solution is a full-stack TypeScript application designed for reliability and real-world use. Here's the stack:

• Frontend (React 19): Built with Vite, uses the browser's Camera API for high-resolution captures. Clean, responsive UI with Tailwind CSS and shadcn/ui that works on mobile and desktop

• Backend (NestJS): Handles image processing, API authentication, and ERP synchronization with robust business logic

• Database (PostgreSQL): Uses the pg_trgm extension for fuzzy matching - critical for aligning AI-detected names with existing products

• AI (Vision LLM): Currently using Gemini 3 Flash for exceptional speed and accuracy. With Google's free tier offering 1,500 requests/day, it's incredibly cost-effective for small to medium businesses

The Secret Sauce: Prompt Engineering

Getting structured data from the AI is crucial. We use a carefully crafted prompt that enforces a strict JSON schema, making the response easy to parse without fragile string manipulation. This prompt works across industries - groceries, hardware, electronics, medical supplies, you name it.

Analyze this image and identify all visible inventory items or products.
For each item, provide:
1. Product name (be specific, include size or variant if visible)
2. Brand (if visible on the packaging)
3. Category (e.g., "Industrial", "Dairy", "Office Supplies")
4. Quantity or Size (e.g., "1kg", "12 units", "Box of 50")
5. Confidence score (a number from 0 to 100 based on your certainty)

Return ONLY a valid JSON array. Do not include markdown formatting or extra text.
Structure:
[
  {
    "name": "string",
    "brand": "string or null",
    "category": "string",
    "quantity": "string or null",
    "confidence": number
  }
]

Implementation: The Two-Service Approach

Vision Service

The VisionService talks to the Vision LLM and processes base64-encoded images:

import { Injectable } from '@nestjs/common';
import { GoogleGenAI } from '@google/genai';

@Injectable()
export class VisionService {
  private client: GoogleGenAI;

  constructor() {
    this.client = new GoogleGenAI({ 
      apiKey: process.env.GEMINI_API_KEY 
    });
  }

  async analyzeImage(imageBase64: string) {
    const base64Data = imageBase64.replace(/^data:image\/\w+;base64,/, '');

    const result = await this.client.models.generateContent({
      model: 'gemini-3-flash',
      contents: [{
        role: 'user',
        parts: [
          { text: VISION_PROMPT },
          { 
            inlineData: { 
              data: base64Data, 
              mimeType: 'image/jpeg' 
            } 
          }
        ]
      }]
    });

    const text = result.text;
    if (!text) throw new Error('No response from Vision LLM');

    const jsonMatch = text.match(/\[[\s\S]*\]/);
    if (!jsonMatch) throw new Error('Invalid JSON format');

    return JSON.parse(jsonMatch[0]);
  }
}

Smart Product Matching

The AI rarely gives us exact database matches. The ProductMatchingService uses a three-tier approach to handle this:

async findBestMatch(item: DetectedItem): Promise<ProductMatch> {
  const exactMatch = await this.productRepository.findOne({
    where: { 
      name: item.name, 
      brand: item.brand 
    }
  });

  if (exactMatch) {
    return { 
      productId: exactMatch.id, 
      matchScore: 100, 
      isManualAddNeeded: false 
    };
  }

  const fuzzyMatches = await this.productRepository.query(
    `SELECT *, similarity(name, $1) as score 
     FROM products 
     WHERE similarity(name, $1) > 0.3 
     ORDER BY score DESC 
     LIMIT 1`,
    [item.name]
  );

  if (fuzzyMatches.length > 0) {
    const score = Math.round(fuzzyMatches[0].score * 100);
    return { 
      productId: fuzzyMatches[0].id, 
      matchScore: score, 
      isManualAddNeeded: score < 75 
    };
  }

  return { 
    productId: null, 
    matchScore: 0, 
    isManualAddNeeded: true 
  };
}

Real-World Impact

This isn't just a proof of concept - it's deployed and running in production. Here's what we've seen:

• Massive Time Savings: Scanning a shelf takes seconds instead of minutes of manual entry

• Better Data Quality: AI + fuzzy matching reduces inventory "noise" significantly

• Smart Workflows: Items with confidence scores below 75% get flagged for human review automatically

• Real-Time Visibility: ERP reflects physical stock changes almost instantly, enabling better forecasting

What's Next: Going Local with Ollama

While cloud-based Vision LLMs like Gemini 3 Flash are great for production, there's growing interest in running these models locally for privacy, cost control, or offline operation. That's where Ollama comes in.

Why Run Vision Models Locally?

• Privacy First: Your inventory data never leaves your servers

• Zero API Costs: No per-request charges or rate limits

• Offline Capability: Works without internet connectivity

Use can refer to ollama.com/search?c=vision For vision LLMs

Conclusion

Vision LLMs are transforming inventory management from a manual chore into an automated, real-time process. Whether you choose cloud-based models like Gemini 3 Flash for their speed and accuracy, or local models via Ollama for privacy and cost control, the technology is here and ready for production use.

The future? Even better. As models get smaller and faster, we'll see more edge deployment, multi-camera automation, and seamless ERP integration becoming the standard rather than the exception.

Want to try it yourself? Try here at github.com/yo9e5h/inventory-vision-demo

Table of Contents

1. The Activity Component

2. The useEffectEvent Hook

3. Security Update: CVE-2025-55182

4. Migration Guide

5. Resources

The Activity Component

The Problem: The Tab State Dilemma

React developers have faced an impossible choice when building tabbed interfaces, wizards, or multi-step forms.

Option 1: Conditional Rendering

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div>
      <TabButtons activeTab={activeTab} onChange={setActiveTab} />
      {activeTab === 'home' && <HomeTab />}
      {activeTab === 'settings' && <SettingsTab />}
      {activeTab === 'profile' && <ProfileTab />}
    </div>
  );
}

The problem: Every time you switch tabs, the inactive component is completely destroyed. Form inputs are cleared, scroll positions are lost, and network requests are cancelled. Users type half a message in Settings, switch to Home, then come back to find their work gone.

Option 2: CSS Hiding

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div>
      <TabButtons activeTab={activeTab} onChange={setActiveTab} />
      <div style={{ display: activeTab === 'home' ? 'block' : 'none' }}>
        <HomeTab />
      </div>
      <div style={{ display: activeTab === 'settings' ? 'block' : 'none' }}>
        <SettingsTab />
      </div>
      <div style={{ display: activeTab === 'profile' ? 'block' : 'none' }}>
        <ProfileTab />
      </div>
    </div>
  );
}

The problem: All tabs remain mounted and their effects keep running. Hidden video players continue buffering, hidden dashboards keep polling APIs, and hidden forms keep validating. The browser's layout engine has to manage thousands of invisible DOM nodes. Performance degrades significantly.

The Solution: Activity Component

React 19.2's Activity component gives you the best of both approaches.

import { Activity, useState } from 'react';

function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div>
      <TabButtons activeTab={activeTab} onChange={setActiveTab} />

      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>

      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsTab />
      </Activity>

      <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
        <ProfileTab />
      </Activity>
    </div>
  );
}

How Activity Works

When you set an Activity to mode="hidden", React performs several operations:

1. Preserves the Fiber Tree: React's internal representation of your component stays in memory, so all your useState and useReducer state is preserved

2. Unmounts Effects: All useEffect cleanup functions are called, stopping subscriptions, timers, and network requests

3. Hides the DOM: Sets display: none on the container, so the browser's layout engine doesn't process it

4. Defers Updates: Any state updates that happen while hidden are batched and applied at low priority

Lifecycle comparison:

Traditional Conditional Rendering:

Activity Component:

The key difference: Activity calls cleanup functions but doesn't destroy the Fiber nodes or state.

Real-World Example: Music Player with Tabs

import { Activity, useState, useEffect } from 'react';

function MusicPlayer({ songUrl }) {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);

  useEffect(() => {
    if (!isPlaying) return;

    const audio = new Audio(songUrl);
    audio.currentTime = currentTime;
    audio.play();

    const interval = setInterval(() => {
      setCurrentTime(audio.currentTime);
    }, 100);

    return () => {
      clearInterval(interval);
      audio.pause();
    };
  }, [isPlaying, songUrl, currentTime]);

  return (
    <div>
      <h2>Now Playing</h2>
      <p>Time: {currentTime.toFixed(2)}s</p>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

function App() {
  const [tab, setTab] = useState('player');

  return (
    <div>
      <nav>
        <button onClick={() => setTab('player')}>Player</button>
        <button onClick={() => setTab('library')}>Library</button>
      </nav>

      <Activity mode={tab === 'player' ? 'visible' : 'hidden'}>
        <MusicPlayer songUrl="/song.mp3" />
      </Activity>

      <Activity mode={tab === 'library' ? 'visible' : 'hidden'}>
        <Library />
      </Activity>
    </div>
  );
}

When you switch from Player to Library, the audio stops playing because the effect cleanup runs. The currentTime state is preserved at, for example, 1:32. When you switch back to Player, the audio starts from 1:32 because the state was preserved.

Pre-rendering: Load Before You Need It

One of the most powerful features of Activity is the ability to pre-render components while they're hidden.

function Dashboard() {
  const [activeSection, setActiveSection] = useState('overview');

  return (
    <div>
      <SectionTabs active={activeSection} onChange={setActiveSection} />

      <Activity mode={activeSection === 'overview' ? 'visible' : 'hidden'}>
        <Overview />
      </Activity>

      <Activity mode={activeSection === 'analytics' ? 'visible' : 'hidden'}>
        <Analytics />
      </Activity>

      <Activity mode={activeSection === 'reports' ? 'visible' : 'hidden'}>
        <Reports />
      </Activity>
    </div>
  );
}

function Analytics() {
  const data = use(fetchAnalyticsData());

  return <AnalyticsChart data={data} />;
}

By the time users click the Analytics tab, the data is already loaded and rendered. The transition feels instant.

Important: DOM Side Effects

Most React components work perfectly with Activity, but there's one edge case to watch for: DOM elements with persistent side effects.

function VideoPlayer({ src }) {
  return (
    <Activity mode={isVisible ? 'visible' : 'hidden'}>
      <video src={src} autoPlay />
    </Activity>
  );
}

Problem: When you hide this component, the video tag gets display: none, but the video keeps playing. You can hear the audio even though you can't see it.

Solution: Add an effect with proper cleanup

function VideoPlayer({ src }) {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    video.play();

    return () => {
      video.pause();
    };
  }, []);

  return <video ref={videoRef} src={src} />;
}

Other DOM elements that need this treatment include: audio, iframe, Canvas animations, and WebSocket connections.

Memory Considerations

Activity trades memory for speed. A hidden component stays in memory at roughly 2x the cost of the visible version (Fiber tree + DOM). For most applications, this is acceptable. A few hidden tabs use negligible memory on modern devices.

However, if you're building something with dozens of potential activities, the React team is exploring automatic state destruction for least-recently-used hidden activities.

Current recommendation:

<Activity mode={tab === 'home' ? 'visible' : 'hidden'}>
  <HomeTab />
</Activity>

{isModalOpen && <Modal />}

Use Activity for components the user frequently switches between. Use conditional rendering for components the user is unlikely to return to soon, such as closed modals.

The useEffectEvent Hook

The Problem: Dependency Array Issues

Here's a scenario every React developer has faced:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });

    return () => connection.disconnect();
  }, [roomId, theme]);
}

The problem: You want the effect to reconnect when roomId changes, but not when theme changes. However, ESLint's exhaustive-deps rule correctly requires you to include theme in the dependency array.

If you include theme, the effect tears down and reconnects the entire WebSocket connection just because the user switched from light mode to dark mode. That's wasteful and causes flickering.

The Old Workaround: useRef Pattern

Before useEffectEvent, developers used this pattern:

function ChatRoom({ roomId, theme }) {
  const themeRef = useRef(theme);

  useEffect(() => {
    themeRef.current = theme;
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    connection.on('connected', () => {
      showNotification('Connected!', themeRef.current);
    });

    return () => connection.disconnect();
  }, [roomId]);
}

This works, but it's verbose, error-prone, and the linter can't help you. Plus, it's not obvious to other developers what's happening.

The Solution: useEffectEvent

React 19.2 introduces useEffectEvent to handle this pattern cleanly:

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    connection.on('connected', () => {
      onConnected();
    });

    return () => connection.disconnect();
  }, [roomId]);
}

How it works:

1. useEffectEvent creates a stable function reference that doesn't change between renders

2. The function always sees the latest values of theme and other variables

3. The effect only re-runs when roomId changes

4. ESLint's React Hooks plugin (v6+) understands useEffectEvent and won't complain

Real-World Example: Analytics Logger

A common use case is logging events that need current user state but shouldn't trigger effect re-runs:

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onNavigate = useEffectEvent((visitedUrl) => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    onNavigate(url);
  }, [url]);
}

The effect only re-runs when URL changes, but it always logs the current cart count.

Example: Timers and Intervals

Another classic use case is intervals that need to read current state:

function Counter({ incrementBy }) {
  const [count, setCount] = useState(0);

  const onTick = useEffectEvent(() => {
    setCount(c => c + incrementBy);
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick();
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <p>Incrementing by: {incrementBy}</p>
    </div>
  );
}

The interval never restarts, but it always uses the current incrementBy value.

Creating Reusable Hooks

useEffectEvent is particularly useful when building custom hooks:

function useInterval(callback, delay) {
  const onTick = useEffectEvent(callback);

  useEffect(() => {
    if (delay === null) return;

    const id = setInterval(() => {
      onTick();
    }, delay);

    return () => clearInterval(id);
  }, [delay]);
}

function App() {
  const [count, setCount] = useState(0);
  const [incrementBy, setIncrementBy] = useState(1);

  useInterval(() => {
    setCount(c => c + incrementBy);
  }, 1000);

  return (
    <div>
      <h2>Count: {count}</h2>
      <select 
        value={incrementBy} 
        onChange={e => setIncrementBy(Number(e.target.value))}
      >
        <option value={1}>+1</option>
        <option value={5}>+5</option>
        <option value={10}>+10</option>
      </select>
    </div>
  );
}

Important Rules and Limitations

Only call from effects or other Effect Events:

function Component() {
  const onEvent = useEffectEvent(() => {
    console.log('Event fired');
  });

  useEffect(() => {
    const subscription = subscribe(onEvent);
    return () => subscription.unsubscribe();
  }, []);

  return <div>Component</div>;
}

Do not call useEffectEvent during render or pass it as a prop to DOM elements.

Do not use to hide dependencies:

useEffect(() => {
  saveData(data);
}, [data]);

If data changes should trigger the effect, keep it in the dependency array. useEffectEvent is for reading values that shouldn't trigger re-runs.

Effect Events don't have stable identity:

Do not pass Effect Events to child components or compare them in useEffect. They are meant to be called only from within effects.

When to Use useEffectEvent

Good use cases:

• Reading latest props or state in event handlers inside effects

• Logging with current user context

• Notifications that need current theme or settings

• Timers or intervals that need current values

• Cleanup functions that need current state

Bad use cases:

• Avoiding legitimate reactive dependencies

• Replacing useCallback for child component props

• Hiding bugs in dependency arrays

• Event handlers that should be passed to DOM elements

Migration Guide

Adopting Activity in Existing Apps

Step 1: Identify candidates

Look for components that:

• Are frequently shown or hidden (tabs, modals, sidebars)

• Have expensive setup or teardown (WebSocket connections, subscriptions)

• Contain user input that should be preserved (forms, text editors)

Step 2: Test incrementally

{activeTab === 'settings' && <SettingsTab />}

becomes

<Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
  <SettingsTab />
</Activity>

Step 3: Audit effect cleanup

Make sure your components have proper cleanup:

useEffect(() => {
  const subscription = subscribe();

  return () => {
    subscription.unsubscribe();
  };
}, []);

Enable StrictMode to catch missing cleanup functions.

Adopting useEffectEvent in Existing Apps

Step 1: Find patterns where it helps

Search your codebase for:

const someRef = useRef(someValue);
useEffect(() => { 
  someRef.current = someValue; 
});

or

useEffect(() => {

}, []);

Step 2: Refactor to useEffectEvent

const latestCallback = useRef(callback);
useEffect(() => { 
  latestCallback.current = callback; 
});
useEffect(() => {
  const id = setInterval(() => latestCallback.current(), 1000);
  return () => clearInterval(id);
}, []);

becomes

const onTick = useEffectEvent(callback);
useEffect(() => {
  const id = setInterval(onTick, 1000);
  return () => clearInterval(id);
}, []);

Conclusion

React 19.2's Activity component and useEffectEvent hook solve two fundamental problems that have plagued React developers since the beginning. Activity eliminates the false choice between state preservation and performance when hiding UI. useEffectEvent provides a clean, linter-friendly way to access latest values without unnecessary effect re-runs.

Resources

• React 19.2 Release Notes

• Activity API Reference

• useEffectEvent Hook Reference

• Separating Events from Effects

I’ll show you how to build an AI chatbot that runs entirely on your infrastructure using three cutting-edge technologies:

• Ollama - Run LLMs locally with zero configuration

• TanStack AI - Framework-agnostic, type-safe AI SDK with no vendor lock-in

• React - Build a modern, responsive chat interface

Why Local AI Matters in 2026

The AI landscape has fundamentally shifted. What required datacenter-scale infrastructure in 2023 now runs on a laptop. Here's why developers are choosing local AI:

Privacy & Compliance

• GDPR/CCPA compliance becomes trivial when data never leaves your infrastructure

• Healthcare/finance apps can use AI without HIPAA/PCI concerns

• No telemetry - your conversations aren't training someone else's model

• Corporate secrets stay secret - code assistance without sending source to third parties

Prerequisites

Required Software

• node.js

• npm or pnpm or bun

• Ollama

Checking Your Setup

# Verify Node.js
node --version  # Should be v18.0.0 or higher

# Verify npm
npm --version

Part 1: Setting Up Ollama

Step 1: Install Ollama

brew install ollama

Step 2: Verify Installation

ollama --version
# Should output: ollama version is X.X.X

Ollama automatically starts a background service on http://localhost:11434.

Step 3: Pull a Model

We'll use DeepSeek-R1:1.5B - a small, fast model perfect for development:

ollama pull deepseek-r1:1.5b

First pull takes 5-10 minutes (1.5GB download). Subsequent pulls are instant.

Step 4: Test the Model

ollama run deepseek-r1:1.5b

You'll get an interactive prompt:

>>> Hello! How are you?
I'm doing well, thank you for asking! How can I help you today?

>>> /bye  # Exit with /bye

Success! Ollama is running. Press Ctrl+D or type /bye to exit.

Step 5: Test the API

curl http://localhost:11434/api/generate -d '{
  "model": "deepseek-r1:1.5b",
  "prompt": "Why is the sky blue?",
  "stream": false
}'

You should get a JSON response with the model's answer. This confirms the API is working.

Part 2: Building the Backend with TanStack AI

Project Setup

# Create project directory
mkdir ollama-chatbot
cd ollama-chatbot

# Initialize Node.js project
npm init -y

# Install dependencies
npm install @tanstack/ai @tanstack/ai-ollama express cors dotenv
npm install -D typescript @types/node @types/express @types/cors tsx

# Initialize TypeScript
npx tsc --init

Configure TypeScript

Edit tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Create Environment Config

Create .env:

PORT=3001
OLLAMA_BASE_URL=http://localhost:11434
MODEL=deepseek-r1:1.5b

Build the Server

Create src/server.ts:

import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import { chat, toServerSentEventsResponse } from '@tanstack/ai';
import { ollamaText } from '@tanstack/ai-ollama';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3001;
const MODEL = process.env.MODEL || 'deepseek-r1:1.5b';

app.use(cors());
app.use(express.json());

app.get('/health', (req, res) => {
  res.json({ 
    status: 'ok', 
    model: MODEL,
    ollamaUrl: process.env.OLLAMA_BASE_URL 
  });
});

app.post('/api/chat', async (req, res) => {
  try {
    const { messages } = req.body;

    if (!messages || !Array.isArray(messages)) {
      return res.status(400).json({ error: 'Messages array required' });
    }

    const stream = chat({
      adapter: ollamaText(MODEL),
      messages,
    });

    return toServerSentEventsResponse(stream, res);

  } catch (error) {
    console.error('Chat error:', error);
    res.status(500).json({ 
      error: error instanceof Error ? error.message : 'Internal server error' 
    });
  }
});

app.post('/api/chat/simple', async (req, res) => {
  try {
    const { messages } = req.body;

    const stream = chat({
      adapter: ollamaText(MODEL),
      messages,
    });

    // Collect full response
    let fullResponse = '';
    for await (const chunk of stream) {
      if (chunk.type === 'text-delta') {
        fullResponse += chunk.text;
      }
    }

    res.json({ response: fullResponse });

  } catch (error) {
    console.error('Chat error:', error);
    res.status(500).json({ 
      error: error instanceof Error ? error.message : 'Internal server error' 
    });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Add Scripts to package.json

{
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

Start the Server

npm run dev

Test the Backend

Test health endpoint:

curl http://localhost:3001/health

Test simple chat:

curl http://localhost:3001/api/chat/simple \
  -H "Content-Type: application/json" \
  -d '{
    "messages": [
      {"role": "user", "content": "What is 2+2?"}
    ]
  }'

Expected response:

{
  "response": "2 + 2 equals 4."
}

Perfect! Your backend is working. Keep the server running and open a new terminal for the frontend.

Part 3: Creating the React Frontend

Setup React with Vite

In a new terminal (keep the backend running):

cd ollama-chatbot

npm create vite@latest frontend -- --template react-ts

cd frontend
npm install

npm install @tanstack/react-query axios lucide-react

Configure Development Server

Edit frontend/vite.config.ts to proxy API requests:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
    },
  },
});

This lets you call /api/chat from the frontend without CORS issues.

Build the Chat Interface

Replace frontend/src/App.tsx:

import { useState, useRef, useEffect } from 'react';
import { Send, Bot, User, Loader2 } from 'lucide-react';
import './App.css';

interface Message {
  role: 'user' | 'assistant';
  content: string;
}

function App() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const sendMessage = async () => {
    if (!input.trim() || isStreaming) return;

    const userMessage: Message = { role: 'user', content: input };
    const newMessages = [...messages, userMessage];

    setMessages(newMessages);
    setInput('');
    setIsStreaming(true);

    abortControllerRef.current = new AbortController();

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: newMessages }),
        signal: abortControllerRef.current.signal,
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let assistantMessage = '';

      if (!reader) throw new Error('No reader available');

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') continue;

            try {
              const parsed = JSON.parse(data);
              if (parsed.type === 'text-delta') {
                assistantMessage += parsed.text;
                // Update UI with streaming text
                setMessages([
                  ...newMessages,
                  { role: 'assistant', content: assistantMessage },
                ]);
              }
            } catch (e) {
              // Skip invalid JSON
            }
          }
        }
      }
    } catch (error) {
      if (error instanceof Error && error.name === 'AbortError') {
        console.log('Request cancelled');
      } else {
        console.error('Chat error:', error);
        setMessages([
          ...newMessages,
          { 
            role: 'assistant', 
            content: 'Sorry, an error occurred. Please try again.' 
          },
        ]);
      }
    } finally {
      setIsStreaming(false);
      abortControllerRef.current = null;
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  return (
    <div className="app">
      <div className="chat-container">
        <div className="chat-header">
          <Bot className="icon" />
          <h1>Local AI Chatbot</h1>
          <span className="status">
            {isStreaming ? 'Thinking...' : 'Ready'}
          </span>
        </div>

        <div className="messages">
          {messages.length === 0 && (
            <div className="empty-state">
              <Bot size={64} className="empty-icon" />
              <h2>Start a conversation</h2>
              <p>This chatbot runs entirely on your local machine using Ollama</p>
            </div>
          )}

          {messages.map((msg, idx) => (
            <div key={idx} className={`message ${msg.role}`}>
              <div className="message-icon">
                {msg.role === 'user' ? <User size={20} /> : <Bot size={20} />}
              </div>
              <div className="message-content">
                {msg.content}
              </div>
            </div>
          ))}

          {isStreaming && messages[messages.length - 1]?.role !== 'assistant' && (
            <div className="message assistant">
              <div className="message-icon">
                <Loader2 size={20} className="spinner" />
              </div>
              <div className="message-content typing">
                Thinking...
              </div>
            </div>
          )}

          <div ref={messagesEndRef} />
        </div>

        <div className="input-container">
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Type your message... (Enter to send)"
            disabled={isStreaming}
            rows={1}
          />
          <button 
            onClick={sendMessage} 
            disabled={!input.trim() || isStreaming}
            className="send-button"
          >
            {isStreaming ? (
              <Loader2 size={20} className="spinner" />
            ) : (
              <Send size={20} />
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;

Start the Frontend

# In the frontend directory
npm run dev

Open http://localhost:5173 in your browser.

Congratulations! You now have a working local AI chatbot. Try asking it questions:

• "What is TypeScript?"

• "Write a haiku about local AI"

• "Explain quantum computing in simple terms"

Part 4: Adding Streaming Responses

The code above already implements streaming! Here's how it works:

Backend: TanStack AI Streaming

// In server.ts
const stream = chat({
  adapter: ollamaText(MODEL),
  messages,
});

return toServerSentEventsResponse(stream, res);

TanStack AI's toServerSentEventsResponse automatically:

1. Converts the async iterator to Server-Sent Events format

2. Sends data: prefixed chunks

3. Handles backpressure and errors

4. Sends [DONE] when complete

Frontend: SSE Parsing

// In App.tsx
const reader = response.body?.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  const chunk = decoder.decode(value, { stream: true });
  const lines = chunk.split('\n');

  for (const line of lines) {
    if (line.startsWith('data: ')) {
      const data = line.slice(6);
      const parsed = JSON.parse(data);

      if (parsed.type === 'text-delta') {
        assistantMessage += parsed.text;
        setMessages([...newMessages, { 
          role: 'assistant', 
          content: assistantMessage 
        }]);
      }
    }
  }
}

This creates the "typewriter effect" users expect from modern chatbots.

Key Takeaways

1. Ollama makes local AI trivial - Install, pull model, run. That's it.

2. TanStack AI provides vendor freedom - Switch providers by changing one line

3. React gives you full UI control - Build exactly what your users need

4. Performance is competitive - Often faster than cloud APIs

5. Privacy is guaranteed - Your data never leaves your machine

Fun Fact

I’m using this exact setup to help my wife translate medical documents and reports, and it’s working with about 90–95% accuracy on the local setup. The model being used is translategemma:4b

Resources

• Ollama: ollama.com

• TanStack AI: tanstack.com/ai

• Model Library: ollama.com/library

Recommended Reading

• Ollama Launch: One-Command AI Coding Assistants

• Small Language Models: The Efficient AI Future

Zustand is one of the state management libraries for React. It is a simple and powerful way to manage the state in React.

Why Zustand is better than Redux?

- Redux is Complicated for beginners.

- We have to write more code for even small UI changes in Redux.

- Too much boilerplate code in Redux.

- It's easy to handle multiple stores from multiple folders.

- Easier to set up and maintain than Redux.

Let me show you a sample code for Redux and Zustand for a simple counter app.

Redux

First, we'll set up a store and provider.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

And in our index.tsx file we'll use the provider.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Now We will create a slice to manage the state of the counter.

counterSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

Zustand

In Zustand we just need to create a store and set the state values.

import create from 'zustand'

interface ValueState {
  bears: number
  increment: (by: number) => void
  decrement: (by: number) => void
}

const useStore = create<ValueState>((set) => ({
  value: 0,
  increment: () => set((state) => ({ value: state.value + 1 })),
  decrement: () => set((state) => ({ value: state.value - 1 })),
}))

The main advantage of Zustand is that we can use multiple stores in one app. And we don't even need to wrap the whole app with the provider. We can just use the store in our components.

I have just finished my exams and started to work on my blog again. I will try to keep up with the progress. I hope you will like it. Let me know! I'm always open to feedback.

The Issue with inline styles

There's no way you can use inline styles in React as you use them traditionaly. You have to use a CSS class. I found a article by FreeCodeCamp about styles in react.

Well it gathered my attention about using CSS selectors with inline css. So I decided to write a small article about it. I hope you will find it useful.

Are there advantages?

• No need for extra package.

• And they are quick.

• No need to use class.

Today I'm going to show you how to mutate css selectors with useState and pointer events.:

function Text() {
return (
  <div
    style={{
      color: 'red,
    }}>
    Click Me
  </div>
  )
}

Let's move the styles to another object.

const TextStyle = {
  color: 'red,
};

export function Text() {
 return (
  <div
    style={TextStyle}>
    Sample Text
  </div>
  )
}

Now we are going to use useState hook to change the color of the Text on hover.

import { useState } from 'react'

const TextStyle = ({ hover }) => ({
  color: hover ? 'yellow' : 'red',
})

export default function Text() {
  const [hover, setHover] = useState(false)
  return (
    <div
      style={TextStyle({ hover })}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      Click Me
    </div>
  )
}

The useState and pointer events helped us to transform the color of Text. I rarely used inline styles in React before, but I think it's a good example.

Also this is my first post. I hope you will like it. Let me know! I'm always open to feedback.