FARAZ
ENKontakt
Gratis

Thinking Orbs for Your AI Interface: the Full Tutorial

Ein Schritt-für-Schritt-Tutorial für kleine animierte Status-Orbs, die zeigen, was dein KI-Agent gerade tut, mit Thinking Orbs, einer Open-Source-Bibliothek von Yogesh, und der fertigen Agent-Chat-Beispiel-App zum Selbststarten.

0 €

Gib deine E-Mail ein. Du bekommst einen 6-stelligen Code, dann startet der Download.

Node.js 20+ und npm, eine React-App (der Guide nutzt Vite) oder eine einfache HTML-Seite. Kein Konto, kein API-Key. Für den SwiftUI-Teil: Xcode und iOS 17 oder macOS 14.

Was du bekommst

  • Setup Mit npm installieren oder den Quellcode per shadcn ins eigene Projekt kopieren.
  • States Alle 9 Zustände und 23 Varianten, von Denken und Suchen bis Neuversuch und Fertig.
  • Style 5 Formen, 8 Darstellungsstile und Einfärben mit einer CSS-Farbe.
  • Agent chat Die Ereignisse deines Agenten auf Orb-Zustände abbilden: das Muster aus der Beispiel-App.
  • Beyond React Reines JavaScript ohne Build-Schritt und ein kurzer SwiftUI-Teil.
  • Example app Der fertige Code aus dem Guide, getestet mit npm run build.

In drei Schritten

  1. Entpacken und den Guide (PDF) öffnen. Oder direkt das Beispiel starten: npm install und npm run dev in example-app.
  2. Mit den acht Schritten in deine eigene App einbauen.
  3. Oder INSTALL-WITH-CLAUDE.md in Claude Code einfügen und Schritt für Schritt zusammen bauen.

Fabian Faraz Farid · Alle Links