Agentation – vizuální zpětná vazba pro AI coding agenty

Vytvořeno: 28.7.2026 | Aktualizováno: 28.07.2026 20:14

Agentation je nástroj pro vizuální předávání připomínek AI coding agentům. V prohlížeči se označí konkrétní prvek stránky nebo text, přidá se poznámka a nástroj vytvoří strukturovaný podklad pro agenta; zdrojový kód je dostupný na GitHubu.

Agentation řeší nepřesné zadávání změn UI. Místo popisu typu „oprav modré tlačítko v levém panelu“ dostane agent anotaci se selektorem, cestou k elementu, třídami, polohou, okolním textem a samotným komentářem.

Hodí se zejména pro:

předávání konkrétních úprav UI a copy AI coding agentovi;
označení překlepů nebo změn textu přes přesný výběr textu;
ladění rozvržení a CSS – anotace může obsahovat vypočtené styly;
anotaci více prvků nebo celé oblasti stránky;
zachycení stavu animace po jejím pozastavení;
návrh přibližného rozmístění komponent v režimu layoutu.

Nejde o náhradu screenshotů, vizuální regrese ani end-to-end testů. Jeho hodnota je v tom, že propojí konkrétní místo v DOM s úkolem pro agenta, který má přístup ke zdrojovému kódu.

Po aktivaci toolbaru se klikne na element stránky, zapíše připomínka a výsledné Markdown zadání se zkopíruje do coding agenta. Agent může podle CSS selektoru, tříd a kontextu vyhledat odpovídající část projektu.

Výstup má několik úrovní detailu. Základní varianta obsahuje minimum kontextu pro drobné opravy, podrobnější varianty přidávají například bounding box, okolní text nebo vypočtené CSS styly. V React aplikaci Agentation umí přidat také strom komponent. Při podporovaném vývojovém buildu může doplnit zdrojový soubor a řádek.

Oficiální balíček je React komponenta. Nainstaluje se jako vývojová závislost:

npm install agentation -D

Komponenta se přidá k rootu aplikace:

import { Agentation } from "agentation";
 
function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}

Pro vývojové použití se má komponenta podmínit prostředím, aby se do produkčního buildu nevložila:

{process.env.NODE_ENV === "development" && <Agentation />}

Agentation není samostatný JavaScript widget určený k připojení jedním tagem <script> do libovolného PHP webu. Balíček vyžaduje React 18+, React DOM a běh v klientském prohlížeči.

PHP aplikace ho může použít přes samostatný vývojový frontend bundle, například vytvořený pomocí Vite. Bundle do stránky připojí React a komponentu Agentation; PHP šablona jej vloží pouze mimo produkční prostředí. V produkci se asset vůbec neodkazuje, například podmínkou v šabloně:

<?php if (($_ENV['APP_ENV'] ?? 'production') !== 'production'): ?>
  <script type="module" src="/assets/agentation-debug.js"></script>
<?php endif; ?>

Není nutné přepisovat celý PHP web do Reactu, ale React musí být součástí tohoto vývojového bundle. Nad výsledným PHP HTML budou fungovat DOM anotace, selektory, třídy, text a polohy prvků. Nebude však k dispozici React component tree ani automatické propojení anotace se zdrojovým PHP souborem a řádkem.

Bez další konfigurace se strukturované zadání ručně zkopíruje do agenta. Pro obousměrnou synchronizaci nabízí Agentation MCP server balíček agentation-mcp. Browser toolbar komunikuje s jeho HTTP serverem a coding agent s MCP serverem přes stdio; obě části používají stejné úložiště anotací.

npx add-mcp "npx -y agentation-mcp server"
npx agentation-mcp doctor

Agent pak může načíst čekající anotace, potvrdit jejich převzetí, doptat se v diskusi, označit opravu jako vyřešenou nebo anotaci zamítnout s důvodem. Nástroj je určený pro lokální vývoj; HTTP server MCP integrace standardně běží na portu 4747.

Funguje pouze v desktopovém prohlížeči a vyžaduje React 18+.
Anotace bez MCP integrace ukládá per-page do localStorage po dobu sedmi dní.
Markery se nepřepočítají po změně layoutu a nástroj negeneruje screenshoty.
Při vytvoření anotace čte obsah DOM, aby mohl připravit kontext. Ve výchozím režimu jej nikam neodesílá; data se odesílají až při ručním vložení do agenta nebo po nastavení endpointu či webhooku.
Do anotací nepatří citlivé údaje z přihlášené aplikace. Před připojením endpointu nebo webhooku je potřeba ověřit, kam se budou data posílat.

⚠ Licence není MIT ani Apache-2.0. Agentation používá PolyForm Shield License 1.0.0. Před použitím v produktu nebo před redistribucí je potřeba ověřit aktuální znění licence a dopad na zamýšlené použití.

Licence povoluje software používat, kopírovat, upravovat a distribuovat. Zakazuje ho ale použít pro produkt nebo službu konkurující Agentationu či produktu poskytovatele licence, při distribuci vyžaduje přiložit kopii licence a neposkytuje záruky. Oficiální web výslovně uvádí bezplatné interní použití jednotlivci i firmami; pro redistribuci jako součást prodávaného produktu doporučuje kontaktovat autora.