Event trigger
Starts an agent when something happens in another app, like a pull request opening, narrowed with conditions.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/event-trigger-builder.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/event-trigger-builder.json
Usage & API
Example
import { EventTriggerBuilder } from "@/components/ai/event-trigger-builder"
<EventTriggerBuilder
config={config}
onChange={() => {}}
app={app}
events={() => {}}
repos={[]}
agents={[]}
fields={[]}
samples={[]}
/>Props EventTriggerBuilder
| Prop | Type & description | Required |
|---|---|---|
config | EventTriggerConfig | Required |
onChange | (config: EventTriggerConfig) => void | Required |
app | { name: string; mono: string; tone: string; account: string } | Required |
events | (Choice & { phrase: string })[] | Required |
repos | Choice[] | Required |
agents | Choice[] | Required |
fields | string[]Payload fields that can be dropped into the input. | Required |
samples | SampleEvent[] | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The builder is three rows labeled When, Where and Then. When shows the app and its account, an event menu and a repository menu. Where lists the conditions. The field menu offers Base branch, Label, Changed files, Author and Title. Operators depend on the field: is and is not, include and do not include for paths, contains and does not contain for the title. The value placeholder changes with the field, and an empty value is outlined. Add condition appends a row. Then is Run, an agent menu, and with, then the input. Buttons under the text insert the payload fields you pass. A match preview lists the sample events that pass, and if none do it says to loosen a condition or switch to or. The join control is the and or or chip on every condition after the first.
Example
import { EventPicker } from "@/components/ai/event-trigger-picker"
<EventPicker
apps={[]}
onPick={() => {}}
/>Props EventPicker
| Prop | Type & description | Required |
|---|---|---|
apps | EventApp[] | Required |
onPick | (app: EventApp, event: AppEvent) => voidCalled with the chosen app and event. | Required |
onClose | () => void | Optional |
initialApp | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The picker is a two-step dialog. Apps are a list with a monogram, the name and the connected account when there is one. Search events filters, and clear wipes it. The placeholder mentions an example such as payment failed. Events marked popular show an Often used chip when the query is empty. Opening an event lists its payload fields with the name, the type and an example, and Back to events returns to the list. Enter confirms. A line at the foot says webhooks can start a run from anything else. onPick receives the app and the event. onClose dismisses without one. The preview titles the dialog as the triggers of a support triage agent.
Choosing a layout
Use the picker when the person is still choosing which event in which app should start a run, and the payload shape matters before they write conditions. Use the builder when the event is chosen and the work is narrowing it, a branch, a label, a path, and writing the input the agent will see. The picker can close without a choice. The builder assumes the app, the event list, the repos and the agents are already known.
A URL that accepts any post is the webhook trigger. The picker says webhooks can start a run from anything else, which is the escape hatch when the event is not in the list. The index of triggers already turned on is the trigger list. A clock, with the next runs printed in words, is the schedule card. This pair is only the app event.
Does a condition with an empty value exclude every event?
No. A blank value is treated as matching, so it does not narrow the sample list. The field is still marked so it is obvious the row is unfinished. Only a condition with text is applied, and the join is and or or across those.
Can the builder watch an app that is not in the picker?
The builder renders the app, the events, the repos and the agents you pass. It has no catalog of its own beyond the five condition fields. The picker is how a person chooses an event from the apps you pass there. Wiring a new app is outside both components.