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

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Agentation – vizuální zpětná vazba pro AI coding agenty ======

//Vytvořeno: **28.7.2026** | Aktualizováno: **~~LASTMOD~~**//

[[https://www.agentation.com/|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 [[https://github.com/benjitaylor/agentation|GitHubu]].

===== K čemu je dobrý =====

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.

===== Jak funguje =====

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.

===== Základní použití =====

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

<code bash>
npm install agentation -D
</code>

Komponenta se přidá k rootu aplikace:

<code tsx>
import { Agentation } from "agentation";

function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}
</code>

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

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

===== Použití v PHP aplikaci =====

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ě:

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

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.

===== Integrace s agentem přes MCP =====

Bez další konfigurace se strukturované zadání ručně zkopíruje do agenta. Pro obousměrnou synchronizaci nabízí [[https://www.agentation.com/mcp|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í.

<code bash>
npx add-mcp "npx -y agentation-mcp server"
npx agentation-mcp doctor
</code>

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''.

===== Omezení a bezpečnost =====

  * 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 =====

> **⚠ Licence není MIT ani Apache-2.0.** Agentation používá [[https://github.com/benjitaylor/agentation/blob/main/LICENSE|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.

===== Zdroje =====

  * [[https://www.agentation.com/|Agentation – přehled a funkce]]
  * [[https://www.agentation.com/install|Agentation – instalace a bezpečnostní poznámky]]
  * [[https://www.agentation.com/features|Agentation – funkce a omezení]]
  * [[https://www.agentation.com/mcp|Agentation MCP server]]
  * [[https://github.com/benjitaylor/agentation|Agentation – zdrojový kód]]
  * [[https://github.com/benjitaylor/agentation/blob/main/LICENSE|PolyForm Shield License 1.0.0]]