Agentation — Svelte 5

A floating toolbar for annotating web pages and collecting structured feedback for AI coding agents. Svelte 5 port of benjitaylor/agentation.

What it does

Click any element on a page to annotate it. Agentation captures precise structural data — CSS selectors, positions, component hierarchy, computed styles — and generates structured output that AI agents can understand and act on.

Features

• Element annotation — click to select, Cmd+Shift+click for multi-select, drag to select regions
• Svelte component detection — automatically detects Svelte component hierarchy in dev mode via __svelte_meta
• Markdown export — copy structured output with selectors, positions, and context
• MCP integration — send annotations directly to Claude Code via Model Context Protocol
• Design mode — place wireframe components and rearrange page sections
• Animation freezing — pause CSS/JS animations for precise state capture
• Dark/light theme — toggle with a button
• Zero runtime deps — pure Svelte + CSS animations

Quick start

npm install agentation

<script>
  import { Agentation } from 'agentation';
</script>

<Agentation />

Toggle with Cmd+Shift+A.

Monorepo structure

packages/agentation/   — Main Svelte 5 component library
mcp/                   — MCP server (Node.js, framework-agnostic)
example/               — SvelteKit demo app

Development

pnpm install
pnpm build          # build the library
pnpm dev            # run the example app at localhost:5173

MCP Server

The MCP server enables AI agents to receive and respond to annotations:

cd mcp
pnpm build
npx agentation-mcp init    # register with Claude Code
npx agentation-mcp server  # start on port 4747

Props

Credits

Svelte 5 port of agentation by @benjitaylor.