From 8f0407f18a12720abcc7271ab3422104c32e972c Mon Sep 17 00:00:00 2001 From: Deepak Silaych Date: Tue, 16 Dec 2025 14:35:59 +0530 Subject: [PATCH] feat(blocks): add Webhook tool for sending HTTP requests Fixes #2379 - Add WebhookNotificationBlock with category 'tools' - Supports POST/PUT/PATCH methods with custom headers and body - Uses existing http_request tool under the hood - Available in Agent tools and HITL notifications --- .../sim/blocks/blocks/webhook_notification.ts | 96 +++++++++++++++++++ apps/sim/blocks/registry.ts | 2 + 2 files changed, 98 insertions(+) create mode 100644 apps/sim/blocks/blocks/webhook_notification.ts diff --git a/apps/sim/blocks/blocks/webhook_notification.ts b/apps/sim/blocks/blocks/webhook_notification.ts new file mode 100644 index 0000000000..9cb856c2c5 --- /dev/null +++ b/apps/sim/blocks/blocks/webhook_notification.ts @@ -0,0 +1,96 @@ +import { createElement, type SVGProps } from 'react' +import { Webhook } from 'lucide-react' +import type { BlockConfig } from '@/blocks/types' +import type { RequestResponse } from '@/tools/http/types' + +const WebhookIcon = (props: SVGProps) => createElement(Webhook, props) + +/** + * Webhook block for sending HTTP requests to external endpoints. + * Can be used standalone, as an agent tool, or for notifications. + */ +export const WebhookNotificationBlock: BlockConfig = { + type: 'webhook_notification', + name: 'Webhook', + description: 'Send HTTP requests to webhook endpoints', + longDescription: + 'Send HTTP POST/PUT/PATCH requests to external webhook URLs. Integrate with services like Slack, Discord, Jira, ServiceNow, or any custom endpoint that accepts webhooks.', + category: 'tools', + bgColor: '#10B981', + icon: WebhookIcon, + subBlocks: [ + { + id: 'url', + title: 'URL', + type: 'short-input', + placeholder: 'https://hooks.example.com/webhook', + required: true, + }, + { + id: 'method', + title: 'Method', + type: 'dropdown', + options: [ + { label: 'POST', id: 'POST' }, + { label: 'PUT', id: 'PUT' }, + { label: 'PATCH', id: 'PATCH' }, + ], + value: () => 'POST', + }, + { + id: 'headers', + title: 'Headers', + type: 'table', + columns: ['Key', 'Value'], + description: 'Custom headers (e.g., Authorization, Content-Type)', + }, + { + id: 'body', + title: 'Body', + type: 'code', + placeholder: `{ + "event": "workflow_completed", + "data": "", + "timestamp": "" +}`, + wandConfig: { + enabled: true, + maintainHistory: true, + prompt: `You are an expert JSON programmer. +Generate ONLY the raw JSON object based on the user's request. +The output MUST be a single, valid JSON object, starting with { and ending with }. + +Current body: {context} + +Do not include any explanations, markdown formatting, or other text outside the JSON object. + +You have access to workflow variables using angle bracket syntax, e.g., . + +Example: +{ + "event": "data_processed", + "payload": "", + "metadata": { + "workflowId": "" + } +}`, + placeholder: 'Describe the webhook payload...', + generationType: 'json-object', + }, + }, + ], + tools: { + access: ['http_request'], + }, + inputs: { + url: { type: 'string', description: 'Webhook URL to send the request to' }, + method: { type: 'string', description: 'HTTP method (POST, PUT, PATCH)' }, + headers: { type: 'json', description: 'Request headers as key-value pairs' }, + body: { type: 'json', description: 'Request body (JSON)' }, + }, + outputs: { + data: { type: 'json', description: 'Response data from the webhook endpoint' }, + status: { type: 'number', description: 'HTTP status code' }, + headers: { type: 'json', description: 'Response headers' }, + }, +} diff --git a/apps/sim/blocks/registry.ts b/apps/sim/blocks/registry.ts index ca1f30e845..4cd9dc37ce 100644 --- a/apps/sim/blocks/registry.ts +++ b/apps/sim/blocks/registry.ts @@ -125,6 +125,7 @@ import { WaitBlock } from '@/blocks/blocks/wait' import { WealthboxBlock } from '@/blocks/blocks/wealthbox' import { WebflowBlock } from '@/blocks/blocks/webflow' import { WebhookBlock } from '@/blocks/blocks/webhook' +import { WebhookNotificationBlock } from '@/blocks/blocks/webhook_notification' import { WhatsAppBlock } from '@/blocks/blocks/whatsapp' import { WikipediaBlock } from '@/blocks/blocks/wikipedia' import { WordPressBlock } from '@/blocks/blocks/wordpress' @@ -268,6 +269,7 @@ export const registry: Record = { wealthbox: WealthboxBlock, webflow: WebflowBlock, webhook: WebhookBlock, + webhook_notification: WebhookNotificationBlock, whatsapp: WhatsAppBlock, wikipedia: WikipediaBlock, wordpress: WordPressBlock,