affectUI › Illustrations › Product scenes

Inspect Composer

A chat composer seen like a selection in a design tool – tilted back, with a blue frame, spacing numbers and a red guide walking through its rows.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/inspect-composer.json · Import from @/components/ui/inspect-composer

When to use

Hero or feature section of a UI kit, design tool or developer product – it shows that the interface is built with care, down to the pixel
Beside a headline, one on each side: this one on the left, Inspect Agent Card on the right, with different delays so they take turns
Launch posts and OG images – a still frame with playing={false} reads well small

When not to use

As the real interface – it's a picture of one; nothing in it can be clicked
In tight spaces – it needs about 400 × 330px, and its fades want room around it

Usage

import { InspectComposer } from "@/components/ui/inspect-composer";

export function Hero() {
  return (
    <section className="relative">
      <h1>UI for AI agents</h1>
      <InspectComposer className="absolute left-0 top-24" />
    </section>
  );
}

Props

Name	Type	Default	Description
`message`	`string`	`"Ask the agents to ship the new pricing page"`	The message in the composer
`above`	`string \| null`	`"Summarize the pricing research for the team"`	The message in the composer faded out above it – null leaves it out
`mode`	`string`	`"Auto"`	The mode on the approval button
`playing`	`boolean`	`true`	Walks the selection through the rows – false holds it on the message
`hold`	`number`	`1600`	How long the selection stays on a row, in ms
`delay`	`number`	`600`	Wait before the first selection, in ms – e.g. until the section around it has come in
`mirror`	`boolean`	`true`	Tilted towards the left and fading out to the left, the edge marks on the right – as on the left of a layout; false turns it the other way
`flat`	`boolean`	`false`	No tilt
`className`	`string`		Extra class on the root

Accessibility

Decorative: the whole illustration is hidden from screen readers and takes no clicks
With prefers-reduced-motion nothing moves: the selection stands still on the message

Responsive

Fixed size, about 400 × 330px with its fades – scale it with zoom or a transform for smaller screens
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
Inspect Agent Card – An agent card seen like a selection in a design tool – tilted back, with a blue frame, spacing numbers and a red guide walking through its rows
Agent Team – A prompt types itself and branches out into three agents, each with a role and overlapping tool logos