frontend support cdp for task and workflow (#3231)

skyvern-frontend/src/api/types.ts

@@ -147,6 +147,7 @@ export type CreateTaskRequest = {
   application?: string | null;
   include_action_history_in_verification?: boolean | null;
   max_screenshot_scrolls?: number | null;
+  browser_address?: string | null;
 };
 
 export type User = {

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -90,6 +90,7 @@ function createTaskRequestObject(
     extracted_information_schema: extractedInformationSchema,
     extra_http_headers: extraHttpHeaders,
     totp_identifier: transform(formValues.totpIdentifier),
+    browser_address: transform(formValues.cdpAddress),
     error_code_mapping: errorCodeMapping,
     max_screenshot_scrolls: formValues.maxScreenshotScrolls,
     include_action_history_in_verification:
@@ -127,6 +128,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
       maxStepsOverride: initialValues.maxStepsOverride ?? null,
       proxyLocation: initialValues.proxyLocation ?? ProxyLocation.Residential,
       maxScreenshotScrolls: initialValues.maxScreenshotScrolls ?? null,
+      cdpAddress: initialValues.cdpAddress ?? null,
     },
   });
   const { errors } = useFormState({ control: form.control });
@@ -695,6 +697,35 @@ function CreateNewTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="cdpAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Browser Address</h1>
+                            <h2 className="text-base text-slate-400">
+                              The address of the Browser server to use for the
+                              task run.
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder="http://127.0.0.1:9222"
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
               </div>
             </div>
           )}

skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx

@@ -64,6 +64,7 @@ function CreateNewTaskFormPage() {
             includeActionHistoryInVerification: null,
             maxScreenshotScrolls: null,
             extraHttpHeaders: null,
+            cdpAddress: null,
           }}
         />
       </div>
@@ -137,6 +138,7 @@ function CreateNewTaskFormPage() {
           extraHttpHeaders: data.extra_http_headers
             ? JSON.stringify(data.extra_http_headers)
             : null,
+          cdpAddress: null,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -155,6 +155,7 @@ function PromptBox() {
     ProxyLocation.Residential,
   );
   const [browserSessionId, setBrowserSessionId] = useState<string | null>(null);
+  const [cdpAddress, setCdpAddress] = useState<string | null>(null);
   const [publishWorkflow, setPublishWorkflow] = useState(false);
   const [totpIdentifier, setTotpIdentifier] = useState("");
   const [maxStepsOverride, setMaxStepsOverride] = useState<string | null>(null);
@@ -175,6 +176,7 @@ function PromptBox() {
           webhook_callback_url: webhookCallbackUrl,
           proxy_location: proxyLocation,
           browser_session_id: browserSessionId,
+          browser_address: cdpAddress,
           totp_identifier: totpIdentifier,
           publish_workflow: publishWorkflow,
           max_screenshot_scrolls: maxScreenshotScrolls,
@@ -412,6 +414,22 @@ function PromptBox() {
                       }}
                     />
                   </div>
+                  <div className="flex gap-16">
+                    <div className="w-48 shrink-0">
+                      <div className="text-sm">Browser Address</div>
+                      <div className="text-xs text-slate-400">
+                        The address of the Browser server to use for the task
+                        run.
+                      </div>
+                    </div>
+                    <Input
+                      value={cdpAddress ?? ""}
+                      placeholder="http://127.0.0.1:9222"
+                      onChange={(event) => {
+                        setCdpAddress(event.target.value);
+                      }}
+                    />
+                  </div>
                   <div className="flex gap-16">
                     <div className="w-48 shrink-0">
                       <div className="text-sm">2FA Identifier</div>

skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx

@@ -48,6 +48,7 @@ function RetryTask() {
           extraHttpHeaders: task.request.extra_http_headers
             ? JSON.stringify(task.request.extra_http_headers)
             : null,
+          cdpAddress: task.request.browser_address ?? null,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts

@@ -13,6 +13,7 @@ const createNewTaskFormSchemaBase = z.object({
   extraHttpHeaders: z.string().or(z.null()),
   maxStepsOverride: z.number().or(z.null()).optional(),
   totpIdentifier: z.string().or(z.null()),
+  cdpAddress: z.string().or(z.null()),
   errorCodeMapping: z.string().or(z.null()),
   proxyLocation: z.nativeEnum(ProxyLocation).or(z.null()),
   includeActionHistoryInVerification: z.boolean().or(z.null()).default(false),

skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx

@@ -38,6 +38,7 @@ type Props = {
   initialSettings: {
     proxyLocation: ProxyLocation;
     webhookCallbackUrl: string;
+    cdpAddress: string | null;
     maxScreenshotScrolls: number | null;
     extraHttpHeaders: Record<string, string> | null;
   };
@@ -81,6 +82,7 @@ type RunWorkflowRequestBody = {
   browser_session_id: string | null;
   max_screenshot_scrolls?: number | null;
   extra_http_headers?: Record<string, string> | null;
+  browser_address?: string | null;
 };
 
 function getRunWorkflowRequestBody(
@@ -91,6 +93,7 @@ function getRunWorkflowRequestBody(
     webhookCallbackUrl,
     proxyLocation,
     browserSessionId,
+    cdpAddress,
     maxScreenshotScrolls,
     extraHttpHeaders,
     ...parameters
@@ -107,6 +110,7 @@ function getRunWorkflowRequestBody(
     data: parsedParameters,
     proxy_location: proxyLocation,
     browser_session_id: bsi,
+    browser_address: cdpAddress,
   };
 
   if (maxScreenshotScrolls) {
@@ -133,6 +137,7 @@ type RunWorkflowFormType = Record<string, unknown> & {
   webhookCallbackUrl: string;
   proxyLocation: ProxyLocation;
   browserSessionId: string | null;
+  cdpAddress: string | null;
   maxScreenshotScrolls: number | null;
   extraHttpHeaders: string | null;
 };
@@ -156,6 +161,7 @@ function RunWorkflowForm({
       webhookCallbackUrl: initialSettings.webhookCallbackUrl,
       proxyLocation: initialSettings.proxyLocation,
       browserSessionId: browserSessionIdDefault,
+      cdpAddress: initialSettings.cdpAddress,
       maxScreenshotScrolls: initialSettings.maxScreenshotScrolls,
       extraHttpHeaders: initialSettings.extraHttpHeaders
         ? JSON.stringify(initialSettings.extraHttpHeaders)
@@ -208,6 +214,7 @@ function RunWorkflowForm({
       browserSessionId,
       maxScreenshotScrolls,
       extraHttpHeaders,
+      cdpAddress,
       ...parameters
     } = values;
 
@@ -222,6 +229,7 @@ function RunWorkflowForm({
       browserSessionId,
       maxScreenshotScrolls,
       extraHttpHeaders,
+      cdpAddress,
     });
   }
 
@@ -425,6 +433,42 @@ function RunWorkflowForm({
               );
             }}
           />
+          <FormField
+            key="cdpAddress"
+            control={form.control}
+            name="cdpAddress"
+            render={({ field }) => {
+              return (
+                <FormItem>
+                  <div className="flex gap-16">
+                    <FormLabel>
+                      <div className="w-72">
+                        <div className="flex items-center gap-2 text-lg">
+                          Browser Address
+                        </div>
+                        <h2 className="text-sm text-slate-400">
+                          The address of the Browser server to use for the
+                          workflow run.
+                        </h2>
+                      </div>
+                    </FormLabel>
+                    <div className="w-full space-y-2">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="http://127.0.0.1:9222"
+                          value={
+                            field.value === null ? "" : (field.value as string)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </div>
+                  </div>
+                </FormItem>
+              );
+            }}
+          />
           <FormField
             key="extraHttpHeaders"
             control={form.control}

skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx

@@ -84,6 +84,7 @@ function WorkflowRunParameters() {
             maxScreenshotScrolls ?? workflow.max_screenshot_scrolls ?? null,
           extraHttpHeaders:
             extraHttpHeaders ?? workflow.extra_http_headers ?? null,
+          cdpAddress: null,
         }}
       />
     </div>