Was ist die beste Architektur, um lokale KI und Cloud-KI in einer React/JS-App zu mischen, ohne die Codebasis in Spaghet ⇐ JavaScript

[Anonymous]

Ich versuche, ein „zukunftssicheres“ React/JS-Setup zu entwerfen, bei dem die App zwischen verschiedenen KI-Backends (lokale Modelle wie WebGPU/WebLLM, API-Modelle wie OpenAI/Gemini und vielleicht sogar benutzerdefinierte Worker) wechseln kann, ohne jedes Mal, wenn ein neues Modell auftaucht, die Hälfte des Projekts neu zu schreiben.
Ich spreche nicht von einem einfachen „if (provider === x)“-Wechsel. Ich meine eine echte Architektur, die dafür sorgt, dass die Dinge sauber, testbar und nicht eng an einen einzelnen KI-Anbieter gekoppelt sind.
Dinge, über die ich nachgedacht habe und mit denen ich nicht besonders zufrieden bin:

• Eine einzelne „AIService“-Klasse mit riesigen Bedingungsblöcken schreiben
• alle Anbieter in React Context einbinden und es wird sehr schnell chaotisch
• Ich erstelle einen Wrapper für jedes Modell, aber am Ende dupliziere ich die Logik
• leite alles über ein einziges API-Backend, aber dann verliere ich die WebGPU-Leistung und Offline-Fähigkeit
• Verwende etwas wie RxJS oder Zustand, um Streams zu verwalten, aber es fühlt sich immer noch wie ein Overkill an

Das Wichtigste Ziele:

• Hot-Swap zwischen Anbietern zur Laufzeit (OpenAI → Gemini → lokales Modell)
• Streaming-Antworten auf einheitliche Weise verarbeiten
• Vendor-Lock-Codemuster innerhalb von Komponenten vermeiden
• Dinge vorhersehbar halten, wenn ich weitere Modelle hinzufüge später
• funktionieren gut mit Suspense, Server Components oder React Native, wenn möglich

Ich habe einige Teams gesehen, die eine vollständige „KI-Adapterschicht“ aufgebaut haben, aber jeder scheint es anders zu machen.

Was ist also hier im Jahr 2025 die beste Vorgehensweise?

Wie strukturieren erfahrene Entwickler dies so, dass sie es können? Das Projekt explodiert nicht, da die KI-Anbieter alle zwei Monate wechseln?
Alle Architekturmuster, Ordnerstrukturen oder Beispiele aus der Praxis sind herzlich willkommen.

Code: Select all

// something like this but not terrible
export class AIProvider {
constructor(config) { this.config = config }
stream(prompt) { throw new Error("not implemented") }
info() { return { name: "base" } }
}

// OpenAI impl
export class OpenAIProvider extends AIProvider {
async *stream(prompt) {
// call openai api...
}
}

// Local WebGPU impl
export class LocalModelProvider extends AIProvider {
async *stream(prompt) {
// call webgpu model...
}
}

Ich möchte wissen, wie Menschen, die wirklich KI-Produkte entwickeln, dies sauber und erweiterbar halten.