Agentation
Benji Taylor · Programación
Agentation es una herramienta de escritorio de feedback visual que convierte las anotaciones de interfaz en contexto estructurado para agentes de IA que escriben código. En vez de describir con palabras un botón roto, haces clic en él, escribes una nota y copias un bloque markdown que lleva selectores CSS, rutas de archivos fuente y tu intención junto al árbol de componentes React real de ese elemento. Puedes pasar ese bloque a Claude, Codex, Gemini o cualquier agente que lea tu código, y sabe exactamente a qué elemento te refieres.
Acerca de Agentation
Qué es Agentation
Agentation es una capa de feedback independiente del agente que se coloca entre tu app en ejecución y tu asistente de IA. Montas una barra pequeña en tu app React, pasas el cursor sobre los elementos para ver sus nombres y haces clic en cualquiera para adjuntar un comentario. Después, la herramienta lo formatea todo en markdown que puedes pegar en un chat con tu agente.
El problema que resuelve es concreto. Cuando le dices a un agente "el botón azul de la barra lateral se ve mal", tiene que adivinar a qué elemento te refieres, y cada error de adivinanza te cuesta una ida y vuelta. Agentation sustituye esa adivinanza por identificadores duros: .sidebar > button.primary, el archivo fuente y el árbol de componentes React. El agente hace grep en tu código en vez de buscar un color. Sin adivinar.
El mayor pero es que Agentation es solo de escritorio por ahora. No hay app móvil, ni flujo desde el teléfono, ni forma de anotar desde una tablet si ahí es donde trabajas. También apunta primero a proyectos React, porque el árbol de componentes y la salida de selectores asumen esa configuración.
Primeros pasos
- Instala el paquete con
npm install agentation(o tu gestor de paquetes favorito) y añade el componente Agentation a tu app. - Abre la barra desde el icono de la esquina inferior derecha de la página.
- Pasa el cursor por los elementos para confirmar sus nombres y haz clic en uno para abrir la ventana de anotación.
- Escribe tu comentario, elige una intención y una prioridad, y haz clic en Add.
- Copia el markdown formateado y pégalo en tu agente de IA.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Agentation.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend que usan agentes de IA
- Diseñadores de producto que dan feedback sobre builds en vivo
- Equipos pequeños de ingeniería que hacen QA interno
Tareas
- Reportar un bug de estilos en tu flujo de anotación de interfaz
- Señalar una errata
- Revisar una animación
- Pedir a un agente que aclare una decisión de diseño
Casos de uso
- Iterar sobre una app React con Claude Code o Codex abiertos en una segunda ventana.
- Depurar tu propio proyecto, donde sabes el archivo pero no la línea.
- Probar una rama de función nueva como herramienta de feedback para desarrolladores antes de que llegue a QA, para que las notas de diseño e ingeniería lleguen en el mismo formato estructurado que tu agente ya entiende.
- Hacer una revisión de diseño donde el feedback debe llegar a un agente, no a un ticket humano.
Funciones clave
Anotaciones conscientes del elemento
Haces clic en un elemento y Agentation captura lo que es de verdad: su selector CSS, la ruta del archivo fuente, la jerarquía de componentes React y los estilos calculados. Tu nota escrita viaja junto a ese contexto técnico. El resultado es un feedback sobre el que un agente puede actuar directamente en vez de interpretar una descripción. Un clic hace mucho.
Salida markdown para cualquier agente
La herramienta copia un bloque markdown formateado que funciona con Claude, Codex, Gemini, Grok o cualquier agente con acceso a tu código. Es independiente del agente por diseño, así que no quedas atado a un solo asistente. Pégalo en un chat. El agente puede hacer grep del selector o saltar directo a la línea fuente.
Integración MCP con feedback bidireccional
Con el servidor agentation-mcp instalado, los agentes no solo leen anotaciones. Pueden listar el feedback pendiente, hacer preguntas de aclaración y marcar incidencias como resueltas. Los mensajes de seguimiento y las resoluciones quedan pegados a la anotación original, lo que mantiene legible un ida y vuelta largo en vez de dispersarlo por el historial del chat. Eso importa cuando una revisión pasa de una docena de puntos.
Intención y prioridad de la anotación
Cada nota lleva un campo de intención y prioridad, así un agente distingue un bloqueante de un detalle deseable sin que se lo tengas que explicar. Escribes una incidencia por anotación, lo que facilita que el agente atienda los puntos uno a uno en vez de desenredar un párrafo denso de quejas mezcladas.
Pausa de animación
Puedes congelar una animación desde la barra y anotar un fotograma concreto. Es una función pequeña, pero nadie quiere explicar por texto "la parte donde se desliza, pero no justo al principio". Ahorra mucho tiempo.
Webhooks y entrega externa
Los webhooks del servidor empujan anotaciones a servicios externos y reintentan ante fallos de red, tiempos de espera y respuestas HTTP 429 o 5xx. Cada reintento mantiene el mismo ID de entrega, así un receptor puede deduplicar. La entrega es de mejor esfuerzo y no sobrevive a un reinicio del servidor. Conviene saberlo antes de depender de ella.
Ventajas y desventajas
Ventajas
- Sustituye las descripciones vagas por selectores y rutas de archivo concretos, lo que reduce el ida y vuelta que gastarías diciéndole a un agente qué elemento querías.
- Funciona con Claude, Codex, Gemini y Grok en vez de atarte a un solo asistente.
- Es gratis para uso individual e interno de empresa, así que no hay muro de pago para probarlo.
- El soporte MCP permite que los agentes hagan preguntas y cierren incidencias, no solo recibir notas.
Desventajas
- Solo de escritorio, así que no puedes anotar desde un teléfono o una tablet.
- La salida del árbol de componentes, pensada primero para React, asume un código React, lo que la limita en otros stacks de frontend.
- El flujo MCP necesita Node.js corriendo en local, lo que añade configuración para equipos que solo quieren la barra.
- El uso comercial fuera de proyectos internos requiere una licencia de pago, así que tendrás que revisarlo antes de incluirlo en un producto que vendas.
Preguntas frecuentes
Te deja anotar elementos de interfaz en una app web en ejecución y convierte esas notas en markdown estructurado para agentes de IA. La salida incluye el selector del elemento, la ruta del archivo fuente y tu feedback, así el agente encuentra el punto exacto en tu código.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Agentation.
Alternativas a Agentation
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.