agentink

Point at bugs. Let AI fix them.

Agentink turns UI annotations into structured context that AI coding agents can understand and act on. Click any element, leave a comment, and paste the generated markdown into Claude Code, Cursor, or any AI coding tool.

Packages

Package	Description
@agentink/core	Framework-agnostic element identification, storage, and markdown output
@agentink/svelte	Svelte 5 components — drop-in annotation UI
@agentink/mcp	MCP server + HTTP API for AI agent integration
@agentink/tauri-plugin	Tauri v2 adapters for native desktop apps

Quick start

npm i @agentink/svelte

<script>
  import { Agentink } from '@agentink/svelte';
</script>

<Agentink />

<!-- your app -->

Press Cmd+Shift+F to activate. Hover any element, click to annotate, copy the markdown.

How it works

1. Activate — press Cmd+Shift+F or click the crosshair
2. Click & annotate — hover to see selectors, click to select an element and leave a comment
3. Paste to AI — copy the structured markdown and paste it into your AI coding tool

What agents receive

Every annotation becomes structured markdown with CSS selectors, computed styles, component hierarchy, and your comment:

## Annotation #1
Element:      div.metric-card
Selector:     #app > main > .dashboard > div:nth-child(3)
Path:         main > div.dashboard > div.metric-card
Bounding Box: 842x120 at (680, 340)

### Computed Styles
  font-size: 14px
  background-color: rgb(255, 255, 255)
  border-radius: 12px

### Component
  MetricCard → Dashboard → App
  Source: src/lib/components/MetricCard.svelte:14

### Comment
  Needs a warning state when uptime drops below 99.5%

AI agent integration

Start the MCP server to let AI agents receive annotations in real time:

npx agentink-mcp

Add to your Claude Code config (~/.claude/settings.json):

{
  "mcpServers": {
    "agentink": {
      "command": "npx",
      "args": ["agentink-mcp"]
    }
  }
}

The agent can then list sessions, read pending annotations, and resolve them as it fixes issues.

Development

# Install dependencies
pnpm install

# Build all packages
pnpm turbo build

# Run the demo app
pnpm --filter demo dev

# Run tests
pnpm --filter @agentink/core test

Monorepo structure

agentink/
├── packages/
│   ├── core/           # Element identification, storage, output
│   ├── svelte/         # Svelte 5 components and actions
│   ├── mcp/            # MCP server + HTTP API + SQLite
│   └── tauri-plugin/   # Tauri v2 transport + storage adapters
├── apps/
│   ├── demo/           # SvelteKit browser demo
│   └── demo-tauri/     # SvelteKit + Tauri desktop demo
├── turbo.json
└── pnpm-workspace.yaml

Keyboard shortcuts

Key	Action
Cmd+Shift+F	Toggle annotation mode
P	Pause/resume (freezes page animations too)
H	Toggle annotation markers
C	Copy all annotations as markdown
X	Clear all annotations
S	Open settings

License

MIT