Webhook trigger
A URL that starts the agent when something posts to it: copy it, send a test, then see each delivery and replay one.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/webhook-trigger-setup.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/webhook-trigger-setup.json
Usage & API
Example
import { WebhookSetup } from "@/components/ai/webhook-trigger-setup"
<WebhookSetup
name="…"
url="…"
secret="…"
onRegenerateSecret={() => {}}
test={test}
onSendTest={() => {}}
onCancelTest={() => {}}
mappings={[]}
/>Props WebhookSetup
| Prop | Type & description | Required |
|---|---|---|
name | string | Required |
url | string | Required |
secret | string | Required |
onRegenerateSecret | () => void | Required |
test | WebhookTest | Required |
onSendTest | () => void | Required |
onCancelTest | () => void | Required |
mappings | InputMapping[] | Required |
onOpenRun | (run: string) => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Setup shows the endpoint URL with a copy button, and the method POST. The signing secret is masked, with show, copy, and regenerate. Regenerate opens a confirm step before onRegenerateSecret. Send a test calls onSendTest. While listening, the card counts seconds and can be cancelled. When a request has been received it shows the status, the timing, the size, the body pairs and a link to the run if you pass onOpenRun. What the agent gets lists each mapping: the incoming field, the agent input or Not used, and the sample value. The preview uses a deploy-finished event.
Example
import { WebhookDeliveries } from "@/components/ai/webhook-trigger-deliveries"
<WebhookDeliveries
deliveries={[]}
selectedId={null}
onSelect={() => {}}
onReplay={() => {}}
onRetryNow={() => {}}
/>Props WebhookDeliveries
| Prop | Type & description | Required |
|---|---|---|
deliveries | Delivery[] | Required |
selectedId | string | null | Required |
onSelect | (id: string) => void | Required |
onReplay | (delivery: Delivery) => void | Required |
onRetryNow | (delivery: Delivery) => void | Required |
onOpenRun | (run: string) => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Deliveries is a list and a detail pane. Filters are All, Started a run, Ignored and Failed. Search uses the placeholder for an event, a run or a delivery id. A row shows the event, the time, the status and the outcome, and a replay names the delivery it came from. The detail has Received, the delivery id, the run, headers, body and status. Replay asks Replay this delivery? before it calls onReplay. Retry now is there for a delivery with a scheduled attempt. Back to deliveries returns from the detail on a narrow screen. The empty search says nothing matches. The footer says deliveries are kept for 30 days. The preview is the same release-notes agent.
Choosing a layout
Use setup when someone is connecting another system and needs the URL, the secret and proof that a test post landed. Use deliveries when the endpoint is already live and the question is why a particular post did not start a run, or how to send that same body again. The two are the same webhook at different moments.
The index of every trigger, including this one, is the trigger list, whose activity log is a thinner history across kinds. An app event with conditions, such as a pull request opening, is the event trigger, and the picker there even points people at webhooks for anything that is not one of those events. This screen is only the URL and its posts.
Does regenerating the secret invalidate the old one inside this component?
Regenerate calls onRegenerateSecret after the confirm step, and the field shows whatever secret string you pass next. The component does not remember the previous value or notify senders. Copy reads the current string to the clipboard.
What is the difference between replay and retry now?
Replay confirms, then calls onReplay with the delivery, and a new row can point back at the original with replayOf. Retry now calls onRetryNow, meant for a delivery that already has a later attempt scheduled. Ignoring a delivery is an outcome you set, not a button.