Agent Primitives

Interactive gallery

Crafted primitives for AI-native interfaces

Sixteen patterns covering thinking states, streaming answers, tool calls, human-in-the-loop approvals, diffs, and agent data surfaces. Hit Replay on any card to re-run the interaction.

CognitionToolsHITLDataContext
01

Loading State

Pixel-grid loader with shimmer and elapsed time.

Harbor Ops · agent boot

Churning inventory model

0.0s elapsed

02

Thinking

Expandable traces — steps, reasoning, search, coding.

Agent trace
  • Working…
03

Streaming Text

Streamed answer with inline sources, actions, and follow-ups.

Answer stream

10 sourcesHarbor CRMPOS export
04

Approval Card

Human-in-the-loop questions the agent asks before acting.

Human-in-the-loop
Needs approval

How many flavors should we launch?

Agent will schedule production and open POs after you choose.

05

Tool Chips

Code edits and tool calls as compact chips.

Tool calls · 4 tools, 2 messages
06

Task Rows

Live agent task status — running, failed, completed.

Live task queue
    07

    Chat

    Tabbed chat panel with reasoning replies and a composer.

    Agent chat
    Compare mint chip to last summer
    08

    Recommendation Card

    Agent suggestion with a confidence meter and actions.

    Agent recommendation
    Smart restock

    Reorder waffle cones from cone_king

    Lead time 7_days · covers projected stockout on SKU-W04

    Confidence
    0%
    09

    Context Cards

    Retrieved knowledge chunks with their sources.

    Retrieved knowledge · 32 chunks
    10

    Diff Table

    AI-proposed edits sweeping through tabular data.

    AI-proposed menu cleanup
    FlavorCategorySupplierDiff
    11

    Records Table

    CRM-style grid with tags, sorting, and relationship status.

    CRM grid · 26 records
    26 companies44% avg connection
    CompanyCategoriesLast interactionConnection
    Andes Snow Creamery
    Quito
    GelatoCatering
    		almost 2 years agoVery weak
    Kumo Creamery
    Tokyo
    Soft serve
    		3 days agoStrong
    Maple Orbit
    Montréal
    SeasonalWholesale
    		2 weeks agoMedium
    Lumen Soft Serve
    Copenhagen
    Equipment
    		yesterdayStrong
    12

    Filter Table

    Status chips that reorganize live data.

    Status chips · live data
    Restock mango sorbet
    Mango Moon · due Dec 03
    To do
    Churn black sesame
    Kumo · due Sep 22
    In Progress
    Audit cold-chain logs
    Ops · due Oct 01
    In Progress
    Close pistachio PO
    Maple · due Aug 12
    Completed
    Draft weekend promo
    Growth · due Nov 18
    To do
    14

    Insight Cards

    Paged agent insights with scrub-ready live charts.

    Agent insights · 3
    Worst performer

    Rocky Road is down -6% or -$2,453.44 vs prior period.

    Velocity+8.2%
    15

    Code Block

    Agent-written code streaming in line by line.

    churn.ts · TypeScript
    churn.ts
    16

    Fine-tune Card

    The agent adjusts design properties in an inspector.

    Design inspector · agent adjust
    Flavor card
    Pistachio · Limited
    Lead time 7 days · high confidence
    Adjust

    Agent proposes live design tokens. Accept to apply across the surface.