Custom Actions

Connect your web agent to the wider web

Some times, you'll need to do thing that are tough to achieve using just the built-in actions. For such cases, you can make your own custom action. Custom actions have full access to both the LLM, the browser page, and all other functionality possible within NodeJS.

Components of a custom action

A custom action requires 3 components:

• type : This is used to distinguish a specific action from others available to the LLM. Make it unique and relevant to the task this action is supposed to perform.

• actionParams : This describes the parameters that the custom action should accept. It expects a zod object.

• run : A function that processes the instructions/parameteres produced by the LLM, and previous actions.

Response

The run of each custom action is required to output a dictionary containing the success value,and a message describing what happened. This could be the description of the error, or the success response.

Here's a simple example which introduces a custom action to navigate to a random wikipedia page.

An example custom action

import { HyperAgent } from "@hyperbrowser/agent";
import {
  AgentActionDefinition,
  ActionContext,
  ActionOutput,
} from "@hyperbrowser/agent/types";

const actionParams = z
  .object({})
  .describe(
    "Navigate to a random wikipedia page and return the title and url of the page."
  );

export const GoToWikipediaActionDefinition: AgentActionDefinition = {
  type: "go_to_random_wikipedia_page",
  actionParams: actionParams,
  run: async function (
    ctx: ActionContext,
    params: z.infer<typeof actionParams>
  ): Promise<ActionOutput> {
    await ctx.page.goto("https://en.wikipedia.org/wiki/Special:Random", {
      waitUntil: "domcontentloaded",
    });

    const url = ctx.page.url();
    const title = await ctx.page.title();
    return {
      success: true,
      message: `Succesfully navigated to URL: ${url} and title: ${title}`,
    };
  },
};

How to use

Each instance of HyperAgent accepts an array of customActions . These actions are used in addition to other built-in actions.

const agent = new HyperAgent({
  llm: llm,
  customActions: [GoToWikipediaActionDefinition],
});