Schedule card
The agent proposes when a task should run, in plain words, with the next few runs shown before you confirm.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/schedule-card-proposal.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/schedule-card-proposal.json
Usage & API
Example
import { Select } from "@/components/ai/schedule-card-proposal"
<Select
value={value}
options={[]}
onChange={() => {}}
label="…"
/>Props Select
| Prop | Type & description | Required |
|---|---|---|
value | T | Required |
options | Option<T>[] | Required |
onChange | (value: T) => void | Required |
label | string | Required |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The proposal is a section labeled Proposed schedule. The headline is the sentence for the current fields, with the timezone and a note that it is not turned on. Repeats, On or On day, At and Timezone are menus or a day picker. Weekly and biweekly show weekday buttons. Monthly offers the 1st through the 28th. Daily and weekdays explain themselves as all seven days or Monday to Friday. Next runs lists three dates with a relative offset. Each run lists the steps you passed, numbered. Tool chips show a monogram and a scope. Not now and Confirm schedule are the actions. After confirm the line reads Scheduled and the next run. After dismiss it reads Not scheduled and says it can be set later from the agent's triggers. Edit returns to the fields.
Example
import { Select } from "@/components/ai/schedule-card-editor"
<Select
value={value}
options={[]}
onChange={() => {}}
label="…"
/>Props Select
| Prop | Type & description | Required |
|---|---|---|
value | T | Required |
options | Option<T>[] | Required |
onChange | (value: T) => void | Required |
label | string | Required |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The editor adds a text field whose placeholder is a phrase like every weekday at 9am, and a row of example phrases. A phrase that parses replaces the controls and can show a note. One that does not parse explains why and leaves the controls as they were. The same repeats, day, time and timezone controls sit underneath. Next 5 runs lists the upcoming dates. A switch skips holidays for the region you name, and the holiday dates you pass are what get skipped. Pause until offers the options you pass, or no pause. The preview uses this editor for a payout reconciliation schedule.
Choosing a layout
Use the proposal when the agent has just suggested a cadence inside the chat and the person should see the next few fire times before agreeing. Use the editor on the agent's own settings, where someone may also skip holidays, pause until a date, or type the cadence instead of using the menus.
The list of every trigger, including webhooks and app events, is the trigger list. A webhook URL is the webhook trigger. The schedule card is only the clock, and only one schedule at a time. It does not show a history of past firings.
Does Confirm schedule start the agent immediately?
No. Confirm sets the status to scheduled and shows the next run. The card says the schedule is not turned on until then. Firing the agent is up to whatever you do in onConfirm. Not now only collapses the card to Not scheduled.
What phrases can the editor's text box read?
It accepts a small grammar: daily, weekdays, weekly, every other week, a day of the month, and a time. The examples under the field are every weekday at 9am, every other friday at 4pm, on the 1st of every month at 8:30, and every mon and thu at noon. Anything else returns a message and does not change the schedule.