onUI

Anote elementos, desenhe regiões e entregue uma interface mais limpa mais rápido.

Documentação

onUI

Anote qualquer UI para Agentes de IA

Extensão de navegador leve (Chrome + Edge + Firefox) + ponte MCP local para programação em par de UI com anotações em primeiro lugar.

Desenvolvido por onLLM.dev.

[!NOTE] onUI agora está estável e pronto para produção.

Demonstração

_{Clique na pré-visualização acima para reproduzir o vídeo completo da demonstração.}

✨ Por que onUI

🧩 Sem integração no código do aplicativo
🎛️ Controle ON/OFF por aba (desligado por padrão)
🎯 Diálogo de anotação na página com intenção + gravidade
✍️ Modo de desenho para anotações de região (retângulo + elipse)
⚙️ Barra de ferramentas compacta com configurações pop-out (nível de saída + limpar ao copiar)
👀 Marcadores visuais e direcionamento por hover
🧾 Exporta saídas em formatos compacto / padrão / detalhado / forense
🛡️ Isolamento Shadow DOM para estilização estável
🔌 Servidor MCP local + ponte nativa (sem backend em nuvem)

Instalação (Atual)

Opção A: Lojas de Extensões de 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

Opção B: Instalador de um comando a partir do último lançamento do GitHub

Use isto se quiser a versão mais recente (as atualizações da loja podem atrasar) ou para Firefox:

macOS/Linux:

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

macOS/Linux (artefato 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, artefato Firefox):

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

O instalador cuida da instalação da extensão e pode configurar o MCP na mesma execução. Quando solicitado com Set up local MCP bridge now? [y/N], insira y para habilitar o MCP.

Em seguida, carregue-o no Chrome ou Edge:

Abra chrome://extensions ou edge://extensions
Ative o Modo de desenvolvedor
Clique em Carregar sem compactação
Selecione ~/.onui/extensions/current (ou %USERPROFILE%\.onui\extensions\current no Windows)

Navegadores Chromium exigem esta etapa manual final para extensões não empacotadas.

Firefox (manual a partir do artefato de lançamento):

Baixe onui-firefox-add-ons-vX.Y.Z.zip da página de lançamento do GitHub.
Extraia-o para uma pasta local.
Abra about:debugging#/runtime/this-firefox.
Clique em Carregar complemento temporário...
Selecione o manifest.json extraído.

🧠 Uso

Abra qualquer aba de site suportado.
Clique no ícone da extensão onUI.
Ative This Tab.
Use o lançador na página para abrir a barra de ferramentas compacta.
Alterne o Modo de anotação para direcionamento de elementos ou o Modo de desenho para direcionamento de regiões.
Segure Shift e clique em vários elementos para selecionar alvos em lote.
Solte Shift para abrir um diálogo de anotação compartilhado para os alvos selecionados.
Salve uma vez para criar uma anotação por elemento selecionado (ou uma anotação de região no fluxo de desenho).
Abra as Configurações da barra de ferramentas para escolher o nível de saída e configurar Limpar ao copiar.
Copie a saída exportada da barra de ferramentas.

🔌 Configuração MCP Local

Caminho recomendado: use o mesmo comando do instalador acima e responda y quando solicitado.

Se quiser forçar a configuração do MCP em modo não interativo:

macOS/Linux (--mcp):

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

Windows (PowerShell, defina a variável de ambiente antes de executar o instalador):

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

A configuração do MCP agora usa um pacote de lançamento pré-construído (sem necessidade de build local), mas ainda requer Node 20+.

A configuração manual do MCP a partir do código-fonte ainda é suportada:

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

Configuração JSON manual para roteadores/clientes MCP personalizados

Se o seu roteador MCP usa um mapa de estilo de objeto mcpServers, use esta entrada canônica:

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

Use um caminho absoluto para onui-cli.js (caminhos relativos são frequentemente rejeitados ou resolvidos incorretamente pelos roteadores).

Se o seu roteador usa um esquema de lista/array em vez de um mapa de objeto, adapte a mesma forma de comando/args assim:

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

O exemplo de lista acima é um padrão de adaptação de esquema, não uma afirmação sobre os nomes exatos de chaves de qualquer roteador específico.

Notas de configuração/verificação:

Execute pnpm build:mcp primeiro para que packages/mcp-server/dist/bin/onui-cli.js exista.
Mantenha o nome da entrada do servidor como onui-local.
Execute pnpm doctor:mcp após conectar a configuração para confirmar a saúde da configuração local.
Registra automaticamente onui-local para Claude Code e Codex quando esses CLIs estão instalados.
Suporte a navegadores nesta versão: Chrome estável + Edge estável + Firefox estável (não empacotado).
@onui/mcp-server é local ao workspace (private: true), então execute setup/doctor a partir deste repositório.

Veja:

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

Build e Lançamento do Mantenedor

app.sh é o ponto de entrada de lançamento local (sem dependência de CI/CD).

Validação local + empacotamento de artefatos

./app.sh --build

Isso executa:

Verificações de pré-requisitos (Node 20+, pnpm, git, zip)
Ordem de build: @onui/core -> @onui/extension -> @onui/mcp-server
Testes MCP
Verificação de fumaça do MCP doctor (avisos permitidos, erros falham)
Empacotamento de artefatos em artifacts/vX.Y.Z/

Artefatos:

onui-extension-unpacked-vX.Y.Z.zip
onui-chrome-web-store-vX.Y.Z.zip (manifesto key removido para CWS)
onui-edge-add-ons-vX.Y.Z.zip (manifesto key removido para Edge Add-ons)
onui-firefox-add-ons-vX.Y.Z.zip
onui-mcp-bundle-vX.Y.Z.zip
install.sh
install.ps1
checksums.txt

Lançamento local + publicação no GitHub

./app.sh --release

Portões de lançamento:

Árvore git limpa
A branch atual é main
gh auth status é bem-sucedido

Ações de lançamento:

Aumento automático de patch a partir da raiz package.json
Sincronizar versão entre extensão + strings de runtime MCP
Executar --build completo
Commit + tag vX.Y.Z
Enviar commit/tag
Criar lançamento no GitHub com os ativos empacotados

🛠️ Desenvolvimento

pnpm install
pnpm check
pnpm test:coverage

🗂️ Estrutura do Repositório

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

⭐ Suporte

Se onUI for útil para você, por favor, dê uma estrela no repositório: https://github.com/onllm-dev/onUI

Isso ajuda outros usuários a descobrirem o produto.

Histórico de Estrelas

📄 Licença

GPL-3.0