frontman-ai/frontman

어떤 프로젝트인가요?

핵심 기능

• 01실행 중인 앱에서 요소를 클릭해 선택하고 변경 사항을 설명할 수 있습니다.
• 02렌더링된 UI를 구성하는 소스 파일을 수정하고 핫 리로드를 실행합니다.
• 03실시간 DOM, 계산된 CSS, 컴포넌트 트리, 소스 맵을 참고 정보로 활용합니다.
• 04Next.js(App Router 및 Pages Router), Astro, Vite(React, Vue, Svelte)를 지원합니다.
• 05개발 서버를 AI 에이전트용 MCP 서버로 제공합니다.
• 06여러 LLM 제공업체에 이용자 소유 API 키를 연결할 수 있습니다.

활용 사례

• 디자이너나 제품 관리자가 IDE를 열지 않고 문구와 간격을 수정할 수 있습니다.
• 문제가 있는 요소를 클릭해 특정 내부 페이지의 UI 버그를 수정할 수 있습니다.
• 앱 전반의 문구나 레이아웃을 변경하고 병합 전에 diff를 검토할 수 있습니다.
• AI 어시스턴트에 소스 파일만으로는 부족한 프론트엔드 전용 맥락을 제공할 수 있습니다.

빠른 시작

1. 1

   Next.js 프로젝트에 Frontman을 설치합니다

   npx @frontman-ai/nextjs install
2. 2

   프로젝트에서 src/를 사용한다면 proxy.ts를 src/로 옮깁니다

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

   개발 서버를 시작합니다

   npm run dev
4. 4

   브라우저에서 http://localhost:3000/frontman을 엽니다

사용 전 알아둘 점

• !AI 편집 기능을 사용하려면 LLM 제공업체의 유료 API 키 또는 BYOK API 키가 필요합니다.
• !공식 호스팅 및 셀프 호스팅 패키징은 아직 정비 중입니다.
• !지원하는 프레임워크가 제한적입니다. Remix, Nuxt, SolidStart, Qwik, Phoenix LiveView는 아직 지원되지 않습니다.
• !라이선스가 분리되어 있습니다(라이브러리는 Apache 2.0, 서버는 AGPL-3.0). 따라서 서버에는 카피레프트 의무가 적용됩니다.

토픽

자주 묻는 질문

frontman은(는) 무엇인가요?

브라우저에서 실행되는 오픈소스 AI 코딩 에이전트로, 실행 중인 앱의 요소를 클릭하면 해당 소스 코드를 수정할 수 있습니다. Frontman은 소스 파일만 살펴보는 대신 실행 중인 페이지에서 작업하는 AI 코딩 에이전트입니다. 로컬 앱에서 요소를 클릭하고 원하는 변경 사항을 영어로 설명하면, 해당 소스 파일을 수정하고 핫 리로드로 결과를 반영합니다. 실시간 DOM, 컴포넌트 트리, 계산된 CSS, 라우트, 소스 맵, 서버 로그를 읽어 어떤 컴포넌트가 해당 UI를 담당하는지 찾습니다.

frontman은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

frontman은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

frontman은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. frontman의 마지막 커밋은 2026년 10월 20일입니다.

frontman은(는) 어디에 사용할 수 있나요?

디자이너나 제품 관리자가 IDE를 열지 않고 문구와 간격을 수정할 수 있습니다. 문제가 있는 요소를 클릭해 특정 내부 페이지의 UI 버그를 수정할 수 있습니다. 앱 전반의 문구나 레이아웃을 변경하고 병합 전에 diff를 검토할 수 있습니다. AI 어시스턴트에 소스 파일만으로는 부족한 프론트엔드 전용 맥락을 제공할 수 있습니다.

frontman는 어떻게 설치하나요?

Next.js 프로젝트에 Frontman을 설치합니다: npx @frontman-ai/nextjs install 프로젝트에서 src/를 사용한다면 proxy.ts를 src/로 옮깁니다: mv proxy.ts src/proxy.ts 개발 서버를 시작합니다: npm run dev 브라우저에서 http://localhost:3000/frontman을 엽니다

frontman은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/frontman-ai/frontman