Capture Tools

Give the AI precise visual context. Screenshots, element selection, and images.

The more precise the visual context you give the AI, the better its edits. Proyecta ships several capture tools.

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.

Paste or drag screenshots into the chat

The chat input accepts images directly:

1. Paste — copy a screenshot with your OS shortcut (Cmd+Shift+4 on Mac, Win+Shift+S on Windows) and paste into the chat
2. Drag — drop any image file onto the chat input

Supported formats: PNG, JPEG, WebP, GIF, AVIF. Maximum size: 10 MB per image.

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.

FAQ

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.

Coming soon

The following capture tools are implemented internally but not yet exposed in the UI:

• Annotate — capture the current preview and draw arrows, rectangles, circles, freehand strokes, and text labels on it before sending to the AI.
• Screen Record — record a multi-step interaction (clicks, navigation, animations) and attach the captured frames to your chat message. Ideal for timing-sensitive bugs that a single screenshot can’t capture.