Fix Examples

Author: maticzav

typescript/agent/package.json

@@ -20,7 +20,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "ai": "^5.0.13",
-    "browser-use-sdk": "0.1.1",
+    "browser-use-sdk": "0.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

typescript/agent/pnpm-lock.yaml

@@ -26,7 +26,7 @@ type TaskStatus =
   | {
       status: "running";
 
-      lastStep: BrowserUse.Tasks.TaskView.Step;
+      lastStep: BrowserUse.Tasks.TaskStepView;
       liveUrl: string | null;
     }
   | {
@@ -46,20 +46,20 @@ const tools = {
     }),
     async *execute({ task }, { abortSignal }) {
       // Create Task
-      const rsp = await bu.tasks.create({ task: task });
 
-      console.log(`[agent] Task created: ${rsp.id}`);
+      const res = await bu.tasks.create({ task }, { signal: abortSignal });
 
-      poll: do {
-        // Wait for Task to Finish
-        const status = (await bu.tasks.retrieve(
-          rsp.id,
-          { statusOnly: false },
-          { signal: abortSignal },
-        )) as BrowserUse.Tasks.TaskView;
+      const gen = bu.tasks.stream(res.id, { signal: abortSignal });
+
+      for await (const event of gen) {
+        const status = event.data;
 
         console.log(`[agent] task status: ${status.status}`);
 
+        if (status.doneOutput) {
+          console.log(`[agent] task output: ${status.doneOutput}`);
+        }
+
         switch (status.status) {
           case "started":
           case "paused":
@@ -81,12 +81,10 @@ const tools = {
               liveUrl: status.sessionLiveUrl ? status.sessionLiveUrl : null,
             } satisfies TaskStatus;
 
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-
             break;
 
           case "finished":
-            if (status.sessionLiveUrl == null) {
+            if (status.sessionLiveUrl == null || status.doneOutput == null) {
               break;
             }
 
@@ -97,12 +95,12 @@ const tools = {
               sessionId: status.sessionId,
             } satisfies TaskStatus;
 
-            break poll;
+            break;
 
           default:
             throw new Error(`Unknown status: ${status.status}`);
         }
-      } while (true);
+      }
     },
   }),
 } satisfies ToolSet;

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

@@ -1,4 +1,34 @@
 # Browser Use Discord
 
+> An example Discord Bot using Browser Use Cloud API to execute browser tasks.
+
+<p align="center">
+  <img src="media/embed.png" alt="Bot Embed Screenshot" width="600" fi />
+</p>
+
+<p align="center">
+  <img src="media/message.png" alt="Bot Completion Message Screenshot" height="400" />
+</p>
+
+## Development Setup
+
+```bash
+# Install dependencies
+pnpm i
+
+# Start Dev
+pnpm dev
+```
+
+### Getting Environment Variables
+
+> Set up environment variables to successfully run this example locally.
+
+- Browser Use Cloud API - [Get API Key](https://cloud.browser-use.com/billing)
+
+Copy `.env.example` into `.env` and run the project!
+
+### Useful Links
+
 - https://discord.com/developers/docs/quick-start/getting-started#step-0-project-setup
 - https://discord.js.org/

typescript/discord/README.md

@@ -13,7 +13,7 @@
   "license": "ISC",
   "packageManager": "[email protected]",
   "dependencies": {
-    "browser-use-sdk": "0.1.1",
+    "browser-use-sdk": "0.3.0",
     "discord.js": "14.21.0",
     "express": "5.1.0"
   },

typescript/discord/package.json

@@ -22,31 +22,19 @@ export const run: Command = {
       return;
     }
 
-    const tick: { current: number } = { current: 0 };
+    await interaction.reply("Browser Use on the job!");
 
-    const task = await browseruse.tasks.create({
+    const res = await browseruse.tasks.create({
       task: command,
       agentSettings: {
         llm: "o3",
       },
     });
 
-    const embed = new EmbedBuilder()
-      .setTitle("🤖 Browser Use Task")
-      .setDescription(`**Command:** ${command}\n**Task ID:** ${task.id}`)
-      .setColor(0x0099ff)
-      .addFields(
-        { name: "Status", value: "🔄 Starting...", inline: true },
-        { name: "Live Session", value: "⏳ Waiting...", inline: true },
-      )
-      .setTimestamp();
+    const gen = browseruse.tasks.stream(res.id);
 
-    await interaction.reply({ embeds: [embed] });
-
-    poll: do {
-      tick.current++;
-
-      const status = (await browseruse.tasks.retrieve(task.id)) as BrowserUse.TaskView;
+    for await (const event of gen) {
+      const status = event.data;
 
       switch (status.status) {
         case "started":
@@ -57,7 +45,7 @@ export const run: Command = {
           const description: string[] = [];
 
           description.push(`**Command:** ${command}`);
-          description.push(`**Task ID:** ${task.id}`);
+          description.push(`**Task ID:** ${status.id}`);
 
           description.push("");
 
@@ -92,32 +80,24 @@ export const run: Command = {
         case "finished": {
           const output: string[] = [];
 
-          output.push(`# Browser Use Task - ${task.id} ✅`);
+          output.push(`# Browser Use Task - ${status.id} ✅`);
           output.push(`## Task`);
           output.push(command);
 
           output.push("");
 
           output.push(`## Output`);
-          output.push(status.doneOutput);
+          output.push(status.doneOutput ?? "No output");
 
           await interaction.editReply({ content: output.join("\n"), embeds: [] });
 
-          break poll;
+          break;
         }
         default:
           throw new ExhaustiveSwitchCheck(status.status);
       }
 
-      // LOGS
-
-      console.log(`[${status.id}] (${tick.current}) ${status.status}`);
-
-      // TIMER
-
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    } while (true);
-
-    console.log("done");
+      console.log(`[${status.id}] ${status.status}`);
+    }
   },
 };