Zengrab

zengrab

Select context for coding agents directly from OpenTUI apps.

Click any component in your terminal UI to copy its component name, type, and hierarchy to your clipboard—ready to paste into Cursor, Claude Code, Copilot, or any coding agent.


Usage

Auto-init (recommended)

Call `initZengrab(renderer)` and add `captureHandler` to `onMouseDown` and `hoverHandler` to `onMouseMove` of a Box wrapping your UI. Hover highlights the element; click to grab it.

import { createCliRenderer, Box, Text } from "@opentui/core";
import { initZengrab } from "zengrab";

const renderer = await createCliRenderer({ exitOnCtrlC: true });
const zengrab = initZengrab(renderer);

renderer.root.add(
  Box(
    {
      id: "app",
      onMouseDown: zengrab.captureHandler,
      onMouseMove: zengrab.hoverHandler,
      flexDirection: "column",
      flexGrow: 1,
    },
    Text({ content: "Click me to grab" })
  )
);

// Hover = highlight border. Click = grab. Ctrl+Alt+G = toggle zengrab on/off

Required: wrap your UI

Add `zengrab.captureHandler` to `onMouseDown` and `zengrab.hoverHandler` to `onMouseMove` of a Box that wraps your UI. The hovered element is highlighted with a border; click any component to grab it.

Box(
  {
    onMouseDown: zengrab.captureHandler,
    onMouseMove: zengrab.hoverHandler,
    flexDirection: "column",
  },
  Text({ content: "Click me to grab" })
)

Manual grab

Use `grabAndCopy` or `grabContext` when you need more control:

import { createCliRenderer } from "@opentui/core";
import { grabAndCopy, grabContext, grabContextFromRenderable } from "zengrab";

const renderer = await createCliRenderer();

// Grab focused component
await grabAndCopy(renderer);

// Grab a specific renderable (e.g. from click event)
const context = grabContextFromRenderable(event.target);
if (context) await grabAndCopy(renderer, event.target);

Options

const zengrab = initZengrab(renderer,