# makeAssistantVisible
URL: /docs/copilots/make-assistant-visible

Make React components visible and interactive to assistants via higher-order component wrapping.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

`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