Repolode
Enviar
frontman-ai

frontman-ai/frontman

Um agente de programação com IA e código aberto que roda no navegador: clique em um elemento do app em execução e peça para editar o código-fonte.

Alternativa open source a:CursorGitHub Copilotv0

Ver no GitHubSite
Estrelas
719
Forks
50
Issues abertas
241
Último commit
há 13 horas

O que é?

Frontman é um agente de programação com IA que trabalha a partir da página em execução, em vez de se basear apenas nos arquivos-fonte. Você clica em um elemento do app local, descreve a alteração em português simples, e ele edita o arquivo-fonte correspondente e recarrega o resultado automaticamente. Para encontrar o componente responsável pela interface, ele lê o DOM em tempo real, a árvore de componentes, o CSS computado, as rotas, os source maps e os logs do servidor.

O foco principal são pequenos ajustes de frontend, como texto, espaçamento, cores e problemas de layout que, de outra forma, ficariam esperando um desenvolvedor. Designers e gerentes de produto podem fazer alterações em uma sobreposição no navegador, e o diff resultante passa pelo processo normal de revisão da equipe. A configuração é feita com um único comando para Next.js, Astro ou Vite, e a integração só funciona em modo de desenvolvimento, sem alterar os bundles de produção.

O Frontman usa o modelo de chave própria, com suporte a vários provedores de LLM, incluindo OpenAI, Anthropic, OpenRouter e Fireworks AI. As integrações com frameworks e as bibliotecas cliente são licenciadas sob Apache 2.0, enquanto o servidor usa AGPL-3.0.

Recursos principais

  • 01Clique em qualquer elemento do app em execução para selecioná-lo e descrever uma alteração.
  • 02Edita os arquivos-fonte por trás da interface renderizada e aciona o hot reload.
  • 03Usa o DOM em tempo real, o CSS computado, a árvore de componentes e os source maps como contexto.
  • 04Compatível com Next.js (App Router e Pages Router), Astro e Vite (React, Vue, Svelte).
  • 05Disponibiliza o servidor de desenvolvimento como um servidor MCP para o agente de IA.
  • 06Suporte para usar sua própria chave com vários provedores de LLM.

Casos de uso

  • Permitir que designers ou gerentes de produto ajustem textos e espaçamentos sem abrir uma IDE.
  • Corrigir um bug de interface em uma página interna específica clicando no elemento com problema.
  • Fazer uma alteração de texto ou layout em vários pontos do app e revisar o diff antes de mesclar.
  • Fornecer a um assistente de IA contexto específico de frontend, além dos arquivos-fonte.

Início rápido

  1. 1

    Instale o Frontman em um projeto Next.js

    npx @frontman-ai/nextjs install
  2. 2

    Mova proxy.ts para src/ se o seu projeto usar src/

    mv proxy.ts src/proxy.ts
  3. 3

    Inicie o servidor de desenvolvimento

    npm run dev
  4. 4

    Abra http://localhost:3000/frontman no navegador

Antes de usar

  • Para usar os recursos de edição com IA, é necessário ter uma chave de API paga ou BYOK de um provedor de LLM.
  • A estrutura de hospedagem oficial e de auto-hospedagem ainda está em evolução.
  • Há suporte apenas a frameworks específicos; Remix, Nuxt, SolidStart, Qwik e Phoenix LiveView ainda não são compatíveis.
  • Usa uma licença dividida (Apache 2.0 para as bibliotecas e AGPL-3.0 para o servidor), então o servidor está sujeito a obrigações de copyleft.

Tópicos

#ai-agent#frontend#react#vue#svelte#vite#nextjs#astro#visual-editing#llm

Perguntas frequentes

O que é frontman?
Um agente de programação com IA e código aberto que roda no navegador: clique em um elemento do app em execução e peça para editar o código-fonte. Frontman é um agente de programação com IA que trabalha a partir da página em execução, em vez de se basear apenas nos arquivos-fonte. Você clica em um elemento do app local, descreve a alteração em português simples, e ele edita o arquivo-fonte correspondente e recarrega o resultado automaticamente. Para encontrar o componente responsável pela interface, ele lê o DOM em tempo real, a árvore de componentes, o CSS computado, as rotas, os source maps e os logs do servidor.
frontman é gratuito? Qual é a licença?
frontman é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
frontman ainda é mantido?
Manutenção ativa. O último commit de frontman foi em 20 de out. de 2026.
Para que posso usar frontman?
Permitir que designers ou gerentes de produto ajustem textos e espaçamentos sem abrir uma IDE. Corrigir um bug de interface em uma página interna específica clicando no elemento com problema. Fazer uma alteração de texto ou layout em vários pontos do app e revisar o diff antes de mesclar. Fornecer a um assistente de IA contexto específico de frontend, além dos arquivos-fonte.
Como instalar frontman?
Instale o Frontman em um projeto Next.js: npx @frontman-ai/nextjs install Mova proxy.ts para src/ se o seu projeto usar src/: mv proxy.ts src/proxy.ts Inicie o servidor de desenvolvimento: npm run dev Abra http://localhost:3000/frontman no navegador
Onde consigo frontman?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/frontman-ai/frontman

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados