Simplify Agent Example

Author: maticzav

typescript/agent/src/app/api/chat/route.ts

@@ -19,6 +19,10 @@ const bu = new BrowserUse({
 });
 
 type TaskStatus =
+  | {
+      status: "starting";
+      liveUrl: string | null;
+    }
   | {
       status: "running";
 
@@ -40,73 +44,32 @@ const tools = {
     inputSchema: z.object({
       task: z.string(),
     }),
-    async *execute({ task }) {
+    async *execute({ task }, { abortSignal }) {
       // Create Task
       const rsp = await bu.tasks.create({ task: task });
 
-      poll: do {
-        // Wait for Task to Finish
-        const status = (await bu.tasks.retrieve(rsp.id, { statusOnly: false })) as BrowserUse.Tasks.TaskView;
-
-        switch (status.status) {
-          case "started":
-          case "paused":
-          case "stopped":
-            if (status.steps == null || status.steps.length === 0) {
-              break;
-            }
-
-            const lastStep = status.steps[status.steps.length - 1];
-
-            yield {
-              status: "running",
-              lastStep: lastStep,
-              liveUrl: status.sessionLiveUrl ? status.sessionLiveUrl : null,
-            } satisfies TaskStatus;
-
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-
-            break;
-
-          case "finished":
-            if (status.sessionLiveUrl == null) {
-              break;
-            }
-
-            yield {
-              status: "done",
-              output: status.doneOutput,
-              liveUrl: status.sessionLiveUrl,
-              sessionId: status.sessionId,
-            } satisfies TaskStatus;
-
-            break poll;
-
-          default:
-            throw new Error(`Unknown status: ${status.status}`);
-        }
-      } while (true);
-    },
-  }),
-  continueTask: tool({
-    description: "Continue a task in a web browser.",
-    inputSchema: z.object({
-      sessionId: z.string(),
-      task: z.string(),
-    }),
-    async *execute({ sessionId, task }) {
-      // Create Task
-      const rsp = await bu.tasks.create({ task: task, browserSettings: { sessionId: sessionId } });
+      console.log(`[agent] Task created: ${rsp.id}`);
 
       poll: do {
         // Wait for Task to Finish
-        const status = (await bu.tasks.retrieve(rsp.id, { statusOnly: false })) as BrowserUse.Tasks.TaskView;
+        const status = (await bu.tasks.retrieve(
+          rsp.id,
+          { statusOnly: false },
+          { signal: abortSignal },
+        )) as BrowserUse.Tasks.TaskView;
+
+        console.log(`[agent] task status: ${status.status}`);
 
         switch (status.status) {
           case "started":
           case "paused":
           case "stopped":
             if (status.steps == null || status.steps.length === 0) {
+              yield {
+                status: "starting",
+                liveUrl: status.sessionLiveUrl ? status.sessionLiveUrl : null,
+              } satisfies TaskStatus;
+
               break;
             }
 

typescript/agent/src/app/page.tsx

@@ -72,14 +72,22 @@ export default function Home() {
   const liveUrl = useMemo(() => {
     let url: string | undefined = undefined;
 
-    for (const message of messages) {
-      for (const part of message.parts) {
-        if (part.type === "tool-runTask" && part.output != null) {
-          const output = part.output;
-
-          if (output.liveUrl != null) {
-            url = output.liveUrl;
-          }
+    if (messages.length === 0) {
+      return undefined;
+    }
+
+    const lastMessage = messages[messages.length - 1];
+
+    if (lastMessage.role === "user") {
+      return undefined;
+    }
+
+    for (const part of lastMessage.parts) {
+      if (part.type === "tool-runTask" && part.output != null) {
+        const output = part.output;
+
+        if (output.liveUrl != null) {
+          url = output.liveUrl;
         }
       }
     }
@@ -116,16 +124,17 @@ export default function Home() {
                     switch (part.type) {
                       case "text":
                         return <Response key={`${message.id}-${i}`}>{part.text}</Response>;
+
                       case "reasoning":
                         return (
                           <Reasoning key={`${message.id}-${i}`} className="w-full" isStreaming={status === "streaming"}>
                             <ReasoningTrigger />
                             <ReasoningContent>{part.text}</ReasoningContent>
                           </Reasoning>
                         );
-                      case "tool-continueTask":
+
                       case "tool-runTask": {
-                        if (part.output == null) {
+                        if (part.output == null || part.output.status === "starting") {
                           return (
                             <Reasoning
                               key={`${message.id}-${i}`}