Når koden er udrullet: Mød AnnotateTheWeb
Artikel

Når koden er udrullet: Mød AnnotateTheWeb

Den mest nyttige feedback på et website kommer, når koden er udrullet, og den kommer fra kunder, redaktører og testere, der aldrig får jeres dev-server at se. Med AnnotateTheWeb, vores nye hostede værktøj, kan de pege på det, der er galt, på ethvert live site og sende en note til jeres team eller direkte til jeres AI-agent over MCP.

Meget af den feedback, vi får fra kunder, kommer stadig, som den altid har gjort. En mail, et par skærmbilleder og et afsnit, der forklarer, hvor man skal kigge, og hvornår det går galt. “Det er på produktsiden, den anden pris, men kun når jeg er logget ind, og kun på mobilen.” Nogle gange er der en rød cirkel på skærmbilledet. Nogle gange er den røde cirkel tegnet rundt om noget helt andet.

Så begynder det egentlige arbejde. Vi kopierer mailen ind i en ticket eller direkte ind i en chat med en agent, og så starter jagten: hvilken side, hvilket element, hvilken komponent der renderer det, og hvad i kundens browser der fik elementet til at se forkert ud.

Selve rettelsen går som regel hurtigt. Det har agenterne sørget for. Det langsomme er at finde ud af, hvad der skal rettes. Og det tager tid, fordi den, der havde problemet lige foran sig, har måttet omsætte den vigtigste oplysning, nemlig hvor, til ord.

Det problem har vi løst før

I sidste uge skrev Morten om Redline, vores open source-overlay, der løser præcis det problem på vores egne maskiner. Man trykker på en genvejstast i den kørende app, klikker på det, der er galt, og skriver. Agenten får elementet, kildefilen med linjenummer, viewporten og fejlene i konsollen, og ingen skriver en afhandling om en knap.

Det har ændret den måde, vi arbejder på. Men Redline har en grænse, og den er bevidst: det lever i dev-serveren og kender kildefilen, fordi det ligger lige ved siden af koden.

Det dækker den feedback, jeg selv giver, mens jeg bygger. Det dækker ikke det meste af den feedback, der betyder noget.

Den vigtigste feedback kommer, når koden er udrullet

Den feedback, der betyder mest, kommer, når koden er udrullet. Og den kommer fra folk, der aldrig får jeres dev-server at se.

Det er kunder, der gennemgår staging, og redaktører, der arbejder i produktionssitet hver eneste dag. Det er en tester med en telefon, I ikke selv har, og marketingchefen, der lægger mærke til, at overskriften knækker grimt på mobilen. Ingen af dem kommer nogensinde til at klone repoet, og det skal de heller ikke behøve.

Og det er ikke kun andre. Jeg støder hele tiden på ting på sites og webapps, som jeg ikke selv har bygget eller ikke har kørende lokalt: en kundes live site, et værktøj, vi selv bruger, eller et browserspil. Når jeg ville melde den slags, har den nemmeste løsning indtil nu været den samme rutine med skærmbillede og forklarende afsnit, som jeg lige har brokket mig over.

Redline kan godt klare en del af det. Det kan køre på et udrullet site, tage imod feedback fra brugere, der er logget ind, og sende noter videre til de systemer, et team allerede bruger. Men det er integrationsarbejde, projekt for projekt. Det, jeg ville have, var Redlines måde at give feedback på, uden at skulle integrere noget som helst.

Derfor byggede vi AnnotateTheWeb

AnnotateTheWeb tager den samme idé og dropper dev-serveren. Det er en hostet tjeneste: man åbner den på en hvilken som helst webside, klikker på det, der er galt, og skriver, hvad der skal ændres. Man kan kommentere et element, skrive teksten om på stedet eller skitsere oven på siden.

Hver note havner i en fælles indbakke sammen med det, en udvikler ellers ville bruge de første ti minutter på at stykke sammen:

  • sidens adresse og det præcise element, angivet både via selector og via elementets tekst
  • viewport, scrollposition og eventuelt et skærmbillede
  • op til ti af de seneste fejl i konsollen og ti fejlede netværkskald
  • ved tekstændringer både den gamle og den nye ordlyd, så ændringen står som en præcis diff

Det ligner Redline, fordi det er vokset ud af Redline. Det har samme popover, samme røde farve og samme måde at hæfte en note på et element.

Der er to veje ind på en side. Chrome-udvidelsen kan bruges på alle websites, og den er til jeres team og til jer hver især. Når en kunde skal gennemgå et site, I er ved at bygge, indsætter I et lille script på sitet og sender kunden et invitationslink. Kunden får en Annotate-knap og skal ikke installere noget, og andre besøgende ser slet ingenting.

Det tager ét klik at komme i gang, og der er ingen tilmelding. I får et workspace og et token, som I kan dele med teamet.

Her kommer agenten ind i billedet

Det er den del, der ændrer noget ved vores måde at arbejde på. Workspacet har en MCP-server, så en AI-agent kan læse indbakken direkte. I Claude Code kobler man serveren på med én kommando, og alle andre MCP-klienter bruger den samme URL og det samme token.

Agenten henter listen over åbne noter, læser hver enkelt med tilhørende skærmbillede, finder koden, retter den, svarer i tråden og lukker noten. Den, der kommenterede, ser svaret som en pin på siden. Ingen har kopieret noget ind i en ticket, og ingen har spillet detektiv med en rød cirkel.

Vil I hellere have tickets, kan alle nye noter, ændringer og svar sendes videre som signerede webhooks til de værktøjer, I allerede bruger.

Det kan AnnotateTheWeb ikke

Lad mig være ærlig om, hvor grænserne går.

AnnotateTheWeb kender ikke jeres kildefil og linjenummer. Værktøjet er ikke en del af sitets build, så den oplysning har det ikke. Agenten får siden, elementet og ordene og finder selv koden. Det er nutidens agenter gode til, men når I ejer koden og arbejder lokalt, giver Redline stadig agenten det præcise linjenummer.

Udvidelsen findes kun til Chrome. Scriptet virker i alle moderne browsere, så kunderne kan bruge den browser, de vil, men der findes ingen udvidelse til Edge, Firefox eller Safari.

Gratisplanen glemmer. Noterne bliver gemt i syv dage, efter at der sidst er sket noget med dem. Det passer til en feedbackrunde, ikke til et arkiv. Har et team brug for, at noterne bliver liggende, sætter vi efter aftale et permanent workspace op.

Redline, mens I bygger, og AnnotateTheWeb, når koden er udrullet

Sådan ser jeg på de to værktøjer i dag.

Hvis I bygger appen og ejer koden, så brug Redline. Det er gratis og open source. Det kører i jeres dev-server, og agenten får linjenummeret med.

Hvis sitet kører et sted, og feedbacken kommer fra alle mulige andre, så brug AnnotateTheWeb. Det gælder kunder, redaktører og testere, og det gælder også jer selv, når I kigger på noget, I ikke har bygget.

Og hold op med at tage imod skærmbilleder på mail. Ikke fordi de er forkerte, men fordi hvert led mellem den, der så problemet, og agenten, der retter det, slører hvor lidt mere.

AnnotateTheWeb er live på annotatetheweb.com, udvidelsen ligger i Chrome Web Store, og der er en demo på 75 sekunder, hvis I hellere vil se end læse. I kan også prøve det i vores demo-bageri uden at installere noget.

Det er et feedbackværktøj, så fortæl os, hvad I synes. Helst ved at pege.