GenSX Browser Agent Demo

A Chrome extension to drive and automate any web page via natural language — powered by GenSX.

How this demo works

The extension is a thin UI. The real logic is a GenSX workflow that plans, selects tools, and executes browser actions. Here is the flow at a glance:

1) Plan

A GenSX component interprets your goal and builds a plan using the LLM.

2) Choose tools

The workflow picks tools like navigate, click, extract, and search to satisfy the plan.

3) Execute

The Chrome extension safely performs the actions in the active tab and reports results.

4) Reflect + iterate

Results flow back into the workflow for reflection and next steps until the goal is done.

Workflow excerpt

A simplified slice from this example’s workflow.

TypeScript

import * as gensx from "@gensx/core";
import { asToolSet } from "@gensx/vercel-ai";
import { anthropic } from "@ai-sdk/anthropic";
import { Agent } from "./agent";
import { getFilteredTools, toolbox } from "../shared/toolbox";
import { analyzeScreenshotTool, queryPageTool } from "./tools/query";
import { webSearchTool } from "./tools/search";
import { createTodoList } from "./tools/todolist";

export const copilotWorkflow = gensx.Workflow(
  "copilot",
  async ({ prompt, threadId, selectedTabs = [], conversationMode = "general" }) => {
    const { userId } = gensx.getExecutionScope() as { userId: string };

    const toolsForModel = getFilteredTools(["fetchPageHtml", "captureElementScreenshot"]);
    const { tools: todoListTools } = createTodoList({ items: [] });

    const tools = {
      ...asToolSet(toolsForModel),
      search: webSearchTool,
      ...todoListTools,
      queryPage: queryPageTool,
      analyzeScreenshotTool,
    };

    const model = anthropic("claude-sonnet-4-20250514");

    const result = await Agent({
      messages: [{ role: "user", content: prompt }],
      tools,
      model,
    });

    return result;
  }
);

What this example showcases

Key GenSX capabilities highlighted by the Genie demo.

Component-based workflows

GenSX composes agent steps as plain TypeScript components. No graphs or DSL to learn — just functions, props, and data flow.

Planning + tool use

The agent plans, selects tools (navigate, click, extract, search), and iterates. Each tool is a reusable component you can swap or extend, and the execution of that tool can happen on the browser-side or server-side, with no extra infrastructure.

Execution bridge

The extension provides a browser-side runtime that executes the workflow’s chosen tools in the browser and streams results back into the GenSX workflow. This bridge provides a bidirectional communication channel between the GenSX workflow and the browser, while keeping things like API keys secure in the server-side execution environment.

Observability

Use GenSX Cloud to view traces, inputs/outputs, and iteration steps as your workflow runs.

Key GenSX concepts in this demo

Core building blocks you’ll use to build reliable browser agents.

Component-based workflows

Reusable steps with typed inputs/outputs. Compose logic as portable components with clear data flow.

Client-side tools

Execute tools in the browser via the extension bridge; wire them into the workflow with typed contracts. Docs

Streaming

Stream tokens, tool calls, and intermediate state to the UI with hooks. Docs

Run locally

Clone the repo and launch the example.

# 1) Clone
git clone https://github.com/gensx-inc/gensx
cd gensx/examples/genie-extension

# 2) Install deps
pnpm install

# 3) Build the Chrome extension
pnpm build:extension

# 4) Load in Chrome (manual step)
# - Open: chrome://extensions
# - Enable: Developer mode
# - Click: Load unpacked
# - Select: gensx/examples/genie-extension/extension/dist/

View on GitHub

Learn more: Client-Side Tools, Streaming, Serverless deployments