@agent-infra/browser-ui is a CDP-based browser remote casting solution. It implements basic capability encapsulation based on @agent-infra/browser and can be directly referenced as a Web component by web pages.

Users only need to provide a CDP WebSocket URL with permissions, and @agent-infra/browser-ui can display the remote browser's page, and you can also manually intervene in browser operations, which is very useful in scenarios without VNC and headless browser.

Installation

npm install @agent-infra/browser-ui

Quick Start

Usage in FE projects:

import { BrowserUI } from '@agent-infra/browser-ui';

const container = document.getElementById('browserContainer');
if (!container) {
  throw new Error('Browser container element not found');
}

BrowserUI.create({
  root: container,
  browserOptions: {
    connect: {
      browserWSEndpoint: 'https://example.com/ws/url',
    },
  },
});

Or use the unpkg CDN:

CDN URL: https://unpkg.com/@agent-infra/browser-ui/dist/bundle/index.js

<!doctype html>
<html lang="en">
  <body>
    <div id="browserContainer"></div>
    <script src="https://unpkg.com/@agent-infra/browser-ui/dist/bundle/index.js"></script>
    <script>
      const BrowserUI = window.agent_infra_browser_ui.BrowserUI;

      BrowserUI.create({
        root: document.getElementById('browserContainer'),
        browserOptions: {
          connect: {
            // @ts-ignore
            browserWSEndpoint: 'https://example.com/ws/url',
          },
        },
      });
    </script>
  </body>
</html>

A complete usable example, which can be run directly with npm run dev in the current directory or viewed in the /examples directory within the package.

Features

For detailed documentation on all features, please refer to our complete documentation.

Tab Switching - Display all tabs and implement switchTab/createTab/closeTab functions
Navigation - Basic functions like goBack/goForward/reload/goto
Dialog - Real-time display and response to blocking popups like Alert/Confirm
Mouse Input - Support for move/hover/click/drag operations
Keyboard Input - Full keyboard support including common hotkeys
Clipboard Simulation - Simulated clipboard functionality for copy-paste operations

Requirements

Node.js >= 20.x
Chrome/Chromium browser with remote debugging support
Network access to CDP WebSocket endpoint

License

Apache License 2.0.

Credits

Special thanks to the open source projects that inspired this toolkit:

puppeteer - The underlying browser automation library
Chrome DevTools Protocol - Chrome DevTools Protocol
Lit - Simple. Fast. Web Components.
Lucide icons - Beautiful & consistent icons

FAQs

What is @agent-infra/browser-ui?

Is @agent-infra/browser-ui well maintained?

Package last updated on 10 Nov 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@agent-infra/browser-ui