GitHub - stagewise-io/stagewise: stagewise is the first frontend coding agent for existing production-grade web apps 🪄 -- Lives inside your browser 💻 -- Makes changes in local codebase 🤓 -- Compatible with all kinds of frameworks and setups 💪

stagewise는 기존 프로덕션 수준의 웹 애플리케이션을 위한 최초의 프론트엔드 코딩 에이전트입니다. 이 도구는 개발자가 프롬프트에 엘리먼트 정보와 폴더 경로를 일일이 붙여넣는 수고를 덜어주는 것을 목표로 합니다.

핵심 기능 및 동작 방식:

* 브라우저 내 동작 (Lives inside your browser): stagewise는 사용자의 웹 브라우저 환경 내에서 직접 작동하며, 이를 통해 실시간으로 브라우저가 제공하는 컨텍스트(DOM 구조, CSS 스타일, 이벤트 리스너 등)를 활용합니다. 이는 사용자가 웹 앱을 사용하듯이 직접 시각적인 상호작용을 통해 변경할 위치를 지정할 수 있게 합니다.
* 로컬 코드베이스 변경 (Makes changes in local codebase): 에이전트는 브라우저에서 수집한 정보와 사용자 지시를 바탕으로 분석된 변경 사항을 사용자의 로컬 파일 시스템에 있는 실제 코드베이스에 직접 적용합니다. 이는 웹 앱의 개발 서버가 실행 중인 상태에서 이루어집니다.
* 프레임워크 호환성 (Compatible with all kinds of frameworks): 리액트, Vue, Angular 등 다양한 프론트엔드 프레임워크와 설정에 관계없이 작동하도록 설계되었습니다.
* 작동 방식:
1. 사용자는 자신의 웹 앱을 개발 모드(예: npm run dev)로 시작합니다.
2. 새로운 터미널에서 npx stagewise@latest 또는 pnpm dlx stagewise@latest 명령어를 통해 stagewise CLI를 시작합니다. 이 CLI는 로컬 서버를 통해 브라우저 에이전트와 통신합니다.
3. 사용자는 자연어(💬 "Tell the agent what you want to change")로 원하는 변경 사항을 에이전트에게 설명합니다.
4. 이후 웹 페이지에서 변경이 필요한 엘리먼트(들)를 직접 클릭하여(🧠 "Click on element(s) to let the agent know where a change should happen") 시각적/구조적 컨텍스트를 제공합니다.
5. stagewise는 이 자연어 지시와 브라우저로부터 얻은 실시간 DOM 컨텍스트(엘리먼트의 id, class, data-attributes, 상위/하위 엘리먼트 관계 등)를 결합하여 변경의 의도를 파악합니다.
6. 이를 기반으로 내부적으로 사용되거나 통합된 AI 모델(예: GitHub Copilot, Cursor 등)을 통해 필요한 코드 변경 사항을 생성하고, 이를 로컬 코드베이스에 자동으로 적용합니다. 이 과정은 개발자가 수동으로 파일 경로를 찾거나 엘리먼트 셀렉터를 작성할 필요 없이 자동화됩니다.
* 확장성 (Customize and extend functionality with Plugins): 플러그인 시스템을 통해 기능을 사용자 정의하고 확장할 수 있습니다.
* 다양한 에이전트 지원 (Agent support): stagewise 자체 에이전트 외에도 Cursor, GitHub Copilot, Windsurf 등과 같은 다른 호환 가능한 에이전트를 오픈 에이전트 인터페이스를 통해 사용할 수 있습니다.

stagewise는 AGPLv3 라이선스 하에 배포되며, stagewise GmbH에서 개발되었습니다. 이 도구는 개발자가 실제 웹 앱의 시각적 인터페이스에서 직접 상호작용하며 코드 변경을 지시할 수 있도록 함으로써, 프론트엔드 개발 워크플로우의 효율성을 크게 향상시키는 것을 목표로 합니다.