Zum Inhalt springen
Zurück zu Artikel

Site 4 That bauen: Eine KI-gestützte Tools-Plattform für den Alltag

Byte Smith · · 4 Min. Lesezeit

Die meisten KI-Tools im Internet fallen derzeit in zwei Lager: Enterprise-Produkte, die Hunderte pro Monat kosten, und Demo-Wrapper um ChatGPT, die beim kleinsten Problem zusammenbrechen. Ich wollte etwas dazwischen — praktische, erschwingliche Tools, die bei den Dingen helfen, mit denen Menschen täglich zu tun haben. Diese Idee wurde zu Site 4 That, einer Plattform mit über 40 KI-gestützten Tools für ADHS-Management, Beziehungen, Produktivität, Wohlbefinden, Erziehung und Arbeit.

Dieser Beitrag behandelt die Architektur, die Entscheidungen, die wichtig waren, und die Tools selbst.

Das Problem, das es zu lösen gilt

Jeder hat diesen Freund, der sagt „nutze einfach ChatGPT dafür.” Und klar, man kann ein LLM bitten, bei der Tagesplanung zu helfen oder ein Anschreiben zu verfassen. Aber die meisten Menschen wollen keine Prompts formulieren. Sie wollen ein Tool öffnen, ein paar Felder ausfüllen und ein nützliches Ergebnis bekommen. Diese Lücke füllt Site 4 That — kuratierte, zweckgebundene KI-Tools mit guten Standardwerten, vernünftigen Grenzen und Ausgabeformatierung, die für die jeweilige Aufgabe optimiert ist.

Die Plattform deckt sieben Kategorien ab:

Jedes Tool hat einen sorgfältig geschriebenen System-Prompt, strukturierte Eingabefelder und eine Ausgabeformatierung, die auf den jeweiligen Anwendungsfall abgestimmt ist.

Architektur-Entscheidungen

Der Stack ist Next.js 15 mit dem App Router, React 19, TypeScript, PostgreSQL auf Neon, Stripe für Zahlungen und Anthropics Claude für die KI-Generierung. Das Ganze läuft auf AWS App Runner in einem Docker-Container.

Datengesteuerte Tools

Die wichtigste Architektur-Entscheidung war, die Tools datengesteuert zu machen. Jedes Tool wird vollständig durch eine JSON-Konfigurationsdatei definiert — kein benutzerdefinierter React-Code nötig. Die Konfiguration spezifiziert den Namen des Tools, Eingabefelder, System-Prompt, Ausgabeformat, PDF-Guide-Inhalt und SEO-Metadaten. Die Plattform liest die Konfiguration, rendert ein generisches Formular-UI, streamt Claudes Antwort via SSE und zeigt das Ergebnis an.

Das bedeutet, ein neues Tool zu veröffentlichen ist nur das Schreiben einer JSON-Datei und einer Datenbank-Migration. Kein Frontend-Code, kein separates Deployment. Die Tools-Übersichtsseite erkennt es automatisch.

Interaktive Tools

Einige Tools brauchen eine benutzerdefinierte Oberfläche jenseits eines Formulars. Der Fokus-Timer ist ein visueller Pomodoro-Timer mit Sitzungsverfolgung — das kann kein Formular sein. Interaktive Tools bekommen ihre eigene React-Komponente, die in einem einfachen Registry registriert wird, aber sie können immer noch denselben KI-Generierungs-Endpoint aufrufen, wenn sie Claudes Hilfe brauchen. Interaktive Tools sind eine Obermenge der datengesteuerten Tools, kein separates System.

Streaming-Antworten

Jede KI-Generierung wird über Server-Sent Events gestreamt. Der Client empfängt data: {"text": "..."}-Fragmente, während Claude generiert, sodass Nutzer die Ergebnisse in Echtzeit erscheinen sehen. Das ist wichtig für längere Ausgaben wie Tagesplaner oder Essenspläne, bei denen das Warten auf die vollständige Antwort kaputt wirken würde.

Datenbankgestütztes Rate Limiting

Das Rate Limiting wird durch PostgreSQL mit atomaren Upserts und Row-Level-Locking gestützt. Das macht es sicher über mehrere Instanzen hinweg, ohne Redis zu benötigen. Kostenlose Nutzer erhalten eine begrenzte Anzahl von Generierungen pro rollendem 30-Tage-Fenster, serverseitig durchgesetzt. Der Client zeigt einen Nutzungszähler an, aber der Server ist maßgeblich.

Das Monetarisierungsmodell

Die Preisgestaltung ist bewusst einfach:

  • Kostenlose Stufe — drei KI-Generierungen über alle Tools innerhalb eines 30-Tage-Fensters. Genug zum Ausprobieren und um zu sehen, ob ein Tool nützlich ist.
  • PDF-Guide — ein einmaliger Kauf von 3 $ pro Tool, der einen herunterladbaren PDF-Guide plus eine 7-tägige kostenlose Testphase mit unbegrenztem Zugang bietet. Das PDF wird mit React PDF generiert und enthält Strategien und Tipps zur jeweiligen Tool-Kategorie.
  • Abonnement — 10 $ pro Monat für unbegrenzten Zugang zu allen Tools, plus kostenlose PDF-Downloads.

Der PDF-Kauf erfüllt einen doppelten Zweck. Er ist ein niederschwelliger Einstiegspunkt für Menschen, die noch nicht bereit für ein Abonnement sind, und die Testphase lässt sie die vollständige Plattform erleben, bevor sie sich entscheiden.

Was ich anders machen würde

Wenn ich von vorne anfangen würde, würde ich die PDF-Generierungs-Pipeline früher bauen. PDFs spontan während eines Stripe-Webhooks zu generieren, fügt Latenz und Fehlermodi hinzu, die Vor-Generierung vermeidet. Das System generiert jetzt PDFs vorab und speichert sie in S3, aber dorthin zu gelangen erforderte einige Iterationen.

Ich würde auch von Tag eins mit der datengesteuerten Tool-Architektur beginnen. Die ersten Tools hatten benutzerdefinierte Komponenten, bevor ich erkannte, dass das Muster generisch genug zum Extrahieren war. Diese Refaktorisierung hat sich sofort bezahlt gemacht — jedes Tool danach wurde in einem Bruchteil der Zeit ausgeliefert.

Ausprobieren

Die gesamte Plattform ist live auf site4that.com. Die kostenlose Stufe erfordert kein Konto und keine Kreditkarte. Ob ADHS, Beziehungsverbesserung oder einfach nur ein Essensplan für die Woche — es gibt wahrscheinlich ein Tool dafür.