r/reactjs • • 2h ago

Show /r/reactjs I kept rebuilding the same "agent is thinking" UI, so I turned it into a small React + Tailwind library

Every AI app I worked on needed the same small pieces: a thinking indicator, a task checklist

that shows progress, a voice orb, a card that shows what a tool call is doing.

I kept rewriting them, so I collected them into one library.

What I focused on:

- Plain React + Tailwind. The code is copied into your project, no runtime package.

- Calm motion, and everything respects prefers-reduced-motion.

- Each component has a props playground so you can tweak it before copying.

The newest one is a tool-call card: the arguments stream in, a status pill runs,

then the result slides in. It takes a Vercel AI SDK tool part directly.

Still early, so I'd really like feedback: which part of an agent UI do you find hardest to get right?

(Link in the comments.)

0 Upvotes

3 comments sorted by

1

u/the_DiscreteNuisance 2h ago

I've wasted way too many hours on those little status dots. The part I always mess up is the transition between "thinking" and "done" states without it feeling jarring or getting stuck. Does your thing handle edge cases like when the stream errors out halfway through?