Context Picker

Context Picker

Framer's native AI agent can see what you've selected on the canvas, using its built in select tool. External agents like Claude Code, Cursor, and Codex don't get that. They only see plain text, so prompts like "make this headline red" leave them guessing which node "this" actually is.

Context Picker closes that gap. Select any layer on the canvas or in the layer sidebar, and it instantly copies a compact JSON payload describing that selection: node ID, name, and the surrounding scope (web page, design page, or component). Paste it straight into your external agent's prompt for precise, unambiguous edits.

What gets copied

• Node ID and name of the selected layer

• Scope type and ID, whether you're on a web page, design page, or inside a component

• URL path, when the scope is a real website page

• Replica metadata (original node ID), when the selection is a variant or inherited component layer

How to use it

1. Open Context Picker

2. Select any layer on the canvas or sidebar

3. The JSON is copied automatically, no extra click

4. Paste it into your external agent's prompt

5. Need an earlier selection? Recent picks are saved and one click away

Why it matters

If you're driving Framer edits from an external coding agent like Claude Code, Cursor, or Codex, the agent is flying blind without canvas context. Context Picker gives it the same precision Framer's native agent has with its select tool, so instead of vague prompts and trial and error edits, you can say exactly which node to touch and watch it land correctly the first time.

Free and open source.