agent-eyes
En MCP-server som gir KI-kodeagenter øyne. Skjermbilder, layoutsjekker, pikseldiff og trygge innlogginger, alt i en ekte Chrome.
agent-eyes er et verktøy for KI-kodeagenter, ikke for mennesker. Når en agent som Claude Code, Cursor eller Codex endrer en nettside, har den normalt ingen måte å se resultatet på. Den endrer litt CSS, sier «fikset», og håper. agent-eyes er en MCP-server, et lite program agenten kan kalle, som åpner siden i en ekte Chrome, ser på den, måler den og rapporterer tilbake. Jeg laget det til mitt eget arbeid i juni 2026 og har brukt det hver dag siden. Koden ble offentlig i september.
Problemet det løser
Et skjermbilde alene er ikke nok. Et bilde er dyrt for en agent å se på, og selv med bildet foran seg må agenten gjette på tall: er den knappen 40 piksler bred eller 44? Sluttet hero-teksten faktisk å flyte over på mobil? Nådde fiksen i det hele tatt den publiserte siden, eller ser agenten på en gammel fane?
agent-eyes er bygget rundt alt som skjer etter skjermbildet. De fleste av de 28 verktøyene returnerer tekst i stedet for bilder, og de som returnerer bilder beholder filen i full oppløsning på disk og sender agenten bare et lite miniatyrbilde.
Hva det gjør
- Skjermbilder. Fire navngitte skjermstørrelser, mobil, nettbrett, desktop og ultrabred, slik at agenten tenker i navn i stedet for å finne på pikselstørrelser. Ett kall kan ta alle fire.
- Layout og måling. En layoutskanning som finner overflyt, elementer som kolliderer, trykkflater under 44 px og uleselig tekst, og returnerer diagnosen som tekst uten noe bilde. En elementinspektør som gir ekte dimensjoner, avstander, farger og WCAG-kontrast. En måler for layoutforskyvning. Pikseldiff mot referansebilder du sjekker inn i git.
- Verifisering. Et
verify_fix-verktøy som laster den publiserte URL-en på nytt, sjekker en liste med små påstander og returnerer en tabell med bestått/ikke bestått. Det er dette som fanger «agenten sa det var fikset, men produksjon har fortsatt feilen». - Tilgjengelighet og design. WCAG-grunnlag som alt-tekst og overskriftsrekkefølge, en gjennomgang av designsystemet, og et verktøy som henter ut en nettsides farger og typografi som CSS-variabler.
- Interaksjon. Klikk, skriv, hold over, rull og dra, og ta bilde etterpå. Et verktøy som nummererer alle klikkbare elementer på skjermen og returnerer en liste med eksakte selektorer, så agenten aldri gjetter. Flere navngitte faner som beholder tilstanden sin. Nettverksmocking for forutsigbare bilder.
- Innlogging uten å lekke hemmeligheter. Når en side krever passord, åpner agent-eyes en liten side på localhost der et menneske skriver det inn. Agenten får tilbake «success», aldri passordet. Tofaktorkoder fungerer på samme måte. Lagrede påloggingsdetaljer ligger i et AES-256-GCM-hvelv uten noen klartekstmodus. Når en side trenger et ekte menneske, for eksempel ved en CAPTCHA, blir nettleseren synlig, personen klikker, og kjøringen fortsetter. Den prøver aldri å omgå slike sjekker.
Den styrer den Chrome-en du allerede har, usynlig og uten automatiseringsfingeravtrykk, så sider som blokkerer roboter behandler den som en vanlig nettleser. Én nettleserøkt lever på tvers av verktøykall, så en innlogging i steg én holder fortsatt i steg ni.
Hvordan det ble laget
agent-eyes er rundt 17 000 linjer TypeScript på Node, med den offisielle MCP-SDK-en og Playwright for å styre Chrome. Hvert verktøy er sin egen modul, og koden som kjører inne i siden for å skanne layout eller merke elementer, ligger adskilt fra serverkoden som kaller den. Enhetstester dekker konfigurasjon, Chrome-deteksjon, innloggingsklassifisereren, hvelvkryptografien og verifiseringspåstandene, og de kjører på Node 20, 22 og 24 i CI uten å starte en nettleser.
En installasjonskommando på én linje finner Chrome-en din og skriver MCP-konfigurasjonen for Claude Code, Cursor, Codex, Zed eller VS Code:
npx -y github:oljodev/mcp-agent-eyes setup --agent claude-code --write
Kostnad betydde like mye som funksjoner. Verktøylisten en MCP-server sender, sendes på nytt ved hver forespørsel i hver samtale, så den siste utgivelsen før publisering kuttet den med 35 prosent bare ved å skrive om beskrivelsene.
Status
Aktiv og i daglig bruk. Jeg utvikler det ved siden av annet arbeid og publiserer endringer når jeg trenger dem. Siste commits vises under.
Hva jeg fikk ut av det
Dette er det første prosjektet der jeg bygde verktøyet jeg manglet i stedet for å jobbe rundt det. Det lærte meg hvordan KI-agenter faktisk bruker verktøy, og hvor mye utformingen av et verktøys inndata og utdata avgjør om agenten bruker det godt. Det tvang meg også til å ta sikkerhet på alvor fra starten, for et verktøy som logger inn på ekte nettsider for deg må være til å stole på, ellers er det ubrukelig.
Siste commits
Se på GitHub- Henter commits fra GitHub…