Model Failover Path React component
Show which AI model is answering and what happens when one fails: requests move down a chain of backups, with speed and cost changing as they do.
About the Model Failover Path component
Model Failover Path makes a fallback plan easy to see. The line runs from each request to whichever model is answering, and the figures show what that means for speed and cost.
Take a model down and the traffic moves on to the next one, with a short log of what happened. It's a clear way to explain or rehearse an outage.
When to use it
Use it in AI gateways, admin panels and reliability docs.
Show real health data in production. Clicking to fail a model is best kept for demos and drills.
Installation
Add the Model Failover Path component to your project with the shadcn CLI. It lands in components/model-failover-path.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/model-failover-pathProps
<ModelFailoverPath /> 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 | "Support replies" |
| rule When it moves on, in plain words. | string | "Moves on after two failed tries or eight seconds." |
| models In the order they're tried. | { id: string; name: string; latency: number; cost: number; down?: boolean }[] | DEFAULT_MODELS |
| onChange | (active: FailoverModel | null, down: string[]) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Support replies"
- rule
When it moves on, in plain words.
stringDefault: "Moves on after two failed tries or eight seconds." - models
In the order they're tried.
{ id: string; name: string; latency: number; cost: number; down?: boolean }[]Default: DEFAULT_MODELS - onChange(active: FailoverModel | null, down: string[]) => void
Model Failover Path FAQ
- Does it route real traffic?
- No. It displays your setup. onChange tells you what was picked.
- What if every model is down?
- The line stops, and the card says no model is available.
- Can I start with a model down?
- Yes. Set down on that model.
- Can I use the keyboard?
- Yes. Each model can be reached with Tab and changed with Enter.
