Capture Tools
Give the AI precise visual context. Screenshots, annotations, screen recordings, and element selection.
The more precise the visual context you give the AI, the better its edits. Proyecta ships four capture tools.
Select an element (Visual Editor)
Section titled “Select an element (Visual Editor)”In Visual Editor mode, every element in the preview becomes clickable. Hover to highlight, click to select. The selected element is highlighted with an overlay and its editable properties (text, colors, spacing, fonts, borders, effects) appear in the sidebar panel.
Once an element is selected, you can either:
- Edit it directly — change properties inline without writing any prompt
- Ask the AI about it — the selection is passed as context so you can say
"make this button bigger"or"move this section above the hero"and the AI knows exactly what you mean
Dynamic elements (computed classNames, conditional rendering, expressions) fall back to the AI chat automatically with a structured prompt.
See Visual Edit for the full list of editable properties.
Annotate
Section titled “Annotate”Click the annotate button (crosshair icon) in the chat input to capture a screenshot of the current preview and open the annotation editor. Draw on the screenshot to show the AI exactly what you mean.
Available tools:
- Arrow — point at a specific element
- Rectangle — draw a box around an area
- Circle — circle something that needs attention
- Freehand — sketch with a pen tool
- Text — place a text label anywhere
Pick from 6 colors (red, blue, green, yellow, white, black) and use Undo / Redo (Cmd+Z / Cmd+Shift+Z).
When you click Done, the annotated image is attached to your chat message. Send it with a prompt like "fix this layout issue" or "make the circled section match this style".
Screen Record
Section titled “Screen Record”Click the record button (video icon) in the chat input to start recording the preview. A red indicator with a timer appears at the top of the preview.
Interact with your app — click buttons, navigate pages, trigger the bug you want to show — then click Stop. Proyecta captures frames automatically (one per second, up to 30 seconds) and attaches them to your chat message.
This is ideal for bugs that involve timing, animations, or multi-step interactions that a single screenshot can’t capture.
Paste or drag screenshots into the chat
Section titled “Paste or drag screenshots into the chat”The chat input accepts images directly:
- Paste — copy a screenshot with your OS shortcut (Cmd+Shift+4 on Mac, Win+Shift+S on Windows) and paste into the chat
- Drag — drop any image file onto the chat input
Supported formats: PNG, JPEG, WebP, GIF. Maximum size: 10 MB per image.
Preview screenshots
Section titled “Preview screenshots”The AI can take its own screenshots of your preview at any time via a built-in preview_screenshot tool. You’ll see screenshot results appear inline in the chat. The AI invokes this automatically when it needs to verify its changes or understand the current state of your app.
The screenshot tool can target specific routes (e.g., /dashboard, /settings) and captures dimensions, which helps the AI reason about layout and spacing.
How do I point the AI at a specific button or text?
Use Visual Editor mode and click the element. That passes a precise, structured reference to the AI — far better than describing the element in words.
When should I annotate vs just paste a screenshot?
Annotate when you need to point at something specific — “this gap is too wide” or “move this here.” Plain screenshots are fine when the issue is obvious from the image alone.
When should I record vs annotate?
Record when the issue involves interaction — a button that doesn’t respond, a flicker during navigation, or a multi-step flow. For static layout issues, annotation is faster.