Theme 054 · Signature directions

Agent Chat

The whole film is one conversation. The hook is a noisy team chat nobody answers; on the drop the thread clears and the agent arrives; the proof is the agent messaging first, with the anomaly rendered as a tool card inside its bubble and the human replying “Roll back”. Serif titles sit above the chat like film subtitles.

readability ●●●trust ●●○effort med

How many dashboards did you check today?

#metrics-team · group chat · Friday

is checkout still red??

which dashboard, there are 38

tab 12 says fine, tab 31 says −18%

who is on call?

✓✓ seen by 6 · no reply

typing …

Message #metrics-team↑

1 · HOOK0:00–0:08

Bubbles shoot up from the composer, one per beat, pushing older ones up into a fade mask; in bar 4 the tempo doubles to half-beats, “typing…” appears and dies unanswered on the last downbeat.

Acme Pulse

● ONLINE · WATCHING 14 METRICS

ACME PULSE

You ship. I’ll watch every metric, every minute — you make the call.

Ask Pulse anything…↑

2 · REVEAL0:08 (drop)

On the drop every bubble is swept upward and the thread empties; the mark pops at centre with three rings expanding outward, then one beat of “typing…” and the first agent bubble pops in from bottom-left.

Pulse writes first.

Acme Pulse · 14 metrics · 2,418 events/sec● new

Morning check: all 14 metrics normal ✓

— 09:44 · you didn’t ask · Pulse started this —

ACME PULSE

I caught a drop right after a deploy:

ANOMALY · CHECKOUT CONVERSION

−18% since 09:42 · after deploy #2231

Roll backAcknowledge

Roll back.

✓ decided by you · 09:45

3 · PROOF MOMENT0:12–0:32

No user message first: the “● new” pill lights, the agent bubble pops from the left and the tool card unfolds top→down on the bar-9 downbeat; the user’s “Roll back.” flies in from the right on the next downbeat.

Acme Pulse

You ship. Pulse watches.

Start free ↑

4 · CTA0:36–0:45

The window’s edges shrink inward as dashed frames while the chat folds into the lockup; the tagline rises and the CTA pops up from below like the last message bubble on the sting.

COMPONENT KIT

User bubble — right-aligned, ink fill, white text, sharp bottom-right corner
Agent bubble — left, white card with hairline + Acme mark avatar and a mono “ACME PULSE” label
Typing indicator — three dots pulsing on the beat; in the hook it dies unanswered
Tool card — coral header strip, giant mono number, sparkline with deploy rule, context line, action chips
System note — centred mono line (“you didn’t ask · Pulse started this”) that gives time and agency
Composer — pill input with teal send button; the CTA is styled as the final outgoing message

MOTION · MUSIC

Bubble pop — scale .9 → 1 + 30 px rise from its sender side, back.out(1.6) 0.3 s, one per beat (0.5 s at 120 BPM)
Thread scroll — older bubbles translate up by bubble height, power2.out 0.25 s, synced to each new pop
Tool-card unfold — height 0 → auto via clip-path over 0.5 s (power3.out) landing on a bar downbeat; chips stagger in 0.1 s apart

WHY / RISK · ADAPT IT

Chat is the native mental model for “an AI agent”, and a proactive first message is the clearest possible proof of a background agent. The risk is looking like every other chatbot demo — the tool card and the human decision must be visibly the hero, not the typing animation.

Adapt to your product: Replace the tool card with the richest result your product returns (a diff, a chart, a booking, a draft) and keep the pattern: the agent speaks first, the human answers with one decisive action.

References: https://ai-sdk.dev/docs/ai-sdk-ui/generative-user-interfaces (tool results rendered as components inside chat) · https://vercel.com/blog/ai-sdk-3-generative-ui (generative UI announcement with streaming components)