Live Bot Pointers React component
Named pointers show where each AI bot is working on a shared surface, with the area it's changing, a live list of what each one is doing, and a pause for any of them.
About the Live Bot Pointers component
Live Bot Pointers makes AI work visible in the same way people's cursors do in a shared document. Each bot gets a named pointer, and the part it's changing lights up in its colour.
A list beside the surface says what each bot is doing right now. Anyone can pause one bot or all of them, so people stay in charge of their own document.
When to use it
Use it in editors, spreadsheets and canvases where agents work next to people.
Show real activity. Pointers that wander for effect teach people to ignore them.
Installation
Add the Live Bot Pointers component to your project with the shadcn CLI. It lands in components/live-bot-pointers.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/live-bot-pointersProps
<LiveBotPointers /> accepts 5 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Three bots on this document" |
| bots | { id: string; name: string; color?: string; dwell?: number; stops: BotStop[] }[] | DEFAULT_BOTS |
| children Your own surface. Stops are percents of it, so any layout works. | React.ReactNode | — |
| onPauseChange | (pausedIds: string[]) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Three bots on this document"
- bots{ id: string; name: string; color?: string; dwell?: number; stops: BotStop[] }[]Default: DEFAULT_BOTS
- children
Your own surface. Stops are percents of it, so any layout works.
React.ReactNode - onPauseChange(pausedIds: string[]) => void
Live Bot Pointers FAQ
- Can I use my own surface?
- Yes. Pass it as children. Stops and areas are percents, so they fit any layout.
- How do I feed in live positions?
- Update the bots prop with new stops. Each bot walks through its stops in order.
- Does it run when off screen?
- No. The timers only run while the card is in view.
- What about reduced motion?
- Pointers stay at their first stop, and the list still works.
