Components / AI

Agent Action

A call-to-action element that launches an AI agent with a preset prompt. The full instruction set is stored in the component and never shown to the user; only a friendly title and brief description are rendered. Four variants cover placement contexts from priority page-topper banners to dashboard rows and compact toolbar triggers. Use the urgency prop to tint the surface for time-sensitive items.

Banner variant

Wide, low-height strip that spans the full content width. Designed to sit at the top of a page as a priority prompt without taking up much vertical space. Combine with urgency to draw the manager's eye to expired, overdue, or deadline-driven items.

Danger — expired or overdue

Insurance ExpiredThe building insurance for Sunset Gardens expired 3 days ago. Renew immediately to avoid an uninsured period.

Insurance

Warning — approaching deadline

AGM Notice Pack Due in 9 DaysDraft and send the AGM notice pack before the 21-day statutory window closes on 6 July.

AGM

Info — guidance or advisory

New Strata Hub Lodgement Requirements from 1 JulyUpdated forms are required. Review and update your lodgement templates before the deadline.

Compliance

Default

Prepare Q3 Levy NoticesGenerate and send levy notices to all lot owners for the July quarter.

Levies

tsx

// danger: expired or overdue item — sits at the top of a page
<AgentAction
  variant="banner"
  urgency="danger"
  title="Insurance Expired"
  description="The building insurance for Sunset Gardens expired 3 days ago. Renew immediately."
  prompt="[full prompt]"
  category="Insurance"
  icon={ShieldCheck}
  onTrigger={openAgent}
/>

// warning: approaching deadline
<AgentAction
  variant="banner"
  urgency="warning"
  title="AGM Notice Pack Due in 9 Days"
  description="Draft and send the AGM notice pack before the 21-day statutory window closes."
  prompt="[full prompt]"
  category="AGM"
  icon={CalendarDays}
  onTrigger={openAgent}
/>

// info: guidance update or non-urgent advisory
<AgentAction
  variant="banner"
  urgency="info"
  title="New Strata Hub Lodgement Requirements"
  description="Updated forms are required from 1 July 2026. Review and update your lodgement templates."
  prompt="[full prompt]"
  category="Compliance"
  icon={Info}
  onTrigger={openAgent}
/>

Urgency on cards and rows

The urgency prop also tints cards and rows, giving consistent visual priority signals across all variants. Icon chips change colour to match the urgency tone.

Cards

Urgency tones on card variant

Insurance Expired

Insurance

Policy lapsed 3 days ago. Act immediately.

AGM Notice Due

AGM

Statutory notice window closes in 9 days.

New Lodgement Forms

Compliance

Updated templates required from 1 July.

Send Levy Notices

Levies

Generate Q3 levy notices for all lot owners.

Rows

Urgency tones on row variant

Action required

Insurance Expired

Insurance

Policy lapsed 3 days ago — scheme is currently uninsured.

AGM Notice Due in 9 Days

AGM

Draft and send before the 21-day statutory window closes.

New Lodgement Forms

Compliance

Updated Strata Hub templates required from 1 July.

Send Q3 Levy Notices

Levies

Generate and send levy notices to all 42 lot owners.

Card variant

Standalone bordered panel. Good for detail views, sidebars, and 2-3 column grids. Each card shows the icon, title, optional category badge, a description, and a forest-green launch button.

Insurance renewal

Scheme detail page

Renew Building Insurance

Insurance

The agent will review the current policy expiry, compare market quotes from at least three insurers, and prepare a renewal recommendation for committee approval.

AGM notice pack

Compliance task

Prepare AGM Notice Pack

AGM

Draft the AGM notice, motions, proxy form, and cover letter using this year's financials and the committee-approved agenda.

3-column action grid

Dashboard — agent actions panel

Renew Building Insurance

Insurance

Policy expires in 9 days. Review quotes and prepare the renewal recommendation.

Prepare AGM Notice Pack

AGM

Draft motions, proxy forms, and the cover letter for the 15 July AGM.

Send Q3 Levy Notices

Levies

Generate and send levy notices to all 42 lot owners for the July quarter.

tsx

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <AgentAction
    variant="card"
    title="Renew Building Insurance"
    description="Review expiring policy, get quotes, prepare renewal recommendation."
    prompt="[full prompt]"
    category="Insurance"
    icon={ShieldCheck}
    onTrigger={openAgent}
  />
  <AgentAction
    variant="card"
    title="Prepare AGM Notice Pack"
    description="Draft motions, proxy forms, and the cover letter for the upcoming AGM."
    prompt="[full prompt]"
    category="AGM"
    icon={CalendarDays}
    onTrigger={openAgent}
  />
  <AgentAction
    variant="card"
    title="Send Levy Notices"
    description="Generate and send levy notices for Q3 to all 42 lot owners."
    prompt="[full prompt]"
    category="Levies"
    icon={CreditCard}
    onTrigger={openAgent}
  />
