Repolode
Enviar
frontman-ai

frontman-ai/frontman

Agente de programación con IA y de código abierto que funciona en el navegador: haz clic en un elemento de tu app en ejecución para que edite el código fuente.

Alternativa open source a:CursorGitHub Copilotv0

Ver en GitHubSitio web
Estrellas
719
Forks
50
Issues abiertos
241
Último commit
hace 13 horas

¿Qué es?

Frontman es un agente de programación con IA que trabaja desde la página en ejecución, no solo a partir de los archivos fuente. Haz clic en un elemento de tu app local, describe el cambio en lenguaje natural y editará el archivo fuente correspondiente y recargará la página en caliente. Analiza el DOM en vivo, el árbol de componentes, el CSS calculado, las rutas, los source maps y los registros del servidor para encontrar qué componente controla la interfaz.

Su objetivo principal son pequeños ajustes de frontend, como cambios de texto, espaciado, colores y problemas de diseño que, de otro modo, tendrían que esperar a que los atienda un desarrollador. Diseñadores y responsables de producto pueden hacer cambios desde una superposición en el navegador, y el diff resultante pasa por el proceso habitual de revisión del equipo. La configuración requiere un solo comando para Next.js, Astro o Vite, y la integración solo se ejecuta en modo de desarrollo, por lo que los bundles de producción no cambian.

Frontman permite usar tu propia clave y es compatible con varios proveedores de LLM, como OpenAI, Anthropic, OpenRouter y Fireworks AI. Las integraciones de frameworks y las bibliotecas de cliente tienen licencia Apache 2.0, mientras que el servidor tiene licencia AGPL-3.0.

Funciones clave

  • 01Haz clic en cualquier elemento de la app en ejecución para seleccionarlo y describir un cambio.
  • 02Edita los archivos fuente de la interfaz renderizada y activa la recarga en caliente.
  • 03Usa el DOM en vivo, el CSS calculado, el árbol de componentes y los source maps como contexto.
  • 04Es compatible con Next.js (App Router y Pages Router), Astro y Vite (React, Vue y Svelte).
  • 05Expone el servidor de desarrollo como servidor MCP para el agente de IA.
  • 06Permite usar tu propia clave con varios proveedores de LLM.

Casos de uso

  • Permitir que diseñadores o responsables de producto corrijan textos y espaciado sin abrir un IDE.
  • Corregir un error de interfaz en una página interna concreta haciendo clic en el elemento que falla.
  • Hacer un cambio de texto o diseño en varias partes de la app y revisar el diff antes de integrarlo.
  • Proporcionar a un asistente de IA contexto específico del frontend, además de los archivos fuente.

Inicio rápido

  1. 1

    Instala Frontman en un proyecto de Next.js

    npx @frontman-ai/nextjs install
  2. 2

    Mueve proxy.ts a src/ si tu proyecto usa src/

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

    Inicia el servidor de desarrollo

    npm run dev
  4. 4

    Abre http://localhost:3000/frontman en tu navegador

Antes de usarlo

  • Para usar las funciones de edición con IA, necesitas una clave de API de pago o BYOK de un proveedor de LLM.
  • El empaquetado para el alojamiento oficial y el autoalojamiento aún está en desarrollo.
  • Solo admite ciertos frameworks; Remix, Nuxt, SolidStart, Qwik y Phoenix LiveView todavía no son compatibles.
  • Utiliza una licencia dividida (Apache 2.0 para las bibliotecas y AGPL-3.0 para el servidor), por lo que el servidor está sujeto a obligaciones de copyleft.

Temas

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

Preguntas frecuentes

¿Qué es frontman?
Agente de programación con IA y de código abierto que funciona en el navegador: haz clic en un elemento de tu app en ejecución para que edite el código fuente. Frontman es un agente de programación con IA que trabaja desde la página en ejecución, no solo a partir de los archivos fuente. Haz clic en un elemento de tu app local, describe el cambio en lenguaje natural y editará el archivo fuente correspondiente y recargará la página en caliente. Analiza el DOM en vivo, el árbol de componentes, el CSS calculado, las rutas, los source maps y los registros del servidor para encontrar qué componente controla la interfaz.
¿frontman es gratuito? ¿Qué licencia tiene?
frontman es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿frontman sigue mantenido?
Mantenimiento activo. El último commit de frontman fue el 20 oct 2026.
¿Para qué puedo usar frontman?
Permitir que diseñadores o responsables de producto corrijan textos y espaciado sin abrir un IDE. Corregir un error de interfaz en una página interna concreta haciendo clic en el elemento que falla. Hacer un cambio de texto o diseño en varias partes de la app y revisar el diff antes de integrarlo. Proporcionar a un asistente de IA contexto específico del frontend, además de los archivos fuente.
¿Cómo se instala frontman?
Instala Frontman en un proyecto de Next.js: npx @frontman-ai/nextjs install Mueve proxy.ts a src/ si tu proyecto usa src/: mv proxy.ts src/proxy.ts Inicia el servidor de desarrollo: npm run dev Abre http://localhost:3000/frontman en tu navegador
¿Dónde consigo frontman?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/frontman-ai/frontman

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados