Funnely

Desenhe o funil de marketing junto com o cliente, ao vivo, numa call.

O que é

Funnely é um canvas visual pra mapear o fluxo de um funil — tráfego → página → conversão — igual à camada Map do Funnelytics, só que open source e local-first: sem login, sem backend, sem plano pago.

Feito pra abrir na tela durante uma call e montar o funil junto com o cliente, arrastando etapas.

Funcionalidades

• Canvas com pan/zoom/minimapa (React Flow) — arraste uma etapa da paleta, ou clique pra soltar no centro; conecte puxando de uma borda até outra.
• Paleta com 3 abas, fiel à do Funnelytics:
  • Sources — 70+ fontes de tráfego (Facebook, Google, TikTok, CRMs, mensageria, offline...), com logo de marca real quando existe.
  • Pages — 15 miniaturas de página (landing, checkout, upsell, obrigado...).
  • Actions — 22 eventos de conversão (compra, formulário, clique...).
• Múltiplos funis por sessão — criar, duplicar, renomear, excluir.
• Export/import — .json (leva o funil pra outra máquina) e .png (manda pro cliente).
• Tema claro/escuro/sistema, persistido.
• Server MCP (npm run mcp) — deixa um agente de IA criar e editar funil por conta própria, via uma pasta em disco compartilhada com o app (sincronizada no navegador via File System Access API).

Tudo roda no navegador. Sem servidor, sem conta, sem tracking.

Rodando localmente

Requisito: Node ≥ 22.

git clone https://github.com/eudanielhenrique/funnelyOpen.git
cd funnelyOpen
npm install
npm run dev

Abre em http://localhost:5173.

npm run build      # build de produção em dist/
npm run test       # testes (vitest)
npm run lint        # eslint
npm run typecheck
npm run mcp         # server MCP (stdio) — ver "Automação via agente" abaixo

Automação via agente (MCP)

O server em mcp/server.ts expõe ferramentas (create_board, add_node, connect_nodes, list_catalog_items...) que deixam um agente de IA montar funil sozinho. Ele lê/escreve boards como .json em ~/.funnely/boards/ — o mesmo formato que o botão Exportar do app gera.

Pra ver o funil que o agente criou aparecer no app automaticamente, clique em Conectar agente na toolbar e escolha essa pasta (só Chrome/Edge — File System Access API). Sem isso, o board fica só no arquivo — dá pra importar manualmente com o botão Importar.

Registrar o server num cliente MCP (Claude Code, etc.): aponte pro comando node mcp/server.ts com o diretório de trabalho na raiz deste repo.

Stack

React 19 + TypeScript strict + Vite · React Flow pro canvas · Zustand pro estado · Model Context Protocol pro server de automação. Zero dependência de rede em runtime — até a fonte (Sora) vem empacotada local, pra funcionar numa call com wifi ruim.

Detalhes de arquitetura e decisões em ARCHITECTURE.md.

Licença e créditos

MIT. Identidade visual do Bora Automatizar.

Os ícones de marca (Facebook, Google, Salesforce, etc.) na paleta representam cada serviço como fonte de tráfego/integração — são marcas registradas dos respectivos donos, usadas aqui só nesse sentido identificador, sem afiliação.