onUI

Anota elementos, dibuja regiones y entrega una interfaz de usuario más limpia más rápido.

Documentación

onUI

Anota cualquier UI para agentes de IA

Extensión de navegador ligera (Chrome + Edge + Firefox) + puente MCP local para programación en pareja de UI centrada en anotaciones.

Desarrollado por onLLM.dev.

GitHub stars GitHub license Chrome Stable Edge Stable Firefox Stable Buy Me A Coffee

[!NOTE] onUI ahora es estable y está listo para producción.

Demostración

onUI demo — click to play full video

Haz clic en la vista previa de arriba para reproducir el video de demostración completo.

✨ Por qué onUI

  • 🧩 Sin integración en el código de la aplicación
  • 🎛️ Control ON/OFF por pestaña (desactivado por defecto)
  • 🎯 Diálogo de anotación en la página con intención + severidad
  • ✍️ Modo dibujo para anotaciones de región (rectángulo + elipse)
  • ⚙️ Barra de herramientas compacta con configuración emergente (nivel de salida + borrar al copiar)
  • 👀 Marcadores visuales y apuntado al pasar el cursor
  • 🧾 Exporta salidas en formatos compacto / estándar / detallado / forense
  • 🛡️ Aislamiento de Shadow DOM para un estilo estable
  • 🔌 Servidor MCP local + puente nativo (sin backend en la nube)

Instalación (Actual)

Opción A: Tiendas de extensiones del navegador (recomendado)

Chrome Web Store: https://chromewebstore.google.com/detail/onui/hllgijkdhegkpooopdhbfdjialkhlkan?authuser=0&hl=en-GB

Microsoft Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/onui/fkcmlckehjhcicihbnmhkadfhjhfnond

Opción B: Instalador de un comando desde la última versión de GitHub

Usa esto si quieres la última versión (las actualizaciones de la tienda pueden ir con retraso) o para Firefox:

macOS/Linux:

curl -fsSL https://github.com/onllm-dev/onUI/releases/latest/download/install.sh | bash

macOS/Linux (artefacto de Firefox):

curl -fsSL https://github.com/onllm-dev/onUI/releases/latest/download/install.sh | bash -s -- --firefox

Windows (PowerShell):

irm https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 | iex

Windows (PowerShell, artefacto de Firefox):

iwr https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 -OutFile install.ps1; .\install.ps1 -Firefox

El instalador maneja la instalación de la extensión y puede configurar MCP en la misma ejecución. Cuando se te solicite Set up local MCP bridge now? [y/N], ingresa y para habilitar MCP.

Luego cárgalo en Chrome o Edge:

  1. Abre chrome://extensions o edge://extensions
  2. Habilita el modo desarrollador
  3. Haz clic en Cargar descomprimida
  4. Selecciona ~/.onui/extensions/current (o %USERPROFILE%\.onui\extensions\current en Windows)

Los navegadores Chromium requieren este paso manual final para extensiones descomprimidas.

Firefox (manual desde el artefacto de la versión):

  1. Descarga onui-firefox-add-ons-vX.Y.Z.zip desde la página de versiones de GitHub.
  2. Extráelo a una carpeta local.
  3. Abre about:debugging#/runtime/this-firefox.
  4. Haz clic en Cargar complemento temporal...
  5. Selecciona el manifest.json extraído.

🧠 Uso

  1. Abre cualquier pestaña de sitio web compatible.
  2. Haz clic en el icono de la extensión onUI.
  3. Habilita This Tab.
  4. Usa el lanzador en la página para abrir la barra de herramientas compacta.
  5. Alterna el modo anotar para apuntar a elementos o el modo dibujar para apuntar a regiones.
  6. Mantén presionado Shift y haz clic en varios elementos para seleccionar objetivos en lote.
  7. Suelta Shift para abrir un diálogo de anotación compartida para los objetivos seleccionados.
  8. Guarda una vez para crear una anotación por elemento seleccionado (o una anotación de región en el flujo de dibujo).
  9. Abre la Configuración de la barra de herramientas para elegir el nivel de salida y configurar Borrar al copiar.
  10. Copia la salida exportada desde la barra de herramientas.

🔌 Configuración local de MCP

onllm-dev/onUI MCP server

Ruta recomendada: usa el mismo comando de instalación de arriba y responde y cuando se te solicite.

Si quieres forzar la configuración de MCP en modo no interactivo:

macOS/Linux (--mcp):

