Some tweaks and added a Replicate example

Author: matt-aitken

apps/webapp/app/assets/icons/HttpCallbackIcon.tsx

@@ -1,5 +1,22 @@
-import { PhoneArrowDownLeftIcon } from "@heroicons/react/20/solid";
-
 export function HttpCallbackIcon({ className }: { className?: string }) {
-  return <PhoneArrowDownLeftIcon className={className} />;
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M21 12a9 9 0 1 0 -9 9" />
+      <path d="M3.6 9h16.8" />
+      <path d="M3.6 15h8.4" />
+      <path d="M11.578 3a17 17 0 0 0 0 18" />
+      <path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9" />
+      <path d="M18 21v-7m3 3l-3 -3l-3 3" />
+    </svg>
+  );
 }

apps/webapp/app/components/runs/v3/WaitpointDetails.tsx

@@ -17,6 +17,9 @@ import { WaitpointStatusCombo } from "./WaitpointStatus";
 import { RunTag } from "./RunTag";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { WaitpointResolver } from "@trigger.dev/database";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
 
 export function WaitpointDetailTable({
   waitpoint,
@@ -62,6 +65,12 @@ export function WaitpointDetailTable({
           )}
         </Property.Value>
       </Property.Item>
+      <Property.Item>
+        <Property.Label>Type</Property.Label>
+        <Property.Value>
+          <WaitpointResolverCombo resolver={waitpoint.resolver} />
+        </Property.Value>
+      </Property.Item>
       {waitpoint.callbackUrl && (
         <Property.Item>
           <Property.Label>Callback URL</Property.Label>
@@ -148,3 +157,22 @@ export function WaitpointDetailTable({
     </Property.Table>
   );
 }
+
+export function WaitpointResolverCombo({ resolver }: { resolver: WaitpointResolver }) {
+  switch (resolver) {
+    case "TOKEN":
+      return (
+        <div className="flex items-center gap-1">
+          <WaitpointTokenIcon className="size-4" />
+          <span>Token</span>
+        </div>
+      );
+    case "HTTP_CALLBACK":
+      return (
+        <div className="flex items-center gap-1">
+          <HttpCallbackIcon className="size-4" />
+          <span>HTTP Callback</span>
+        </div>
+      );
+  }
+}

pnpm-lock.yaml

@@ -7,6 +7,8 @@
   },
   "dependencies": {
     "@trigger.dev/sdk": "workspace:*",
+    "openai": "^4.97.0",
+    "replicate": "^1.0.1",
     "zod": "3.23.8"
   },
   "scripts": {

references/hello-world/package.json

@@ -1,5 +1,5 @@
-import { logger, wait, task, retry, idempotencyKeys, auth } from "@trigger.dev/sdk/v3";
-import { z } from "zod";
+import { auth, idempotencyKeys, logger, retry, task, wait } from "@trigger.dev/sdk/v3";
+import Replicate, { Prediction } from "replicate";
 type Token = {
   status: "approved" | "pending" | "rejected";
 };
@@ -143,7 +143,43 @@ export const waitForDuration = task({
 
 export const waitHttpCallback = task({
   id: "wait-http-callback",
+  retry: {
+    maxAttempts: 1,
+  },
   run: async () => {
+    if (process.env.REPLICATE_API_KEY) {
+      const replicate = new Replicate({
+        auth: process.env.REPLICATE_API_KEY,
+      });
+
+      const prediction = await wait.forHttpCallback<Prediction>(
+        async (url) => {
+          //pass the provided URL to Replicate's webhook
+          await replicate.predictions.create({
+            version: "27b93a2413e7f36cd83da926f3656280b2931564ff050bf9575f1fdf9bcd7478",
+            input: {
+              prompt: "A painting of a cat by Any Warhol",
+            },
+            // pass the provided URL to Replicate's webhook, so they can "callback"
+            webhook: url,
+            webhook_events_filter: ["completed"],
+          });
+        },
+        {
+          timeout: "10m",
+        }
+      );
+
+      if (!prediction.ok) {
+        throw new Error("Failed to create prediction");
+      }
+
+      logger.log("Prediction", prediction);
+
+      const imageUrl = prediction.output.output;
+      logger.log("Image URL", imageUrl);
+    }
+
     const result = await wait.forHttpCallback<{ foo: string }>(
       async (url) => {
         logger.log(`Wait for HTTP callback ${url}`);