TanStack AI: Chatbot-Agent mit lokalem Ollama bauen

Einleitung

Moderne Chatbots basieren oft auf Cloud-APIs wie OpenAI oder Anthropic. Doch mit TanStack AI und einem lokalen Ollama-Server lässt sich ein vollständig selbst gehosteter Chatbot-Agent realisieren, der Datenschutz gewährleistet und keine laufenden API-Kosten verursacht.

TanStack AI ist eine Sammlung von React Hooks für KI-gestützte Benutzeroberflächen. In Kombination mit Ollama als LLM-Backend entsteht ein leistungsfähiger Chat-Agent, der sich als Widget in beliebige Websites einbetten lässt.

Architektur: Wie die Komponenten zusammenspielen

Der Chatbot besteht aus drei Hauptkomponenten:

1. Frontend (React + TanStack AI): Rendert die Chat-Oberfläche und verwaltet den Konversationsstatus

2. Backend (Node.js/Express): Vermittelt zwischen Frontend und Ollama, handhabt Streaming

3. LLM (Ollama): Führt die eigentliche Inferenz lokal auf der GPU aus

┌─────────────────┐    HTTP/SSE     ┌─────────────────┐    REST API    ┌─────────────────┐
│   React App     │ ─────────────── │   Node Backend  │ ────────────── │     Ollama      │
│  TanStack AI    │    Streaming    │    Express.js   │                │   (GPU-lokal)   │
└─────────────────┘                 └─────────────────┘                └─────────────────┘

TanStack AI: Die React-Hooks für Chat-UIs

TanStack AI basiert auf dem Vercel AI SDK und bietet spezialisierte Hooks für Chat-Anwendungen.

useChat Hook: Das Herzstück

Der useChat Hook verwaltet den kompletten Chat-Status:

import { useChat } from '@tanstack/react-ai';

function ChatComponent() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    error
  } = useChat({
    api: '/api/chat',
    initialMessages: []
  });

  return (
    <div className="chat-container">
      {messages.map((msg) => (
        <div key={msg.id} className={`message ${msg.role}`}>
          {msg.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Nachricht eingeben..."
        />
        <button type="submit" disabled={isLoading}>
          Senden
        </button>
      </form>
    </div>
  );
}

Streaming-Antworten in Echtzeit

TanStack AI unterstützt Server-Sent Events (SSE) für Echtzeit-Streaming. Der Nutzer sieht die Antwort Wort für Wort erscheinen, was das Nutzererlebnis erheblich verbessert.

Backend: Ollama-Integration mit Express

Das Backend verbindet das React-Frontend mit dem lokalen Ollama-Server:

import express from 'express'; import { Ollama } from 'ollama';

const app = express(); const ollama = new Ollama({ host: 'http://localhost:11434' });

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

// SSE-Header für Streaming res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive');

const response = await ollama.chat({ model, messages, stream: true });

for await (const chunk of response) { const data = JSON.stringify({ content: chunk.message.content, done: chunk.done }); res.write(data: ${data}\n\n); }

res.end(); });

Ollama: Der lokale LLM-Server

Ollama macht das Ausführen von Large Language Models auf eigener Hardware einfach. Nach der Installation genügt ein Befehl zum Laden eines Modells:

Für den Chatbot-Einsatz eignen sich besonders:

Llama 3.2 (8B): Schnell und vielseitig

Mistral (7B): Gute Balance aus Geschwindigkeit und Qualität

Qwen 2.5 (7B): Stark bei Instruktionen und Dialog

System-Prompts für spezialisierte Agenten

Durch angepasste System-Prompts wird der Chatbot zum spezialisierten Agenten:

const systemPrompt = Du bist ein hilfreicher KI-Assistent für
technische Fragen. Antworte präzise und strukturiert.
Wenn du etwas nicht weißt, sage es ehrlich.;

const messages = [
  { role: 'system', content: systemPrompt },
  …userMessages
];

Widget-Einbettung: Chat überall verfügbar

Das fertige Chat-Widget lässt sich per Script-Tag in jede Website einbetten:

<script
  src="https://chat.example.com/widget.js"
  data-api-url="https://chat.example.com"
  data-title="AI Assistant"
  data-position="bottom-right"
  data-primary-color="#3B82F6">
</script>

Das Widget:

Lädt asynchron ohne Performance-Einbußen

Ist vollständig responsiv

Speichert optional den Konversationsverlauf

Unterstützt Theming über CSS-Variablen

Erweiterte Features

Tool-Integration mit MCP

Mit dem Model Context Protocol (MCP) können externe Tools in den Chat integriert werden. Der Agent kann dann Datenbanken abfragen, API aufrufen, Berechnungen durchführen oder Dateien verarbeiten.

Deployment-Optionen

Kubernetes-Deployment

Für produktive Umgebungen empfiehlt sich ein Kubernetes-Deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: tanstack-chat
  namespace: ai-services
spec:
  replicas: 1
  selector:
    matchLabels:
      app: tanstack-chat
  template:
    spec:
      containers:
      - name: chat
        image: tanstack-chat:latest
        ports:
        - containerPort: 3000
        env:
        - name: OLLAMA_URL
          value: "http://ollama:11434"

Fazit

TanStack AI mit Ollama ermöglicht den Aufbau leistungsfähiger Chatbot-Agenten ohne Cloud-Abhängigkeiten. Die Kombination aus React-Hooks für das Frontend und lokaler LLM-Inferenz bietet volle Kontrolle über Daten und Kosten. Durch die Widget-Architektur lässt sich der Chat flexibel in bestehende Anwendungen integrieren.