frontman-ai/frontman

해결하는 문제

Frontman은 비기술 팀원(예: 프로덕트 매니저, 디자이너)이 IDE를 여는 것 없이 브라우저에서 직접 프론트엔드 수정을 할 수 있는 AI 코딩 에이전트입니다. 사용자가 요소를 클릭하고 영어로 변경 사항을 설명함으로써 실제 소스 코드를 업데이트할 수 있어, 디자인 QA와 핸드오프 프로세스의 번거로움을 제거합니다.

작동 방식

Frontman은 로컬 개발 서버(Next.js, Astro, Vite 지원)와 통합되어 MCP 서버로 변환합니다. 이를 통해 AI 에이전트는 라이브 브라우저 컨텍스트(예: DOM 트리, 계산된 CSS, 컴포넌트 트리, 소스맵)와 서버 사이드 컨텍스트(예: 라우트, 로그)에 접근할 수 있습니다. 사용자가 변경 사항을 설명하면 Frontman은 올바른 소스 파일을 식별하고 편집을 생성한 후 즉시 결과를 보여주는 핫 리로드를 트리거합니다.

대상 사용자

• 개발자 기다림 없이 텍스트, 여백, 색상, 레이아웃 문제를 수정하고 싶은 프로덕트 매니저 및 디자이너.
• 전통적인 IDE 기반 도구보다 더 풍부한 시각적 컨텍스트(렌더링된 출력)를 원하는 프론트엔드 개발자.
• 프론트엔드 핸드오프 및 마무리 작업 비용을 줄이고 싶은 팀.

주요 기능

• 시각적 편집: 실행 중인 앱의 원하는 요소를 클릭하여 편집 대상으로 지정.
• 프레임워크 지원: Next.js(App 및 Pages Router), Astro, Vite(React, Vue, Svelte) 지원.
• 광범위한 LLM 지원: OpenAI, Anthropic, OpenRouter, Fireworks AI, NVIDIA, Google, xAI 등에 대해 사용자 고유 키(BYOK) 지원.
• 오픈소스: 스플릿 라이선스(Apache 2.0 및 AGPL-3.0)로 제공.
• MCP 통합: 브라우저와 소스 코드를 연결하는 Model Context Protocol(MCP) 사용.