AI coding agents increasingly work with live applications, navigating interfaces, reading structures, and performing actions. Yet they often lack the context that human developers pick up intuitively from visual cues: what is this element, and what purpose does this section serve? The Agentation project tackles this head-on with visual UI annotations added explicitly for AI coding agents.
The TYPO3 Agentation extension brings this concept into the TYPO3 ecosystem. Editors and developers can add contextual annotations directly in the browser — in both the frontend and backend — without having to leave their familiar editor workflow.
Table of Contents
Overview
Features in Detail
Installation
Conclusion
Overview
The Agentation project defines a concept for visual UI annotations addressed explicitly to AI coding agents. Rather than have an agent interpret an interface through scraping and heuristics, developers and editors add structured contextual information directly onto UI elements. The annotations describe purpose, constraints, and relationships, and are machine-readable yet also visible in the browser.
The TYPO3 extension applies this model at two levels: the TYPO3 frontend (via the Admin Panel toolbar) and the TYPO3 backend (a toolbar in module content frames). Both can be enabled per user, with the visibility of the annotation layer controlled in each user's personal TYPO3 settings and no global impact on the interface.
For MCP integration, the extension ships a backend module under "System > Agentation". It shows the MCP configuration and the status of local and server-side agentation-mcp servers, and provides a same-origin backend proxy for local agentation-mcp servers. AI coding agents can reach annotations through this proxy without needing direct network routes to local services.
This extension requires TYPO3 ^14.3 and PHP ^8.2. A compatible agentation-mcp server is required for use with MCP-based AI agents. The pre-built Vite assets are delivered with the extension — Node.js is not required for installation.
Features in Detail
| Feature | Benefit |
|---|---|
| Frontend Toolbar (Admin Panel) | Injects the Agentation annotation layer into the TYPO3 frontend preview via the Admin Panel — activatable per user in their personal TYPO3 settings. |
| Backend Toolbar in Module Content Frames | Displays the annotation layer directly in backend module content frames. Developers can add contextual annotations without leaving the backend. |
| Backend Module "System > Agentation" | Central configuration interface: MCP server configuration, status of local and server-side agentation-mcp servers, annotation list, and deletion function. |
| Same-Origin Backend Proxy | Proxy for local agentation-mcp servers: AI coding agents can access local MCP services via TYPO3 backend routes — no direct network routing required. |
| Context Gate | Prevents the annotation layer from accidentally becoming visible in production environments. The annotation UI is only active in configured environments. |
| Per-User Settings | FE and BE toolbar visibility is controlled per user — no global interference, and no overhead for users without an AI agent workflow. |
| Pre-built Vite Assets | The extension delivers compiled frontend assets. No Node.js build step is required for installation — simplifies deployment and CI/CD. |
Together, the frontend toolbar, backend toolbar, and MCP module add up to a seamless workflow. Editors annotate content in the frontend context, developers add backend module context, and the AI coding agent retrieves every annotation through the MCP server, straight from the editor and without a separate documentation tool.
The Context Gate is a deliberate safeguard here, since AI annotations can contain internal structural information that should never be visible in production. The extension distinguishes between environment contexts and activates the annotation layer only where intended.
Installation
composer config repositories.typo3-agentation vcs https://github.com/dirnbauer/typo3-agentation.git
composer require webconsulting/agentationFrequently Asked Questions
Conclusion
The TYPO3 Agentation extension bridges the familiar editing and development workflow with the growing class of AI coding agents. Instead of having agents interpret interfaces via scraping and heuristics, teams add structured context directly within the browser — without leaving the editor, without installing Node.js, and without exposing production systems.
The extension implements the Agentation annotation concept based on the Admin Panel and Backend APIs of TYPO3 v14. Thanks to the TYPO3 Core Team and the community. The extension is licensed under the GPL.