annotate_step
Add a numbered step callout with arrow and optional text to an image for creating tutorials or highlighting UI elements.
Instructions
Add a numbered step annotation with callout circle, arrow, and optional text.
This is a composite tool that combines a numbered callout with an arrow pointing to a target location. Useful for creating step-by-step tutorials or highlighting UI elements.
If callout_position is not specified, it's automatically placed offset from the target.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| text | No | Optional text label to display near the callout | |
| color | No | Color for callout and arrow | red |
| image_id | Yes | ID of the image to annotate | |
| arrow_width | No | Width of the arrow line | |
| step_number | No | Step number (auto-increments if None) | |
| callout_size | No | Size of the callout circle | |
| target_position | No | Position the arrow points to. Named ('center'), percentage ('50%, 30%'), or pixels ('830px, 195px') | center |
| callout_position | No | Position for the callout. If None, auto-placed near target. Named, percentage, or pixels. |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Status message | |
| image_id | Yes | Image ID that was annotated | |
| step_number | Yes | The step number used | |
| target_position | Yes | Position the arrow points to | |
| callout_position | Yes | Position of the callout circle |