makeAssistantVisible

makeAssistantVisible is a higher-order component (HOC) that makes React components visible to the assistant. The assistant can read the component's HTML and, when configured, click or edit it.

Usage

import { makeAssistantVisible } from "@assistant-ui/react";

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// Basic usage - makes component HTML readable
const ReadableButton = makeAssistantVisible(Button);

// With clickable configuration
const ClickableButton = makeAssistantVisible(Button, {
  clickable: true, // Enables the click tool
});

// With editable configuration
const EditableInput = makeAssistantVisible(Input, {
  editable: true, // Enables the edit tool
  settleDelayMs: 100, // Wait after click or edit actions (default: 2000)
});

API Reference

Parameters

• Component: The base React component to enhance
• config: Optional configuration object
  • clickable: When true, enables the assistant to programmatically click the component
  • editable: When true, enables the assistant to programmatically set the value of an input or textarea within the component
  • settleDelayMs: Time to wait after a successful click or edit before the tool completes. Defaults to 2000. Use 0 to disable the wait. Values below 0, above 2147483647, or non-finite values throw a RangeError when makeAssistantVisible is called

Behavior

The HOC will:

1. Make the component's HTML structure available to the assistant via the system context
2. Optionally provide a click tool if clickable is true
3. Optionally provide an edit tool if editable is true, which sets the value of an <input> or <textarea> inside the component
4. Handle nested readable components (only the outermost component's HTML is provided)
5. Forward refs and maintain component props

Example

// Create a readable form input that the assistant can also edit
const Input = ({ label, ...props }) => (
  <div>
    <label>{label}</label>
    <input {...props} />
  </div>
);

const EditableInput = makeAssistantVisible(Input, { editable: true });

// Use in your component
function Form() {
  return (
    <EditableInput label="Email" type="email" placeholder="Enter your email" />
  );
}

Technical Details

When a component is made readable:

• It's wrapped in a ReadableContext.Provider to handle nesting
• The component's outerHTML is provided as system context
• If clickable is true, a unique data-click-id is added and a click tool is provided
• The click tool uses querySelector and simulates a click event
• Click and edit tools wait for settleDelayMs after a successful action so the interface can update before the assistant continues; a configured value is rendered as data-action-settle-delay on the action element
• If editable is true, a unique data-edit-id is added and an edit tool is provided
• The edit tool uses querySelector to find the element carrying data-edit-id, which must be an <input> or <textarea>, and sets its value, dispatching input and change events
• Props and refs are forwarded to the wrapped component