curl -fsSL https://github.com/onllm-dev/onUI/releases/latest/download/install.sh | bash -s -- --mcp

Windows (PowerShell, establece la variable de entorno antes de ejecutar el instalador):

$env:ONUI_INSTALL_MCP=1; irm https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 | iex

La configuración de MCP ahora usa un paquete de versión precompilado (no se requiere compilación local), pero aún necesita Node 20+.

La configuración manual de MCP desde el código fuente aún es compatible:

pnpm build:mcp
pnpm setup:mcp
pnpm doctor:mcp

Configuración JSON manual para routers/clientes MCP personalizados

Si tu router MCP usa un mapa de estilo objeto mcpServers, usa esta entrada canónica:

{
  "mcpServers": {
    "onui-local": {
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/onUI/packages/mcp-server/dist/bin/onui-cli.js",
        "mcp"
      ]
    }
  }
}

Usa una ruta absoluta para onui-cli.js (las rutas relativas a menudo son rechazadas o resueltas incorrectamente por los routers).

Si tu router usa un esquema de lista/array en lugar de un mapa de objetos, adapta la misma forma de comando/argumentos así:

{
  "servers": [
    {
      "name": "onui-local",
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/onUI/packages/mcp-server/dist/bin/onui-cli.js",
        "mcp"
      ]
    }
  ]
}

El ejemplo de lista anterior es un patrón de adaptación de esquema, no una afirmación sobre los nombres exactos de claves de ningún router específico.

Notas de configuración/verificación:

  • Ejecuta pnpm build:mcp primero para que exista packages/mcp-server/dist/bin/onui-cli.js.

  • Mantén el nombre de entrada del servidor como onui-local.

  • Ejecuta pnpm doctor:mcp después de conectar la configuración para confirmar el estado de la configuración local.

  • Registra automáticamente onui-local para Claude Code y Codex cuando esos CLI están instalados.

  • Soporte de navegador en esta versión: Chrome estable + Edge estable + Firefox estable (descomprimido).

  • @onui/mcp-server es local al espacio de trabajo (private: true), así que ejecuta setup/doctor desde este repositorio.

Ver:

  • docs/mcp-setup.md
  • docs/doctor.md
  • docs/release.md

Compilación y publicación para mantenedores

app.sh es el punto de entrada de publicación local (sin dependencia de CI/CD).

Validación local + empaquetado de artefactos

./app.sh --build

Esto ejecuta:

  1. Verificaciones de requisitos previos (Node 20+, pnpm, git, zip)
  2. Orden de compilación: @onui/core -> @onui/extension -> @onui/mcp-server
  3. Pruebas de MCP
  4. Verificación rápida de MCP doctor (se permiten advertencias, los errores fallan)
  5. Empaquetado de artefactos en artifacts/vX.Y.Z/

Artefactos:

  1. onui-extension-unpacked-vX.Y.Z.zip
  2. onui-chrome-web-store-vX.Y.Z.zip (manifiesto key eliminado para CWS)
  3. onui-edge-add-ons-vX.Y.Z.zip (manifiesto key eliminado para Edge Add-ons)
  4. onui-firefox-add-ons-vX.Y.Z.zip
  5. onui-mcp-bundle-vX.Y.Z.zip
  6. install.sh
  7. install.ps1
  8. checksums.txt

Publicación local + publicación en GitHub

./app.sh --release

Puertas de publicación:

  1. Árbol git limpio
  2. La rama actual es main
  3. gh auth status tiene éxito

Acciones de publicación:

  1. Incremento automático de parche desde la raíz package.json
  2. Sincronizar la versión en la extensión + cadenas de tiempo de ejecución de MCP
  3. Ejecutar el --build completo
  4. Commit + etiqueta vX.Y.Z
  5. Empujar commit/etiqueta
  6. Crear una versión de GitHub con los activos empaquetados

🛠️ Desarrollo

pnpm install
pnpm check
pnpm test:coverage

🗂️ Estructura del repositorio

packages/
  core/        Shared annotation/report types + formatters
  extension/   Browser extension runtime (background/content/popup)
  mcp-server/  Local MCP server + native bridge setup/doctor tooling

⭐ Soporte

Si onUI te resulta útil, por favor dale una estrella al repositorio: https://github.com/onllm-dev/onUI

Ayuda a otros usuarios a descubrir el producto.

Buy Me A Coffee

Historial de estrellas

Star History Chart

📄 Licencia

GPL-3.0