Edit with Tambo Button
An inline editing button that appears on interactable components. Opens a popover with a prompt input to edit the component using natural language. You can also choose to send the edit in a thread.
Examples
Basic Usage
Interactive Demo
Click the AI/Bot button on the form to edit it using natural language. Try instructions like "Make the form more professional", "Change the prefilled values", "Change the dropdown options", or "Change to a support form". Use "Send in Thread" to open the collapsible chat panel with suggestions.
Get in Touch
We'd love to hear from you. Fill out the form below.
Installation
Component API
EditWithTamboButton
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | Bot icon | Custom icon component to display |
| tooltip | string | "Edit with tambo" | Tooltip text shown on hover |
| description | string | - | Description for tooltip (falls back to component description) |
| className | string | - | Additional CSS classes for the button |
| onOpenThread | () => void | - | Optional callback to open the thread panel/chat interface |
| editorRef | React.MutableRefObject<Editor | null> | - | Optional TextEditor editor ref for "Send in Thread" mode |
| suggestions | Suggestion[] | - | Optional suggestions to display when using "Send in Thread" |
Usage Notes
- Requires withInteractable
This component must be used within a component wrapped with
withInteractable. It reads the current interactable context to send edit instructions to Tambo. - Two Send Modes
The button supports two modes: "Send" (inline edit) and "Send in Thread" (opens in chat panel). Users can choose via the dropdown.