AI product hero

A landing hero for an agent product: an editorial headline row over a live agent run that tracks its own steps and the metric it fixes.

Markdown

On this page

An editorial headline row over a live agent run that tracks its steps and the metric it fixes.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/ai-product-hero.json

Usage

tsx

import { AiProductHero } from "@/components/chatcn/sections/ai-product-hero"

export default function Page() {
  return (
    <AiProductHero
      title="Incidents, handled before you open the laptop."
      description="Backstop reads your alerts, logs and deploys and asks before it rolls anything back."
      primaryAction={<a href="/signup">Connect your stack</a>}
    />
  )
}

The demo plays a scripted run built with script() from chatcn-stream. Pass run to show your own agent: a script, the steps it moves through (each step is the tool call ids that complete it) and an optional metric that recovers when the run ends. Pass demo to replace the window entirely.

Props

Prop	Type	Description
title	ReactNode	The headline. Keep it under ten words.
description	ReactNode	One or two sentences under the headline.
primaryAction	ReactNode	The main call to action, your own link or button.
secondaryAction	ReactNode	A quieter text link next to it.
note	ReactNode	Small print under the actions: integrations, trial terms.
run	AiProductHeroRun	Script, steps, metric and facts for the demo window.
demo	ReactNode	Replaces the demo window.

Accessibility

The run is a focusable log region; tokens are never announced one by one.
The header status (Investigating, Needs approval, Resolved) is a polite live region.
The approval is a real tool call approval: keyboard reachable Allow and Deny buttons.
The rail is an aside labelled Run progress, with each step's status as text, not only a glyph.

Motion

The run plays only while at least a quarter of it is on screen and pauses when scrolled away. Steps fill in with a 280 ms color change and the metric crossfades on recovery. With reduced motion the run still plays; the value swap loses its blur.