Back to "LLMApi: Echtzeit-Mockdaten mit LLMs und SignalR: Ein praktischer Leitfaden"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# LLMApi: Echtzeit-Mockdaten mit LLMs und SignalR: Ein praktischer Leitfaden

<datetime class="hidden">2025-11-04T21:15</datetime>

# Einleitung

[![NuGet](https://img.shields.io/nuget/v/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi) [![NuGet](https://img.shields.io/nuget/dt/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi)

> HINWEIS: Sein Artikel ist in erster Linie AI als Teil meines Nuget-Pakets als Release-Dokumentation. Es ist ziemlich interessant, also habe ich es hier, aber wenn das ein Problem für Sie ist, ignorieren Sie es bitte.

Als Teil meiner [Nuget-Paket LLMApi / meistlucid.mockllmapi ](https://www.nuget.org/packages/mostlylucid.mockllmapi) Ich brauchte eine Seite, um die SignalR-Funktionen zu aktivieren (sie kann SignalR-Feeds mit LLMs simulieren, um Daten bereitzustellen).

Sie können die[ GitHub hier ](https://github.com/scottgal/LLMApi)für das Projekt, alle Public Domain etc...

Es wurde quicly ein ziemlich schönes Werkzeug!

![SignalR Simulator](signalrsimulator.png)

Wenn Sie jemals benötigt haben, um ein Dashboard oder Echtzeit-UI zu bauen, bevor die tatsächliche Datenquelle existiert, kennen Sie die Herausforderung. Sie am Ende schreiben Sie fest codierte JSON-Fixtures oder aufwendig `setInterval()` Schleifen, die sich durch dieselbe Handvoll Objekte drehen.

Ich baute diese SignalR-Demo, um dieses Problem in einer flexibleren Weise zu lösen. Sie beschreiben, welche Daten Sie im Klartext Englisch benötigen, und eine lokale LLM erzeugt realistische, abwechslungsreiche JSON, die in Echtzeit zu Ihrem Browser streamt.

Lassen Sie mich Ihnen zeigen, wie es funktioniert und wie man das Beste daraus herausholt.

[TOC]

## Was dieses Tool bewirkt

Die SignalR-Demoseite (`Index.cshtml`) ist ein Control Panel für die Verwaltung von Echtzeit-Datenströmen. Hier ist der grundlegende Fluss:

1. Sie erstellen einen "Kontext" (einen benannten Datenstrom)
2. Sie beschreiben, welche Art von Daten Sie im Klartext wünschen.
3. Ein LLM erzeugt passendes JSON basierend auf Ihrer Beschreibung
4. SignalR schiebt alle 5 Sekunden frische Daten in Ihren Browser
5. Sie sehen die Ergebnisse mit Syntax-Hervorhebung in Echtzeit

Es ist besonders nützlich, wenn Sie Prototypen erstellen, Demos erstellen oder an Frontend-Funktionen arbeiten, während Sie darauf warten, dass Backend-APIs bereit sind. Die Daten sehen realistisch aus, weil die LLM Kontext versteht und entsprechende Werte generiert.

### Das große Bild

```mermaid
graph TB
    Browser[Your Browser]
    UI[Demo UI]
    API[Management API]
    Hub[SignalR Hub]
    Manager[Context Manager]
    BG[Background Service]
    LLM[LLM Ollama/OpenAI]
    Cache[Response Cache]

```

## Warum SignalR für Echtzeit-Updates?

SignalR unterhält eine persistente WebSocket-Verbindung zwischen Ihrem Browser und dem Server. Anstatt alle paar Sekunden einen Endpunkt mit HTTP-Anfragen abzufragen, schiebt der Server Daten, wenn er bereit ist. Dies gibt Ihnen wirklich Echtzeit-Updates mit minimalem Overhead.

Die Verbindung bleibt offen, Daten fließen sofort, und Ihre Benutzeroberfläche fühlt sich viel responsiver. Es ist die gleiche Technologie, die in Chat-Anwendungen, Live-Dashboards und kollaborativen Tools verwendet wird, wo sofortige Updates wichtig sind.

## Schnellstart: Laufen in 5 Minuten

Beginnen wir mit dem schnellsten Weg, um das zu sehen. Ich zeige Ihnen ein Beispiel für Börsendaten.

**Schritt 1: Starten Sie die Anwendung**

```bash
dotnet run --project LLMApi/LLMApi.csproj
```

Navigieren zu `http://localhost:5116` (Überprüfen Sie die Konsolenausgabe für den aktuellen Port).

**Schritt 2: Verwenden Sie ein Beispiel für den Schnellstart**

Sie sehen fünf vorkonfigurierte Beispiele mit grünen "Launch" Schaltflächen. Klicken Sie auf "Stock Market" und Sie sind fertig. Die Seite automatisch:

- Erstellt einen Börsendatenkontext
- Abonnieren Sie Ihren Browser, um Updates zu erhalten
- Startet die Anzeige von Live-Aktiendaten mit Preisen, Volumen und Änderungen

**Schritt 3: Beobachten Sie den Datenstrom**

Alle 5 Sekunden erscheinen neue Daten mit Syntax-Hervorhebung. Jedes Update zeigt verschiedene Aktien mit realistischen Preisen und Handelsvolumina. Das LLM generiert jedes Mal frische Daten, so dass Sie Vielfalt sehen und dabei eine konsistente Struktur beibehalten.

Das ist es! Sie streamen jetzt Mock-Aktienmarktdaten. Fühlen Sie sich frei, die anderen Schnellstart-Beispiele zu erkunden, um verschiedene Datenmuster zu sehen.

## Erstellen Ihrer eigenen benutzerdefinierten Datenströme

Die Schnellstart-Tasten sind praktisch, aber die echte Leistung kommt von der Beschreibung genau, was Sie brauchen. Lassen Sie uns ein benutzerdefiniertes Beispiel erstellen.

**Beispiel: Telemetrie von Kaffeemaschinen**

Sagen Sie, Sie bauen ein IoT-Dashboard und benötigen simulierte Kaffeemaschinendaten.

```
Context Name: coffee-machines
Description: Coffee machine telemetry with machine ID, beans remaining percentage,
             water temperature in Celsius, cups brewed today, and last maintenance timestamp
```

Klicken Sie auf "Create & Subscribe" und Sie sind aus.

### Was hinter den Kulissen geschieht

```mermaid
sequenceDiagram
    participant Browser
    participant API
    participant Manager
    participant BG as Background Service
    participant LLM
    participant Hub

Browser->>API: POST /api/mock/contexts {name, description}
 API->>Manager: Store context config
 Manager-->>API: Context created ✓
 API-->>Browser: 200 OK

Browser->>Hub: invoke('SubscribeToContext', 'coffee-machines')
    Hub->>Manager: Register subscription
    Manager-->>Hub: Subscription confirmed
    Hub-->>Browser: on('Subscribed')

Note over BG,LLM: Every 5 seconds...
 BG->>LLM: Generate data for 'coffee-machines' Prompt includes description
 LLM-->>BG: JSON response
 BG->>Hub: Broadcast to 'coffee-machines' group
 Hub-->>Browser: on('DataUpdate', {data})
 Browser->>Browser: Display with syntax highlighting
```

Das System:

1. Erzeugt den Kontext im Backend
2. Subscribes your browser to receive updates via SignalR
3. Startet die Generierung von Daten basierend auf Ihrer Beschreibung
4. Schiebet Updates alle 5 Sekunden

Sie werden die Ausgabe wie folgt sehen:

```json
{
  "machineId": "CM-2847",
  "beansRemaining": 67,
  "waterTemp": 94.5,
  "cupsBrewed": 142,
  "lastMaintenance": "2025-01-03T08:23:00Z"
}
```

Jedes Update hat unterschiedliche Werte, behält aber die Struktur. Das LLM versteht „Kaffeemaschinentelemetrie" und generiert Zahlen, die in diesem Kontext Sinn ergeben.

## Kontexte verstehen

A **Kontext** ist eine benannte Datenstromkonfiguration. Betrachten Sie es als Kanal oder Thema.

Wenn Sie einen erstellen, geben Sie an:

- **Bezeichnung**: Ein eindeutiger Erkennungsmarker (z.B. `weather`, `stock-market`, `sensors`)
- **Warenbezeichnung**: Die gewünschte Datenstruktur, in englischer Sprache

Das Backend dann:

- Erstellt eine SignalR-Gruppe mit diesem Namen
- Erstellt eine Aufforderung für die LLM basierend auf Ihrer Beschreibung
- Erzeugt regelmäßig frische Daten (standardmäßig alle 5 Sekunden)
- Sendet es an alle abonnierten Kunden

Mehrere Browser können den gleichen Kontext abonnieren und sie alle erhalten die gleichen Daten gleichzeitig. Dies ist ideal für das Testen von Dashboards, die synchronisierte Updates über verschiedene Bildschirme oder Komponenten zeigen müssen.

### Kontext Lebenszyklus Zustand Maschine

```mermaid
stateDiagram-v2
 [*] --> Created: Create Context (POST /contexts)

Created --> Active: Start (auto or manual)
 Active --> Stopped: Stop (POST /stop)
 Stopped --> Active: Start (POST /start)

Created --> Subscribed: Client Subscribes
 Active --> Subscribed: Client Subscribes
 Stopped --> Subscribed: Client Subscribes (no data sent)

Subscribed --> Receiving: Data Push (if Active)
 Receiving --> Subscribed: Client Connected

Subscribed --> Created: Unsubscribe
    Subscribed --> Active: Unsubscribe
    Subscribed --> Stopped: Unsubscribe

Created --> [*]: Delete
    Active --> [*]: Delete
    Stopped --> [*]: Delete
    Subscribed --> [*]: Delete

note right of Active
        Generates data
        Pushes to clients
        Shows "Active" badge
    end note

note right of Stopped
        No data generation
        Clients stay connected
        Shows "Stopped" badge
    end note
```

## Das UI-Layout verstehen

Die Schnittstelle hat drei Panels, um die Dinge organisiert zu halten:

### Links: Kontext erstellen

Hier definieren Sie neue Datenströme. Sie benötigen:

- **Kontextname**: Machen Sie es einzigartig und beschreibend. Die Verwendung von Kleinbuchstaben funktioniert gut.
- **Warenbezeichnung**Die LLM funktioniert am besten mit klaren Beschreibungen wie "Benutzerprofile mit Namen, E-Mail, Alter und Premium-Status boolean."

Sie müssen keine JSON-Schemas schreiben oder Datentypen erklären. Die LLM leitet Struktur aus natürlichen Sprachbeschreibungen überraschend gut ab.

### Mittel: Aktive Kontexte

Zeigt alle Ihre laufenden Kontexte mit:

- Name und Statusschild (aktiv/gepflegt)
- Verbindungszahl (wie viele Clients derzeit abonniert sind)
- Bedientasten: Verbinden, Trennen, Starten, Anhalten, Löschen

**Verbinden/Verbinden** steuert das Abonnement Ihres Browsers. Klicken Sie auf Verbinden, um Daten zu empfangen, Trennen, um zu stoppen, ohne den Kontext zu löschen.

**Start/Stopp** steuert die Erzeugung von Backend-Daten. Dies ist nützlich, wenn Sie einen Stream anhalten möchten, ohne die Kontextkonfiguration zu zerstören.

**Löschen** entfernt den Kontext vollständig. Verwenden Sie dies, um aufzuräumen, wenn Sie mit einem bestimmten Datenstrom fertig sind.

### Rechts: Live-Daten

Hier sehen Sie Echtzeit-Updates:

- Verbindungsstatusanzeige (Connected/Disconnected)
- Aktuell abonnierter Kontextname
- Letzte 10 Nachrichten mit Zeitstempeln und Syntax-Hervorhebung

Die Daten erscheinen am allerneusten Anfang, so dass Sie immer die neuesten Updates sehen, ohne zu scrollen.

## Das JavaScript-Verbindungsmuster

Die Seite verwendet HTMX für Formular-Einreichung und SignalR für Echtzeit-Konnektivität. Wenn Sie Ihren eigenen Client bauen, hier ist das SignalR-Muster, das Sie benötigen:

### Client-Verbindungsfluss

```mermaid
sequenceDiagram
    participant Page as Your Page
    participant SR as SignalR Client
    participant Hub as /hub/mock
    participant BG as Background Service

Page->>SR: new HubConnectionBuilder() .withUrl('/hub/mock')
 Page->>SR: connection.start()
 SR->>Hub: WebSocket connection
 Hub-->>SR: Connected ✓
 SR-->>Page: Trigger 'connected' event

Page->>SR: invoke('SubscribeToContext', 'weather')
    SR->>Hub: SubscribeToContext('weather')
    Hub->>Hub: Add to 'weather' group
    Hub-->>SR: on('Subscribed', {context: 'weather'})
    SR-->>Page: Display "Subscribed"

loop Every 5 seconds
        BG->>Hub: Broadcast to 'weather' group
        Hub->>SR: on('DataUpdate', {data, timestamp})
        SR->>Page: Update UI with new data
    end

Page->>SR: invoke('UnsubscribeFromContext', 'weather')
    SR->>Hub: UnsubscribeFromContext('weather')
    Hub->>Hub: Remove from 'weather' group
```

**Einrichtung der Verbindung:**

```javascript
const connection = new signalR.HubConnectionBuilder()
    .withUrl('/hub/mock')
    .withAutomaticReconnect()
    .build();

connection.on('DataUpdate', (message) => {
    // message.context: which context sent this
    // message.data: the actual JSON payload
    // message.timestamp: Unix timestamp in milliseconds
});

await connection.start();
```

**Anmeldung für den Empfang von Daten:**

```javascript
await connection.invoke('SubscribeToContext', 'my-context-name');
```

**Abmeldung nach Beendigung:**

```javascript
await connection.invoke('UnsubscribeFromContext', 'my-context-name');
```

Die Demo-Seite behandelt all dies automatisch, aber diese drei Muster sind alles, was Sie für eine benutzerdefinierte Implementierung benötigen.

## Praktische Anwendungsfälle

Hier sind einige Szenarien, wo dieses Tool wirklich glänzt:

**1. Aufbau von UIs vor APIs bestehen**

Sie arbeiten an einem Dashboard und das Backend-Team entwickelt noch das API-Schema. Anstatt ihre Arbeit zu blockieren, beschreiben Sie die Datenstruktur, die Sie erwarten und bauen Sie Ihre Benutzeroberfläche gegen den Mockstream. Wenn die echte API bereit ist, tauschen Sie einfach den Endpunkt aus.

**2. Client-Vorführungen**

Sie demoieren ein Live-Monitoring-Dashboard zu einem Client, aber die eigentliche Datenpipeline ist noch nicht fertig. Erstellen Sie Kontexte, die zu Ihrer geplanten Datenstruktur passen und zeigen realistische, ändernde Daten während der Präsentation. Es sieht professionell aus und hilft dem Client, das Endprodukt zu visualisieren.

**3. Frontend-Entwicklung und Prüfung**

Sie benötigen realistische, abwechslungsreiche Daten, um zu testen, wie Ihre Diagramme, Tabellen und Komponenten mit Updates umgehen. Erstellen Sie Kontexte mit den Strukturen, die Sie benötigen und entwickeln Sie Ihre Benutzeroberfläche mit der Gewissheit, dass es mit realen Datenmustern umgeht.

**4. Lastprüfung Echtzeit-Features**

Sie wollen sehen, wie Ihre Benutzeroberfläche unter schnellen Updates funktioniert. Erstellen Sie einen hochfrequenten Kontext und beobachten Sie, wie Ihre Komponenten mit dem Datenfluss umgehen.

**5. Teaching WebSockets und Echtzeit-Konzepte**

Sie lehren SignalR- oder WebSocket-Konzepte und möchten, dass die Schüler in Echtzeit Updates sehen, ohne ein komplettes Backend zu bauen.

## Schnellstart-Beispiele erklärt

Die fünf vorkonfigurierten Beispiele zeigen unterschiedliche gemeinsame Datenmuster:

**IoT-Sensoren**: Numerische Sensorwerte mit Geräte-Metadaten
**Aktienmarkt**: Finanzdaten mit Preisen, Volumen und prozentualen Veränderungen
**E-Commerce-Aufträge**: Verschachtelte Objekte mit Bestellelementen Arrays
**Server-Metriken**: Systemüberwachung mit mehreren Leistungsmetriken
**Gaming Leaderboard**: Spieler-Ranking mit Statistiken und Status

Diese Beispiele sind startbereit. Klicken Sie auf Starten, beobachten Sie die Daten und verwenden Sie sie als Vorlagen für Ihre eigenen Kontexte.

## API-Endpunkte für Integration

Wenn Sie einen benutzerdefinierten Client erstellen oder diese in eine andere Anwendung integrieren, hier sind die HTTP-Endpunkte:

**Einen Kontext erstellen:**

```bash
curl -X POST http://localhost:5116/api/mock/contexts \
  -H "Content-Type: application/json" \
  -d '{"name": "sensors", "description": "Temperature sensors with device ID and readings"}'
```

**Alle Kontexte auflisten:**

```bash
curl http://localhost:5116/api/mock/contexts
```

**Holen Sie sich einen bestimmten Kontext:**

```bash
curl http://localhost:5116/api/mock/contexts/sensors
```

**Erzeugung von Start- oder Stoppdaten:**

```bash
curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop
```

**Einen Kontext löschen:**

```bash
curl -X DELETE http://localhost:5116/api/mock/contexts/sensors
```

Nachdem Sie einen Kontext erstellt haben, verbinden Sie sich mit dem SignalR-Hub bei `/hub/mock` und abonnieren, um Updates zu erhalten.

## Wie funktioniert die LLM-Generation?

Wenn Sie einen Kontext erstellen, das System:

1. Nimmt Ihre Beschreibung an
2. Baut eine Eingabeaufforderung mit Randomness (GUID-Same + Zeitstempel für Varietät)
3. Bittet das LLM, passend zu Ihrer Beschreibung JSON zu generieren
4. Validiert die Antwort ist tatsächlich JSON (Streifen Markdown, falls erforderlich)
5. Caches mehrere Antworten für schnelle Lieferung
6. Erzeugt mehr im Hintergrund, um den Cache gefüllt zu halten

Die Temperatur wird auf 1.2 (relativ hoch) gesetzt, um Abwechslung zu gewährleisten. Wenn Sie nach „Benutzerdaten" fragen, erhalten Sie jedes Mal unterschiedliche Namen und Werte, nicht die gleichen wenigen recycelten endlos. Die Daten bleiben strukturell konsistent, wobei sie realistisch variieren.

## Performance und intelligentes Caching

Die Datengenerierung erfolgt im Hintergrund, nicht on-demand pro Push. Dies hält Updates konsistent und reduziert die LLM-Last.

Hier ist, wie es funktioniert:

- Beim Start füllt das System einen Cache mit Antworten für jeden aktiven Kontext
- Es misst, wie lange die Erzeugung dauert (z.B. 500ms pro Anfrage)
- Es berechnet optimale Batch-Größe: Push-Intervall -Generierungszeit (5000ms -500ms = 10 Artikel)
- Es generiert Batches im Hintergrund, um den Cache oben zu halten
- Wenn es Zeit zum Drücken ist, zieht es sofort aus dem Cache

Ergebnis: Ihre erste Nachricht kommt sofort, nachfolgende Nachrichten kommen alle 5 Sekunden konsistent, und die LLM wird nicht kontinuierlich gehämmert.

### Der intelligente Caching Flow

```mermaid
graph LR
 subgraph Startup
 A[App Starts] --> B[Pre-fill Cache]
 B --> C[Measure Gen Time 500ms]
 C --> D[Calculate Batch 5000ms / 500ms = 10]
 end

subgraph Runtime Loop
 E[Timer Tick Every 5s] --> F{Cache > 50%?}
 F -->|Yes| G[Pop from Cache]
 F -->|No| H[Generate Batch in Background]
 G --> I[Push to Clients]
 H --> J[Refill Cache]
 J --> G
 I --> E
 end

D --> E

style B stroke:#10b981,stroke-width:3px
    style G stroke:#0ea5e9,stroke-width:3px
    style H stroke:#ef4444,stroke-width:3px
    style I stroke:#f59e0b,stroke-width:3px
```

## Fehlerbehebung bei gemeinsamen Problemen

**Verbindung zeigt "Abschaltung" und wird nicht wieder verbinden**

- Prüfen Sie, ob Ihr LLM-Dienst (Ollama/OpenAI) läuft
- Standardkonfiguration erwartet Ollama bei `http://localhost:11434`
- Ausführen `ollama list` um zu überprüfen, dass Sie Modelle installiert haben
- Überprüfen Sie die Browser-Konsole auf SignalR-Verbindungsfehler

**Kontext erstellt, aber keine Daten erscheinen**

- Schauen Sie sich das Active Contexts-Panel an – zeigt der Kontext "Aktiv"?
- Klicken Sie auf die Schaltfläche Verbinden, wenn Sie noch nicht abonniert haben
- Überprüfen des Verbindungsstatus zeigt grün (Connected) im Live-Datenfeld
- Serverprotokolle überprüfen, um zu sehen, ob die LLM-Generierung funktioniert

**Die Datenstruktur passt nicht zu dem, was Sie erwartet haben.**

- Machen Sie Ihre Beschreibung spezifischer und konkreter
- Beispiel: "Temperatur als Zahl zwischen 0 und 100" funktioniert besser als nur "Temperatur"
- Versuchen Sie, Ihre Beschreibung neu zu beschreiben – dies ist schnelles Engineering bei der Arbeit
- Überprüfen Sie die generierten Daten und verfeinern Sie Ihre Beschreibung anhand dessen, was Sie sehen

**Browser-Konsole zeigt SignalR-Wiederverbindungsversuche**

- Das Backend läuft vielleicht nicht – überprüfen Sie Ihr Terminal
- Vielleicht haben Sie den Port geändert – aktualisieren Sie bei Bedarf die SignalR-Hub-URL
- Suchen Sie nach Firewall- oder Netzwerkproblemen (insbesondere in Docker/WSL-Umgebungen)

## Einstellungen

Sie können Verhalten anpassen in `appsettings.json`:

```json
{
  "MockLlmApi": {
    "SignalRPushIntervalMs": 5000,  // How often to push data (milliseconds)
    "ModelName": "llama3",           // Which LLM model to use
    "Temperature": 1.2,              // Creativity level (0.0-2.0, higher = more varied)
    "BaseUrl": "http://localhost:11434",  // LLM service URL
    "HubContexts": [                 // Optional: pre-configured contexts
      {
        "Name": "weather",
        "Description": "Weather data with temperature, humidity, wind speed",
        "IsActive": true
      }
    ]
  }
}
```

**SignalRpushIntervalMs**: Weniger für schnellere Updates, höher, um LLM-Last zu reduzieren
**Temperatur**: Höhere Werte geben mehr kreative / zufällige Daten, niedriger gibt mehr konsistente Ergebnisse
**HubKontexten**: Definieren Sie Kontexte, die automatisch starten, wenn die Anwendung startet

## Integration in Ihre Anwendung

Wenn Sie ein aktuelles Dashboard bauen und dieses während der Entwicklung verwenden möchten, hier ein React Beispiel:

```javascript
import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl('http://localhost:5116/hub/mock')
  .withAutomaticReconnect()
  .build();

connection.on('DataUpdate', (message) => {
  if (message.context === 'stock-market') {
    updateStockChart(message.data);
  }
});

await connection.start();
await connection.invoke('SubscribeToContext', 'stock-market');
```

Wenn Sie bereit sind, zur Produktion zu wechseln, ändern Sie einfach die Hub-URL. Die SignalR-Schnittstelle (`on()` und `invoke()`) funktioniert auf die gleiche Weise mit echten Backends.

## Warum das bauen?

Es gibt gute Mock-Daten-Bibliotheken gibt. Faker.js ist ausgezeichnet. Mockaroo tut große Arbeit. Also, warum ein anderes Werkzeug bauen?

Dieses Tool löst spezifische Herausforderungen:

1. **Echtzeit-Streaming**: Die meisten Tools geben Ihnen statische Datensätze oder REST-Endpunkte, nicht Live WebSocket-Streams
2. **Natürliche Sprachschnittstelle**: Beschreiben Sie, was Sie wollen, anstatt JSON-Schemas zu schreiben
3. **Kontextbezogene Daten**: LLMs erzeugen realistische Werte, die zusammen Sinn ergeben, nicht nur zufällige Strings, die zu einem Typ passen
4. **Selbstdokumentation**: Die Beschreibung ist die Dokumentation für Ihre Datenstruktur
5. **Flexible Struktur**: Ändern Sie Ihr Datenmodell in der Mitte der Entwicklung ohne Aktualisierung von Vorrichtungen

Es ist für einen bestimmten Workflow konzipiert: Echtzeit-UIs erstellen, wenn Sie abwechslungsreiche, realistische Daten ohne Konfigurationsüberkopf benötigen.

## Erste Schritte

Der beste Weg, um dieses Tool zu verstehen, ist es zu verwenden:

1. Starten Sie die Anwendung: `dotnet run --project LLMApi`
2. Öffnen Sie Ihren Browser für `http://localhost:5116`
3. Klicken Sie auf eine der grünen "Launch"-Schaltflächen
4. Beobachten Sie den Datenstrom in

Versuchen Sie von dort aus, Ihren eigenen Kontext mit einer Beschreibung zu erstellen, die den Bedürfnissen Ihres Projekts entspricht. Das Tool ist am wertvollsten, wenn Sie es für echte Entwicklungsarbeit verwenden.

Ich habe dies gebaut, weil ich immer wieder auf das gleiche Problem stieß: realistische, Daten für Demos und Entwicklung ändern. Wenn Sie sich auch dieser Herausforderung stellen, hoffe ich, dass dieses Tool Ihrem Workflow hilft.

---

## Schnellreferenz

**Beginn:**

```bash
dotnet run --project LLMApi
```

**Standard-URL:** `http://localhost:5116`

**SignalR Hub:** `/hub/mock`

**Schlüsselmethoden:**

- `SubscribeToContext(name)` - Empfangen von Daten beginnen
- `UnsubscribeFromContext(name)` - Daten nicht mehr empfangen

**Wichtige Ereignisse:**

- `DataUpdate` - Neue Daten eingetroffen
- `Subscribed` - Abonnement bestätigt
- `Unsubscribed` - Abmeldung bestätigt

Das ist alles, was Sie wissen müssen. Der Rest ist nur zu erforschen, was Sie damit bauen können.

This is a preview from the server running through my markdig pipeline

AI AI-Article API ASP.NET Core LLM LLMApi mockllmapi Nuget SignalR

LLMApi: Echtzeit-Mockdaten mit LLMs und SignalR: Ein praktischer Leitfaden

Tuesday, 04 November 2025

Einleitung

HINWEIS: Sein Artikel ist in erster Linie AI als Teil meines Nuget-Pakets als Release-Dokumentation. Es ist ziemlich interessant, also habe ich es hier, aber wenn das ein Problem für Sie ist, ignorieren Sie es bitte.

Als Teil meiner Nuget-Paket LLMApi / meistlucid.mockllmapi Ich brauchte eine Seite, um die SignalR-Funktionen zu aktivieren (sie kann SignalR-Feeds mit LLMs simulieren, um Daten bereitzustellen).

Sie können die GitHub hier für das Projekt, alle Public Domain etc...

Es wurde quicly ein ziemlich schönes Werkzeug!

SignalR Simulator

Wenn Sie jemals benötigt haben, um ein Dashboard oder Echtzeit-UI zu bauen, bevor die tatsächliche Datenquelle existiert, kennen Sie die Herausforderung. Sie am Ende schreiben Sie fest codierte JSON-Fixtures oder aufwendig setInterval() Schleifen, die sich durch dieselbe Handvoll Objekte drehen.

Lassen Sie mich Ihnen zeigen, wie es funktioniert und wie man das Beste daraus herausholt.

Was dieses Tool bewirkt

Die SignalR-Demoseite (Index.cshtml) ist ein Control Panel für die Verwaltung von Echtzeit-Datenströmen. Hier ist der grundlegende Fluss:

Sie erstellen einen "Kontext" (einen benannten Datenstrom)
Sie beschreiben, welche Art von Daten Sie im Klartext wünschen.
Ein LLM erzeugt passendes JSON basierend auf Ihrer Beschreibung
SignalR schiebt alle 5 Sekunden frische Daten in Ihren Browser
Sie sehen die Ergebnisse mit Syntax-Hervorhebung in Echtzeit

Das große Bild

graph TB
    Browser[Your Browser]
    UI[Demo UI]
    API[Management API]
    Hub[SignalR Hub]
    Manager[Context Manager]
    BG[Background Service]
    LLM[LLM Ollama/OpenAI]
    Cache[Response Cache]

    Browser -->|Create Context| API
    API -->|Store Config| Manager
    Browser -->|Connect Subscribe| Hub
    Hub -->|Register Client| Manager
    BG -->|Generate Data| LLM
    LLM -->|Return JSON| BG
    BG -->|Cache Responses| Cache
    BG -->|Push to Clients| Hub
    Hub -->|Real-time Updates| Browser

Warum SignalR für Echtzeit-Updates?

Schnellstart: Laufen in 5 Minuten

Beginnen wir mit dem schnellsten Weg, um das zu sehen. Ich zeige Ihnen ein Beispiel für Börsendaten.

Schritt 1: Starten Sie die Anwendung

dotnet run --project LLMApi/LLMApi.csproj

Navigieren zu http://localhost:5116 (Überprüfen Sie die Konsolenausgabe für den aktuellen Port).

Schritt 2: Verwenden Sie ein Beispiel für den Schnellstart

Sie sehen fünf vorkonfigurierte Beispiele mit grünen "Launch" Schaltflächen. Klicken Sie auf "Stock Market" und Sie sind fertig. Die Seite automatisch:

Erstellt einen Börsendatenkontext
Abonnieren Sie Ihren Browser, um Updates zu erhalten
Startet die Anzeige von Live-Aktiendaten mit Preisen, Volumen und Änderungen

Schritt 3: Beobachten Sie den Datenstrom

Das ist es! Sie streamen jetzt Mock-Aktienmarktdaten. Fühlen Sie sich frei, die anderen Schnellstart-Beispiele zu erkunden, um verschiedene Datenmuster zu sehen.

Erstellen Ihrer eigenen benutzerdefinierten Datenströme

Die Schnellstart-Tasten sind praktisch, aber die echte Leistung kommt von der Beschreibung genau, was Sie brauchen. Lassen Sie uns ein benutzerdefiniertes Beispiel erstellen.

Beispiel: Telemetrie von Kaffeemaschinen

Sagen Sie, Sie bauen ein IoT-Dashboard und benötigen simulierte Kaffeemaschinendaten.

Context Name: coffee-machines
Description: Coffee machine telemetry with machine ID, beans remaining percentage,
             water temperature in Celsius, cups brewed today, and last maintenance timestamp

Klicken Sie auf "Create & Subscribe" und Sie sind aus.

Was hinter den Kulissen geschieht

sequenceDiagram
    participant Browser
    participant API
    participant Manager
    participant BG as Background Service
    participant LLM
    participant Hub

    Browser->>API: POST /api/mock/contexts<br/>{name, description}
    API->>Manager: Store context config
    Manager-->>API: Context created ✓
    API-->>Browser: 200 OK

    Browser->>Hub: invoke('SubscribeToContext', 'coffee-machines')
    Hub->>Manager: Register subscription
    Manager-->>Hub: Subscription confirmed
    Hub-->>Browser: on('Subscribed')

    Note over BG,LLM: Every 5 seconds...
    BG->>LLM: Generate data for 'coffee-machines'<br/>Prompt includes description
    LLM-->>BG: JSON response
    BG->>Hub: Broadcast to 'coffee-machines' group
    Hub-->>Browser: on('DataUpdate', {data})
    Browser->>Browser: Display with syntax highlighting

Das System:

Erzeugt den Kontext im Backend
Subscribes your browser to receive updates via SignalR
Startet die Generierung von Daten basierend auf Ihrer Beschreibung
Schiebet Updates alle 5 Sekunden

Sie werden die Ausgabe wie folgt sehen:

{
  "machineId": "CM-2847",
  "beansRemaining": 67,
  "waterTemp": 94.5,
  "cupsBrewed": 142,
  "lastMaintenance": "2025-01-03T08:23:00Z"
}

Jedes Update hat unterschiedliche Werte, behält aber die Struktur. Das LLM versteht „Kaffeemaschinentelemetrie" und generiert Zahlen, die in diesem Kontext Sinn ergeben.

Kontexte verstehen

A Kontext ist eine benannte Datenstromkonfiguration. Betrachten Sie es als Kanal oder Thema.

Wenn Sie einen erstellen, geben Sie an:

Bezeichnung: Ein eindeutiger Erkennungsmarker (z.B. weather, stock-market, sensors)
Warenbezeichnung: Die gewünschte Datenstruktur, in englischer Sprache

Das Backend dann:

Erstellt eine SignalR-Gruppe mit diesem Namen
Erstellt eine Aufforderung für die LLM basierend auf Ihrer Beschreibung
Erzeugt regelmäßig frische Daten (standardmäßig alle 5 Sekunden)
Sendet es an alle abonnierten Kunden

Kontext Lebenszyklus Zustand Maschine

stateDiagram-v2
    [*] --> Created: Create Context<br/>(POST /contexts)

    Created --> Active: Start<br/>(auto or manual)
    Active --> Stopped: Stop<br/>(POST /stop)
    Stopped --> Active: Start<br/>(POST /start)

    Created --> Subscribed: Client Subscribes
    Active --> Subscribed: Client Subscribes
    Stopped --> Subscribed: Client Subscribes<br/>(no data sent)

    Subscribed --> Receiving: Data Push<br/>(if Active)
    Receiving --> Subscribed: Client Connected

    Subscribed --> Created: Unsubscribe
    Subscribed --> Active: Unsubscribe
    Subscribed --> Stopped: Unsubscribe

    Created --> [*]: Delete
    Active --> [*]: Delete
    Stopped --> [*]: Delete
    Subscribed --> [*]: Delete

    note right of Active
        Generates data
        Pushes to clients
        Shows "Active" badge
    end note

    note right of Stopped
        No data generation
        Clients stay connected
        Shows "Stopped" badge
    end note

Das UI-Layout verstehen

Die Schnittstelle hat drei Panels, um die Dinge organisiert zu halten:

Links: Kontext erstellen

Hier definieren Sie neue Datenströme. Sie benötigen:

Kontextname: Machen Sie es einzigartig und beschreibend. Die Verwendung von Kleinbuchstaben funktioniert gut.
WarenbezeichnungDie LLM funktioniert am besten mit klaren Beschreibungen wie "Benutzerprofile mit Namen, E-Mail, Alter und Premium-Status boolean."

Sie müssen keine JSON-Schemas schreiben oder Datentypen erklären. Die LLM leitet Struktur aus natürlichen Sprachbeschreibungen überraschend gut ab.

Mittel: Aktive Kontexte

Zeigt alle Ihre laufenden Kontexte mit:

Name und Statusschild (aktiv/gepflegt)
Verbindungszahl (wie viele Clients derzeit abonniert sind)
Bedientasten: Verbinden, Trennen, Starten, Anhalten, Löschen

Verbinden/Verbinden steuert das Abonnement Ihres Browsers. Klicken Sie auf Verbinden, um Daten zu empfangen, Trennen, um zu stoppen, ohne den Kontext zu löschen.

Start/Stopp steuert die Erzeugung von Backend-Daten. Dies ist nützlich, wenn Sie einen Stream anhalten möchten, ohne die Kontextkonfiguration zu zerstören.

Löschen entfernt den Kontext vollständig. Verwenden Sie dies, um aufzuräumen, wenn Sie mit einem bestimmten Datenstrom fertig sind.

Rechts: Live-Daten

Hier sehen Sie Echtzeit-Updates:

Verbindungsstatusanzeige (Connected/Disconnected)
Aktuell abonnierter Kontextname
Letzte 10 Nachrichten mit Zeitstempeln und Syntax-Hervorhebung

Die Daten erscheinen am allerneusten Anfang, so dass Sie immer die neuesten Updates sehen, ohne zu scrollen.

Das JavaScript-Verbindungsmuster

Die Seite verwendet HTMX für Formular-Einreichung und SignalR für Echtzeit-Konnektivität. Wenn Sie Ihren eigenen Client bauen, hier ist das SignalR-Muster, das Sie benötigen:

Client-Verbindungsfluss

sequenceDiagram
    participant Page as Your Page
    participant SR as SignalR Client
    participant Hub as /hub/mock
    participant BG as Background Service

    Page->>SR: new HubConnectionBuilder()<br/>.withUrl('/hub/mock')
    Page->>SR: connection.start()
    SR->>Hub: WebSocket connection
    Hub-->>SR: Connected ✓
    SR-->>Page: Trigger 'connected' event

    Page->>SR: invoke('SubscribeToContext', 'weather')
    SR->>Hub: SubscribeToContext('weather')
    Hub->>Hub: Add to 'weather' group
    Hub-->>SR: on('Subscribed', {context: 'weather'})
    SR-->>Page: Display "Subscribed"

    loop Every 5 seconds
        BG->>Hub: Broadcast to 'weather' group
        Hub->>SR: on('DataUpdate', {data, timestamp})
        SR->>Page: Update UI with new data
    end

    Page->>SR: invoke('UnsubscribeFromContext', 'weather')
    SR->>Hub: UnsubscribeFromContext('weather')
    Hub->>Hub: Remove from 'weather' group

Einrichtung der Verbindung:

const connection = new signalR.HubConnectionBuilder()
    .withUrl('/hub/mock')
    .withAutomaticReconnect()
    .build();

connection.on('DataUpdate', (message) => {
    // message.context: which context sent this
    // message.data: the actual JSON payload
    // message.timestamp: Unix timestamp in milliseconds
});

await connection.start();

Anmeldung für den Empfang von Daten:

await connection.invoke('SubscribeToContext', 'my-context-name');

Abmeldung nach Beendigung:

await connection.invoke('UnsubscribeFromContext', 'my-context-name');

Die Demo-Seite behandelt all dies automatisch, aber diese drei Muster sind alles, was Sie für eine benutzerdefinierte Implementierung benötigen.

Praktische Anwendungsfälle

Hier sind einige Szenarien, wo dieses Tool wirklich glänzt:

1. Aufbau von UIs vor APIs bestehen

2. Client-Vorführungen

3. Frontend-Entwicklung und Prüfung

4. Lastprüfung Echtzeit-Features

Sie wollen sehen, wie Ihre Benutzeroberfläche unter schnellen Updates funktioniert. Erstellen Sie einen hochfrequenten Kontext und beobachten Sie, wie Ihre Komponenten mit dem Datenfluss umgehen.

5. Teaching WebSockets und Echtzeit-Konzepte

Sie lehren SignalR- oder WebSocket-Konzepte und möchten, dass die Schüler in Echtzeit Updates sehen, ohne ein komplettes Backend zu bauen.

Schnellstart-Beispiele erklärt

Die fünf vorkonfigurierten Beispiele zeigen unterschiedliche gemeinsame Datenmuster:

IoT-Sensoren: Numerische Sensorwerte mit Geräte-Metadaten Aktienmarkt: Finanzdaten mit Preisen, Volumen und prozentualen Veränderungen E-Commerce-Aufträge: Verschachtelte Objekte mit Bestellelementen Arrays Server-Metriken: Systemüberwachung mit mehreren Leistungsmetriken Gaming Leaderboard: Spieler-Ranking mit Statistiken und Status

Diese Beispiele sind startbereit. Klicken Sie auf Starten, beobachten Sie die Daten und verwenden Sie sie als Vorlagen für Ihre eigenen Kontexte.

API-Endpunkte für Integration

Wenn Sie einen benutzerdefinierten Client erstellen oder diese in eine andere Anwendung integrieren, hier sind die HTTP-Endpunkte:

Einen Kontext erstellen:

curl -X POST http://localhost:5116/api/mock/contexts \
  -H "Content-Type: application/json" \
  -d '{"name": "sensors", "description": "Temperature sensors with device ID and readings"}'

Alle Kontexte auflisten:

curl http://localhost:5116/api/mock/contexts

Holen Sie sich einen bestimmten Kontext:

curl http://localhost:5116/api/mock/contexts/sensors

Erzeugung von Start- oder Stoppdaten:

curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop

Einen Kontext löschen:

curl -X DELETE http://localhost:5116/api/mock/contexts/sensors

Nachdem Sie einen Kontext erstellt haben, verbinden Sie sich mit dem SignalR-Hub bei /hub/mock und abonnieren, um Updates zu erhalten.

Wie funktioniert die LLM-Generation?

Wenn Sie einen Kontext erstellen, das System:

Nimmt Ihre Beschreibung an
Baut eine Eingabeaufforderung mit Randomness (GUID-Same + Zeitstempel für Varietät)
Bittet das LLM, passend zu Ihrer Beschreibung JSON zu generieren
Validiert die Antwort ist tatsächlich JSON (Streifen Markdown, falls erforderlich)
Caches mehrere Antworten für schnelle Lieferung
Erzeugt mehr im Hintergrund, um den Cache gefüllt zu halten

Performance und intelligentes Caching

Die Datengenerierung erfolgt im Hintergrund, nicht on-demand pro Push. Dies hält Updates konsistent und reduziert die LLM-Last.

Hier ist, wie es funktioniert:

Beim Start füllt das System einen Cache mit Antworten für jeden aktiven Kontext
Es misst, wie lange die Erzeugung dauert (z.B. 500ms pro Anfrage)
Es berechnet optimale Batch-Größe: Push-Intervall -Generierungszeit (5000ms -500ms = 10 Artikel)
Es generiert Batches im Hintergrund, um den Cache oben zu halten
Wenn es Zeit zum Drücken ist, zieht es sofort aus dem Cache

Ergebnis: Ihre erste Nachricht kommt sofort, nachfolgende Nachrichten kommen alle 5 Sekunden konsistent, und die LLM wird nicht kontinuierlich gehämmert.

Der intelligente Caching Flow

graph LR
    subgraph Startup
        A[App Starts] --> B[Pre-fill Cache]
        B --> C[Measure Gen Time<br/>500ms]
        C --> D[Calculate Batch<br/>5000ms / 500ms = 10]
    end

    subgraph Runtime Loop
        E[Timer Tick<br/>Every 5s] --> F{Cache > 50%?}
        F -->|Yes| G[Pop from Cache]
        F -->|No| H[Generate Batch<br/>in Background]
        G --> I[Push to Clients]
        H --> J[Refill Cache]
        J --> G
        I --> E
    end

    D --> E

    style B stroke:#10b981,stroke-width:3px
    style G stroke:#0ea5e9,stroke-width:3px
    style H stroke:#ef4444,stroke-width:3px
    style I stroke:#f59e0b,stroke-width:3px

Fehlerbehebung bei gemeinsamen Problemen

Verbindung zeigt "Abschaltung" und wird nicht wieder verbinden

Prüfen Sie, ob Ihr LLM-Dienst (Ollama/OpenAI) läuft
Standardkonfiguration erwartet Ollama bei http://localhost:11434
Ausführen ollama list um zu überprüfen, dass Sie Modelle installiert haben
Überprüfen Sie die Browser-Konsole auf SignalR-Verbindungsfehler

Kontext erstellt, aber keine Daten erscheinen

Schauen Sie sich das Active Contexts-Panel an – zeigt der Kontext "Aktiv"?
Klicken Sie auf die Schaltfläche Verbinden, wenn Sie noch nicht abonniert haben
Überprüfen des Verbindungsstatus zeigt grün (Connected) im Live-Datenfeld
Serverprotokolle überprüfen, um zu sehen, ob die LLM-Generierung funktioniert

Die Datenstruktur passt nicht zu dem, was Sie erwartet haben.

Machen Sie Ihre Beschreibung spezifischer und konkreter
Beispiel: "Temperatur als Zahl zwischen 0 und 100" funktioniert besser als nur "Temperatur"
Versuchen Sie, Ihre Beschreibung neu zu beschreiben – dies ist schnelles Engineering bei der Arbeit
Überprüfen Sie die generierten Daten und verfeinern Sie Ihre Beschreibung anhand dessen, was Sie sehen

Browser-Konsole zeigt SignalR-Wiederverbindungsversuche

Das Backend läuft vielleicht nicht – überprüfen Sie Ihr Terminal
Vielleicht haben Sie den Port geändert – aktualisieren Sie bei Bedarf die SignalR-Hub-URL
Suchen Sie nach Firewall- oder Netzwerkproblemen (insbesondere in Docker/WSL-Umgebungen)

Einstellungen

Sie können Verhalten anpassen in appsettings.json:

{
  "MockLlmApi": {
    "SignalRPushIntervalMs": 5000,  // How often to push data (milliseconds)
    "ModelName": "llama3",           // Which LLM model to use
    "Temperature": 1.2,              // Creativity level (0.0-2.0, higher = more varied)
    "BaseUrl": "http://localhost:11434",  // LLM service URL
    "HubContexts": [                 // Optional: pre-configured contexts
      {
        "Name": "weather",
        "Description": "Weather data with temperature, humidity, wind speed",
        "IsActive": true
      }
    ]
  }
}

SignalRpushIntervalMs: Weniger für schnellere Updates, höher, um LLM-Last zu reduzieren Temperatur: Höhere Werte geben mehr kreative / zufällige Daten, niedriger gibt mehr konsistente Ergebnisse HubKontexten: Definieren Sie Kontexte, die automatisch starten, wenn die Anwendung startet

Integration in Ihre Anwendung

Wenn Sie ein aktuelles Dashboard bauen und dieses während der Entwicklung verwenden möchten, hier ein React Beispiel:

import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl('http://localhost:5116/hub/mock')
  .withAutomaticReconnect()
  .build();

connection.on('DataUpdate', (message) => {
  if (message.context === 'stock-market') {
    updateStockChart(message.data);
  }
});

await connection.start();
await connection.invoke('SubscribeToContext', 'stock-market');

Wenn Sie bereit sind, zur Produktion zu wechseln, ändern Sie einfach die Hub-URL. Die SignalR-Schnittstelle (on() und invoke()) funktioniert auf die gleiche Weise mit echten Backends.

Warum das bauen?

Es gibt gute Mock-Daten-Bibliotheken gibt. Faker.js ist ausgezeichnet. Mockaroo tut große Arbeit. Also, warum ein anderes Werkzeug bauen?

Dieses Tool löst spezifische Herausforderungen:

Echtzeit-Streaming: Die meisten Tools geben Ihnen statische Datensätze oder REST-Endpunkte, nicht Live WebSocket-Streams
Natürliche Sprachschnittstelle: Beschreiben Sie, was Sie wollen, anstatt JSON-Schemas zu schreiben
Kontextbezogene Daten: LLMs erzeugen realistische Werte, die zusammen Sinn ergeben, nicht nur zufällige Strings, die zu einem Typ passen
Selbstdokumentation: Die Beschreibung ist die Dokumentation für Ihre Datenstruktur
Flexible Struktur: Ändern Sie Ihr Datenmodell in der Mitte der Entwicklung ohne Aktualisierung von Vorrichtungen

Es ist für einen bestimmten Workflow konzipiert: Echtzeit-UIs erstellen, wenn Sie abwechslungsreiche, realistische Daten ohne Konfigurationsüberkopf benötigen.

Erste Schritte

Der beste Weg, um dieses Tool zu verstehen, ist es zu verwenden:

Starten Sie die Anwendung: dotnet run --project LLMApi
Öffnen Sie Ihren Browser für http://localhost:5116
Klicken Sie auf eine der grünen "Launch"-Schaltflächen
Beobachten Sie den Datenstrom in

Schnellreferenz

Beginn:

dotnet run --project LLMApi

Standard-URL: http://localhost:5116

SignalR Hub: /hub/mock

Schlüsselmethoden:

SubscribeToContext(name) - Empfangen von Daten beginnen
UnsubscribeFromContext(name) - Daten nicht mehr empfangen

Wichtige Ereignisse:

DataUpdate - Neue Daten eingetroffen
Subscribed - Abonnement bestätigt
Unsubscribed - Abmeldung bestätigt

Das ist alles, was Sie wissen müssen. Der Rest ist nur zu erforschen, was Sie damit bauen können.