annotakit

Click your UI, leave notes, generate agent-ready context.

Annotakit adds a floating toolbar to your SvelteKit app. Click elements, select text, or drag to multi-select, then export structured markdown that AI agents can consume directly.

Quick Start

pnpm add annotakit

<!-- src/routes/+layout.svelte -->
<script>
  import { Annotakit } from 'annotakit';
  import 'annotakit/styles';
</script>

<Annotakit />
<slot />

A floating toolbar appears in the corner. Click any element to annotate it.

Start collapsed with <Annotakit minimized />.

See the full documentation for props, output formats, and configuration.

How It Works

1. Annotate - click elements, select text, or drag to multi-select
2. Comment - add notes describing the change needed
3. Export - copy structured markdown to your clipboard or pipe it to an AI agent

Output includes CSS selectors, Svelte component info, accessibility attributes, and computed styles. Everything an agent needs to locate and understand the element.

Packages

Roadmap

Here's where annotaKit is headed. Contributions to any of these are welcome.

• MCP server - @annotakit/mcp package that connects annotation output directly to Claude via the Model Context Protocol
• Framework packages - dedicated packages for other frameworks (React, Vue, etc.) so annotaKit works beyond SvelteKit
• Collaborative annotations - share annotation sessions across team members in real time
• Browser extension - annotate any website without adding annotaKit to the project

Have an idea? Open an issue.

Contributing

We're looking for help with documentation, DX/testing, export formats, and MCP integration. See the contributing guide for details on how to get started.

Development

Requires pnpm and Node.js 18+.

# Install dependencies
pnpm install

# Start dev playground
pnpm dev

# Type check
pnpm check

# Build package
pnpm build

Acknowledgements

Inspired by Agentation (PolyForm Shield 1.0.0). Annotakit is a clean-room implementation built for the SvelteKit ecosystem, written from scratch under the MIT license.

License

© 2026 nodestarQ

MIT