@svelteui/agentation

Svelte port of Agentation: a floating annotation toolbar for AI coding workflows.

Install

bun add @svelteui/agentation
bun add -D sass-embedded
# or npm i @svelteui/agentation
# or npm i -D sass-embedded

The package currently ships SCSS assets, so the consuming SvelteKit app needs sass-embedded available at the app level.

Usage

Svelte

<script lang="ts">
    import { Agentation } from '@svelteui/agentation';
</script>

<main>Your app</main>
<Agentation />

SvelteKit

Current releases should be rendered in the browser only. If you mount the component during SSR, you can hit document is not defined errors.

<script lang="ts">
    import { browser } from '$app/environment';
    import { Agentation } from '@svelteui/agentation';
</script>

{#if browser}
    <Agentation />
{/if}

Props

• onAnnotationAdd(annotation)
• onAnnotationDelete(annotation)
• onAnnotationUpdate(annotation)
• onAnnotationsClear(annotations)
• onCopy(markdown)
• onSubmit(output, annotations)
• copyToClipboard (default true)
• endpoint (Agentation MCP HTTP URL)
• sessionId
• onSessionCreated(sessionId)
• webhookUrl
• enableDemoMode
• demoAnnotations
• demoDelay

Exports

• Agentation
• PageFeedbackToolbarCSS
• AnnotationPopupCSS
• ./icons
• ./element-identification
• ./storage
• ./sync
• ./types
• type Annotation
• DOM/storage helpers from stable package subpaths or the root export

Notes

• Modern desktop browsers only.
• In SvelteKit, render Agentation behind a browser guard until SSR-safe mounting lands.
• reactComponents metadata is intentionally removed in this Svelte package.
• AnnotationPopupCSS uses Svelte 5 callback props (onSubmit, onCancel, onDelete) instead of component events.