Mid-run Nudge Bar React component
Steer an AI agent while it works: watch each step arrive, send a quick nudge or your own note, and pause or stop without losing what's done.
About the Mid-run Nudge Bar component
Mid-run Nudge Bar means nobody has to wait for an agent to finish before correcting it. Steps arrive as they happen, and a short note changes the plan while the work carries on.
Suggested nudges cover the usual corrections, and there's room for your own words. Pause gives you a moment to think, and Stop ends the run with everything so far kept.
When to use it
Use it in coding agents and long automations, anywhere catching a mistake early saves real time.
Connect it to something that really listens. A nudge box that changes nothing destroys trust fast.
Installation
Add the Mid-run Nudge Bar component to your project with the shadcn CLI. It lands in components/mid-run-nudge-bar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/mid-run-nudge-barProps
<MidRunNudgeBar /> accepts 10 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 | "Move invoices to the new billing API" |
| bot | string | "Patch" |
| steps The steps the bot works through, in order. | string[] | DEFAULT_STEPS |
| suggestions | { label: string; reply: string }[] | DEFAULT_SUGGESTIONS |
| stepMs Milliseconds per step. | number | 1400 |
| loop Starts again at the end. Handy for demos. | boolean | false |
| onNudge | (text: string) => void | — |
| onPauseChange | (paused: boolean) => void | — |
| onStop | () => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Move invoices to the new billing API"
- botstringDefault: "Patch"
- steps
The steps the bot works through, in order.
string[]Default: DEFAULT_STEPS - suggestions{ label: string; reply: string }[]Default: DEFAULT_SUGGESTIONS
- stepMs
Milliseconds per step.
numberDefault: 1400 - loop
Starts again at the end. Handy for demos.
booleanDefault: false - onNudge(text: string) => void
- onPauseChange(paused: boolean) => void
- onStop() => void
Mid-run Nudge Bar FAQ
- Does it talk to my agent?
- Not by itself. onNudge, onPauseChange and onStop give you the events, and steps comes from your run.
- Can I change what the bot answers?
- Yes. Each suggestion has its own reply. Free text gets a general one.
- Does the log change the card's height?
- No. Rows have fixed positions, and old ones scroll out of the top.
- What about reduced motion?
- Steps don't advance on their own, and every button still works.
