FARAZ
DEContact
Free

Thinking Orbs for Your AI Interface: the Full Tutorial

A step-by-step tutorial for small animated status orbs that show what your AI agent is doing, with Thinking Orbs, an open-source library by Yogesh, and the finished agent-chat example app to run yourself.

0 €

Enter your email. You get a 6-digit code, then the download starts.

Node.js 20+ and npm, a React app (the guide uses Vite) or a plain HTML page. No account, no API key. For the SwiftUI part: Xcode and iOS 17 or macOS 14.

What you get

  • Setup Install with npm, or copy the source into your project with shadcn.
  • States All 9 states and 23 variants, from thinking and searching to retrying and done.
  • Style 5 shapes, 8 render styles, and tinting with one CSS colour.
  • Agent chat Map your agent's events to orb states: the pattern from the example app.
  • Beyond React Plain JavaScript without a build step, and a short SwiftUI part.
  • Example app The finished code from the guide, tested with npm run build.

In three steps

  1. Unzip and open the guide PDF. Or start the example right away: npm install and npm run dev in example-app.
  2. Follow the eight steps to build it into your own app.
  3. Or paste INSTALL-WITH-CLAUDE.md into Claude Code and build it together step by step.

Fabian Faraz Farid · All links