</div>

Row variant

Compact list item. Wrap in AgentActionList for a titled, divided list panel. Rows sit comfortably inside a Widget flush content area.

Deadline-driven action list

Dashboard widget

Suggested agent actions

Renew Building Insurance

Insurance

Policy expires in 9 days. Get competitive quotes and prepare a renewal recommendation.

Chase lift maintenance quotes

Maintenance

Three quotes are outstanding for the lift upgrade. Follow up each contractor and update the committee.

Lodge Strata Hub annual return

Compliance

The annual return for Harbour View Towers is overdue. Complete and lodge via the Strata Hub portal.

tsx

import { AgentAction, AgentActionList } from "@/components/ui/agent-action"
import { ShieldCheck, Wrench } from "lucide-react"

<AgentActionList title="Suggested agent actions">
  <AgentAction
    variant="row"
    title="Renew Building Insurance"
    description="Policy expiring in 9 days. Get quotes and prepare a renewal recommendation."
    prompt="[full prompt]"
    category="Insurance"
    icon={ShieldCheck}
    onTrigger={openAgent}
  />
  <AgentAction
    variant="row"
    title="Chase lift maintenance quotes"
    description="Three quotes are outstanding for the lift upgrade. Follow up each contractor."
    prompt="[full prompt]"
    category="Maintenance"
    icon={Wrench}
    onTrigger={openAgent}
  />
</AgentActionList>

Property-contextual actions

Scheme detail — available agent actions

Available agent actions

Draft committee meeting minutes

Admin

Convert the meeting recording transcript into formatted minutes ready for committee approval.

Review by-law breach notice

Compliance

Assess the reported breach, check the applicable by-law, and draft a formal notice to the lot owner.

Prepare levy hardship response

Levies

Review the hardship request and draft a payment plan offer in line with the committee policy.

Inline variant

Compact button-like trigger. Use in page toolbars, action bars, or inline within content. No description is shown; the title must be self-explanatory at this size.

Page toolbar — contextual inline actions

tsx

<AgentAction
  variant="inline"
  title="Draft levy reminder"
  prompt="[full prompt]"
  onTrigger={(prompt) => openAgentView(prompt)}
/>

States

Agent starting

Renew Building Insurance

Insurance

Gathering policy documents...

Disabled

Agent unavailable

Renew Building Insurance

Insurance

This action requires the policy document to be uploaded first.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/agent-action/registry.json

Usage

tsx

import { AgentAction } from "@/components/ui/agent-action"
import { ShieldCheck } from "lucide-react"

<AgentAction
  title="Renew Building Insurance"
  description="The agent will review the current policy expiry, compare market quotes, and prepare a renewal recommendation for committee approval."
  prompt="You are helping a strata manager renew the building insurance for Harbour View Towers..."
  category="Insurance"
  icon={ShieldCheck}
  onTrigger={(prompt) => openAgentView(prompt)}
/>

Card example

tsx

<AgentAction
  variant="card"
  title="Renew Building Insurance"
  description="The agent will review the current policy expiry, compare market quotes, and prepare a renewal recommendation for committee approval."
  prompt="[full agent prompt]"
  category="Insurance"
  icon={ShieldCheck}
  onTrigger={(prompt) => openAgentView(prompt)}
/>

Reference

AgentAction

Prop	Type	Default	Description
title	string	-	User-facing label. Short enough to fit on one line in row and inline variants.
description	string	-	Brief summary of what the agent will do. Shown to the user; not the full prompt.
prompt	string	-	Full prompt passed to the agent on trigger. Never rendered to the user.
category	string	-	Context label rendered as a small badge (e.g. Insurance, Compliance, AGM).
icon	LucideIcon	Sparkles	Leading icon for the card header, row chip, or banner.
variant	"card" \| "row" \| "inline" \| "banner"	"card"	Visual layout. card = bordered panel. row = compact list item. inline = button-like trigger. banner = wide low-height strip.
urgency	"default" \| "info" \| "warning" \| "danger"	"default"	Tints the surface to draw attention. Use danger for expired/overdue items, warning for approaching deadlines, info for guidance updates.
onTrigger	(prompt: string) => void	-	Called when the action is triggered; receives the full prompt string.
href	string	-	Navigate to this URL instead of calling onTrigger. Useful for server-side agent routing.
disabled	boolean	false	Disables the trigger.
loading	boolean	false	Shows a spinner and disables interaction. Use while the agent view is loading.

AgentActionList

Prop	Type	Default	Description
title	string	-	Optional section heading rendered above the list with a Sparkles icon.