Svelte Agentation

Alpha

Svelte Agentation turns UI annotations into structured context that AI coding agents can understand and act on. Click any element, add a note, and paste the output into Claude Code, Cursor, or any AI tool.

Star on GitHub

Installation

npm i sv-agentation

Try It

The toolbar is active on this page. Press i to activate or deactivate it.

Usage

Mount the component only in development and only in the browser.

Features

Everything listed here reflects the current supported surface of sv-agentation.

Inspect DOM elements and resolve source file location.
Annotate individual elements directly in the page.
Annotate selected text ranges.
Annotate grouped selections across multiple elements.
Annotate selected page areas.
Use a draggable floating toolbar.
Choose toolbar position presets.
Toggle the inspector theme inside the tool UI.
Toggle marker visibility for notes.
Block normal page interactions while inspecting.
Use a delete-all flow with configurable delay.
Copy structured annotation output for developer and AI-assisted workflows.
Mount the inspector only in dev mode with `browser && dev`.

Props

The public component API is intentionally small, but it includes the core controls needed for editor opening, selection scoping, and toolbar behavior.

Prop	Type	Description
`workspaceRoot`	`string \| null`	Absolute project root for source lookup and editor links.
`selector`	`string \| null`	Optional selector to scope inspectable elements.
`vscodeScheme`	`'vscode' \| 'vscode-insiders'`	Choose the VS Code URL scheme for open-in-editor actions.
`openSourceOnClick`	`boolean`	Open source directly on click instead of only showing metadata.
`deleteAllDelayMs`	`number`	Confirmation delay for delete-all notes.
`toolbarPosition`	`'top-left' \| 'top-center' \| 'top-right' \| 'mid-right' \| 'mid-left' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	Initial preset for the floating toolbar position.

Shortcuts

These are the keyboard shortcuts and selection gestures currently used by the inspector.

Shortcut	Action	Description
`i`	Toggle inspector	Open or close the inspector toolbar and annotation mode.
`c`	Copy all notes	Copy notes as Markdown when at least one note exists.
`r`	Reset toolbar position	Move the floating toolbar back to its default bottom-right placement.
`o`	Open source	Open the currently hovered source location when the inspector is active.
`esc`	Cancel current action	Clear transient selections, close the composer, or close settings/delete state.
`shiftctrl/cmdclick`	Build a group selection	Add or remove elements from a grouped annotation target before releasing the modifiers.