Redline
Marker rettelser direkte i en kørende webapp, og lad en AI-agent udføre dem.
En kommentar til en knap: boksen viser elementet og dets kilde, App.tsx:35
Fang feedbacken, mens du ser på det
Den bedste feedback opstår i øjeblikket: du klikker rundt i appen, og noget er forkert. Det er dér, den skal fanges, på siden og med de detaljer, der gør den brugbar, ikke skrives om efter hukommelsen i en chat bagefter.
Feedback går tabt mellem at se og at skrive
Du opdager noget, mens du bruger appen, og skifter så til en chat eller en ticket for at beskrive det. Til den tid er detaljen glemt, eller også bliver noten aldrig skrevet.
“Knappen til højre” er ikke en specifikation
Ord og skærmbilleder viser, hvad der er galt, men ikke hvor det sidder. Agenten må gætte komponenten, linjen og indholdsfilen, og den gætter tit forkert.
Konteksten forsvinder
Skærmstørrelse, tema, scrollposition og fejl i konsollen afgør, hvad du så. En fejl, der kun ses i mørk tilstand på en telefon, forsvinder let i en besked.
Peg på det, så finder agenten det
Tryk Alt+Shift+R i browseren, eller tryk på knappen på en telefon, og vælg en tilstand. Din udviklingsserver gemmer hver note som markdown under .redline/, lige ved siden af koden.
- Kommentar: klik på et element og skriv. Alt+klik vælger elementet udenom; Shift+klik kommenterer hele siden
- Tekst: ret en tekst direkte på siden; den gemmes som en diff mellem gammel og ny, eller skrives med directEdit direkte i kildefilen, når teksten er statisk
- Skitse: tegn bokse, pile, frihånd og etiketter i seks farver oven på siden
- Virker også på telefoner og tablets, og åbne menuer og dropdowns forbliver åbne, mens du vælger
- Kildefil og linje plus komponentkæden, til React, Vue, Svelte, Solid, Preact, Astro og Angular
- URL'en, en CSS-selector, XPath og test-id
- Skærmstørrelse, tema og de seneste fejl i konsollen
- Et skærmbillede med elementet markeret med rødt
- npx redline init installerer vejledningen til Claude Code, Codex, Cursor, Copilot, Gemini CLI og andre, der læser AGENTS.md
- Agenten krydser hver note af og svarer i den; svarene dukker op i overlayet med det samme
- En valgfri MCP-server lader agenter liste, læse og lukke noter som værktøjer
- Markdown er kilden til sandheden, så noterne er almindelige filer, du kan læse og sammenligne
- Kører kun i udviklingsserveren (vite dev, astro dev, ng serve); intet når produktion
- Vite (React, Vue, SvelteKit, Solid, Preact), Astro og Angular 17+, plus en middleware til andre Node-udviklingsservere
- Monorepos virker uden opsætning: alle apps' noter havner i én .redline/ i roden af repoet
- MIT-licens, på npm som @umage.ai/redline
Et kig indenfor
Teksttilstand
Klik på en tekst, skriv den om på stedet, og tryk Enter. Noten gemmes som en diff, så agenten ved præcis, hvad der skal ændres.
Skitsetilstand
Når en tegning siger det hurtigere end ord: bokse, pile, frihånd og etiketter, gemt som SVG med et skærmbillede af siden nedenunder.
Noter og svar
Alle noter på siden eller i hele appen, med agentens svar på hver enkelt. Kopiér en færdig prompt til din agent direkte fra panelet.
Bygget til den måde, vi arbejder på
Vi bygger software med AI-agenter hver dag, og det langsomste ved en ændring i UI’et var at beskrive den. Det er baggrunden for Redline: en måde at pege på den kørende app og give agenten en note, den kan handle på uden at gætte. Alle de frameworks, Redline understøtter, er dækket af end-to-end-tests, og vi bruger det på denne side.
Se det på et minut
Installation
Kræver Node 20 eller nyere.
npm install -D @umage.ai/redline
npx redline initredline init installerer agentvejledningen (en Agent Skill plus et afsnit i AGENTS.md, og tilføjelserne til Claude Code, Gemini CLI eller Copilot, når repoet allerede bruger dem) og tilføjer .redline/ til .gitignore. Tilføj --mcp for også at registrere MCP-serveren.
Vite: React, Vue, SvelteKit, Solid, Preact
Sæt Redline først, før framework-pluginet, i vite.config.ts:
import redline from '@umage.ai/redline/vite'
export default defineConfig({ plugins: [redline(), react()] }) // eller vue(), sveltekit(), solid(), preact()Astro
import redline from '@umage.ai/redline/astro'
export default defineConfig({ integrations: [redline()] })Angular (CLI 17+)
Skift serve-builderen i angular.json; ng build er uberørt:
"serve": { "builder": "@umage.ai/redline:dev-server", "options": { "buildTarget": "app:build:development" } }Start din udviklingsserver, åbn appen, og tryk Alt+Shift+R.
Når du har skrevet nogle noter, så bed din agent om at gå de åbne Redline-noter igennem. Den fulde dokumentation, indstillingerne og kildekoden ligger på GitHub.