AgentKit

Develop AI Agents that can browse the web autonomously using GBOX and AgentKit (by inngest).

Overview

AgentKit is a framework for building AI agents with tools, memory, and autonomous behavior. It provides a structured way to define what an agent can do and how it makes decisions, enabling developers to build flexible, task-oriented agents.

By integrating with GBOX, AgentKit agents gain the ability to control managed headless browsers, enabling them to autonomously search the web, extract data, and interact with websites. This makes them well-suited for real-time information retrieval and robust web automation.

Getting Started

1. Install Dependencies

   Install the necessary dependencies for your project.

   npm

   npm install gbox-sdk @inngest/agent-kit playwright-core dotenv typescript tsx @types/node
   

   pnpm install gbox-sdk @inngest/agent-kit playwright-core dotenv typescript tsx @types/node
   

   yarn add gbox-sdk @inngest/agent-kit playwright-core dotenv typescript tsx @types/node
   
2. Add Environment Variables

   Create a .env file in your project root and add your GBOX API key:

   GBOX_API_KEY=your_gbox_api_key
   ANTHROPIC_API_KEY=your_anthropic_api_key
   
3. Setup an AgentKit Network with an Agent

   Create a new file agent.ts and set up your AgentKit network with an agent that can use GBOX:

   import {
       anthropic,
       createAgent,
       createNetwork,
       createTool,
   } from "@inngest/agent-kit";
   
   // Create the search agent
   const searchAgent = createAgent({
       name: "reddit_searcher",
       description:
           "An intelligent agent that searches Reddit for relevant information and provides summarized insights",
       system: `You are a helpful Reddit search assistant. When searching for information:
       1. Use the search_reddit tool to find relevant posts
       2. Summarize the key findings from multiple posts
       3. Highlight different perspectives or opinions found
       4. Provide context about the discussions
       5. If no results are found, suggest alternative search terms`,
       tools: [searchReddit],
   });
   
   // Create the network with proper API key configuration
   const redditSearchNetwork = createNetwork({
       name: "reddit_search_network",
       description:
           "A network that intelligently searches Reddit and provides insights",
       agents: [searchAgent],
       maxIter: 5, // Allow more iterations for better results
       defaultModel: anthropic({
           model: "claude-3-5-sonnet-latest",
           apiKey: requiredEnvVars.ANTHROPIC_API_KEY,
           defaultParameters: {
               max_tokens: 4096,
           },
       }),
   });
   
4. Define the Search Tool

   Define the searchReddit tool that uses GBOX to search Reddit:

   import GboxSDK from "gbox-sdk";
   import { chromium } from "playwright-core";
   import dotenv from "dotenv";
   import { z } from "zod";
   
   // Load environment variables
   dotenv.config();
   
   // Validate required environment variables
   const requiredEnvVars = {
       GBOX_API_KEY: process.env.GBOX_API_KEY,
       ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
   };
   
   // Create a tool to search Reddit using GBOX SDK
   if (!requiredEnvVars.GBOX_API_KEY || !requiredEnvVars.ANTHROPIC_API_KEY) {
       throw new Error(
           "Missing required environment variables: GBOX_API_KEY and ANTHROPIC_API_KEY"
       );
   }
   
   const searchReddit = createTool({
       name: "search_reddit",
       description: "Search Reddit posts and comments using PullPush API",
       parameters: z.object({
           query: z.string().describe("The search query for Reddit"),
       }),
       handler: async ({ query }) => {
           console.log(`🔍 Searching Reddit for: "${query}"`);
   
           const gboxSDK = new GboxSDK({
               apiKey: requiredEnvVars.GBOX_API_KEY,
           });
           const box = await gboxSDK.create({ type: "linux" });
           const cdpUrl = await box.browser.cdpUrl();
   
           try {
               const browser = await chromium.connectOverCDP(cdpUrl);
               const browserContext = await browser.newContext();
               const page = await browserContext.newPage();
   
               // Construct the search URL
               const searchUrl = `https://search-new.pullpush.io/?type=submission&q=${query}`;
               await page.goto(searchUrl);
   
               // Wait for results to load
               await page.waitForSelector("div.results", { timeout: 10000 });
   
               // Extract search results
               const results = await page.evaluate(() => {
                   const posts = document.querySelectorAll(
                       "div.results div:has(h1)"
                   );
                   return Array.from(posts).map((post) => ({
                       title: post.querySelector("h1")?.textContent?.trim(),
                       content: post.querySelector("div")?.textContent?.trim(),
                   }));
               });
   
               // Close the browser
               await browser.close();
               console.log("Browser closed");
   
               // Terminate the box
               await box.terminate();
               console.log("Box terminated");
   
               return results.slice(0, 5); // Return top 5 results
           } catch (error) {
               console.error("Error connecting to browser:", error);
               throw new Error("Failed to connect to browser for Reddit search");
           }
       },
   });
   
5. Put It All Together

   Now, combine everything in your agent.ts file to create a complete AgentKit network that can search Reddit:

   // Helper function to extract the final agent response from AgentKit's response format
   function extractFinalResponse(response) {
       try {
           // Check if response has the new state structure
           if (response && response.state && response.state._results) {
               // Get the last result from _results array
               const results = response.state._results;
               if (results.length > 0) {
                   const lastResult = results[results.length - 1];
   
                   // Extract the content from the output array
                   if (lastResult.output && Array.isArray(lastResult.output)) {
                       for (const outputItem of lastResult.output) {
                           if (outputItem.type === "text" && outputItem.content) {
                               return outputItem.content;
                           }
                       }
                   }
               }
           }
   
           // If we can't find a clear text response, return a message
           return "Unable to extract response content from agent output.";
       } catch (error) {
           console.error("Error extracting response:", error);
           return "Error occurred while processing agent response.";
       }
   }
   
   // Main execution function with combined formatting and search
   async function searchRedditWithAgent(
       query = "Best programming languages for beginners"
   ) {
       try {
           console.log(`\n${"=".repeat(75)}`);
           console.log(`\t Query: ${query}`);
           console.log(`${"=".repeat(75)}`);
   
           console.log(`🚀 Starting Reddit search for: "${query}"`);
           console.log("⏳ This may take a moment...\n");
   
           // Run the agent network
           const response = await redditSearchNetwork.run(query);
   
           console.log("✅ Search completed!");
   
           // Extract the final text response using our helper function
           const finalResponse = extractFinalResponse(response);
   
           console.log("📊 Results:", finalResponse.slice(0, 50) + "...");
   
           // Log the clean result for user consumption
           console.log("\n" + "-".repeat(60));
           console.log("\t\t 🎯 Final Clean Response");
           console.log("-".repeat(60));
           console.log(finalResponse);
   
           return finalResponse;
       } catch (error) {
           console.error(`❌ Failed to process query "${query}":`, error.message);
           throw error;
       }
   }
   
   // Run the example
   searchRedditWithAgent().catch(console.error);
   
6. Run Your Agent

   You can run your agent using the following command:

   npx tsx agent.ts
   

   This will execute the agent, which will search Reddit for the specified query and return summarized results.