에이전트는 멋진 HTML 산출물을 잘 만든다. 그런데 그걸 사람이 검토하고 고치는 과정은 여전히 "스크린샷 찍고 → 이거 저거 바꿔줘"라는 긴 글로 퇴화한다. lavish-axi는 그 망가진 루프를, 요소를 직접 클릭해 코멘트를 다는 로컬 에디터로 갈아끼운다. MCP가 아니라 "CLI"로 에이전트와 연결되는 새로운 패턴(AXI)의 교본이다.
lavish-axi(Lavish Editor)는 AI 에이전트가 만들어 낸 HTML 파일을 로컬 브라우저로 열어, 사람이 화면 위 요소를 콕 집어 피드백을 보내면 그 피드백이 정확한 DOM 위치 정보와 함께 에이전트에게 되돌아가는 로컬 전용 리뷰 에디터입니다. 한 줄 슬로건은 "HTML is the new markdown." — 이제 에이전트의 결과물은 텍스트가 아니라 인터랙티브한 HTML 아티팩트이고, 그걸 다루는 전용 에디터가 필요하다는 주장입니다.
설치도, 서버도, 클라우드 계정도 필요 없습니다. npx lavish-axi plan.html 한 줄이면 로컬에 작은 HTTP 서버가 뜨고 브라우저가 열립니다. 개발자(또는 에이전트)는 lavish-axi poll plan.html로 사람의 코멘트를 기다리고, 사람은 화면에서 문단을 클릭하거나 텍스트를 드래그해 "여기 이렇게 바꿔줘"라고 답니다. npm 패키지명은 lavish-axi, 라이선스는 MIT, 만든 사람은 Kun Chen입니다.
워드 문서에 빨간펜으로 "이 문장 고쳐"라고 메모를 달면 작성자가 그 위치를 정확히 안다. lavish-axi는 똑같은 경험을 AI가 생성한 HTML에 제공한다. 사람이 화면 요소에 코멘트를 달면, 에이전트는 "어느 요소에, 무슨 말을" 했는지를 좌표가 아니라 DOM 셀렉터로 정확히 받아 수정한다.
차이는 방향이다. 구글 독스는 사람끼리 협업하지만, lavish-axi는 사람 ↔ AI 에이전트가 같은 화면을 보며 협업한다.
2026년 들어 Claude Code·Codex·OpenCode 같은 코딩 에이전트가 일상화되면서, 에이전트가 내놓는 결과물이 "코드"를 넘어 "리치 HTML 산출물"(기획서·다이어그램·비교표·리포트)로 확장됐습니다. 그런데 이걸 검토하는 방법이 원시적이었습니다. lavish-axi는 바로 그 "검토 루프(review loop)"의 빈자리를 정확히 찔러서 트렌딩에 올랐습니다.
README의 문제 정의가 날카롭습니다. "에이전트는 리치 HTML을 잘 만들지만, 그걸 두고 사람과 협업하는 고리가 빈약해서 결국 스크린샷을 찍고 '이거 바꿔줘'라는 긴 답글로 되돌아간다. 그 과정에서 HTML이 가장 잘하는 것 — 인터랙티비티 — 을 잃는다." lavish-axi는 사람이 화면에서 직접 요소를 클릭/선택해 코멘트를 달게 만들어, 글로 위치를 설명할 필요를 없앱니다.
대부분의 에이전트 연동은 MCP 서버를 띄우고 설정 파일을 건드려야 합니다. lavish-axi는 그냥 CLI 한 줄입니다. 저자는 이를 AXI라 부릅니다 — "어떤 유능한 에이전트든 설정 없이 실행할 수 있는 CLI. 스킬도 필요 없다. 에이전트는 써 보면서 배운다." 출력은 토큰 효율적인 TOON 포맷이고, 응답 안에 "다음에 뭘 해야 하는지"까지 적어 에이전트를 다음 단계로 안내합니다.
클라우드가 전혀 없습니다. 모든 게 127.0.0.1에서 돕니다. 더 중요한 건 원본 HTML을 거의 건드리지 않는다는 점입니다. 서버는 파일에 <script src="/sdk.js"> 태그 딱 하나만 끼워 넣습니다. 그래서 저장된 HTML을 서버 없이 그냥 브라우저로 열어도 똑같이 보입니다. "도구에 갇히지 않는다(no lock-in)"는 철학이 코드 수준에서 지켜집니다.
경쟁 도구가 "에이전트가 만든 걸 어떻게 보여줄까"에 머문다면, lavish-axi는 "사람이 그걸 보고 어떻게 되돌려줄까"를 푼다. 생성이 아니라 피드백의 왕복이 진짜 문제라는 통찰이 차별점이다.
lavish-axi는 화려한 프레임워크 더미가 아닙니다. 순수 JavaScript(ESM) + Express 서버 한 개로 된, 의외로 단출한 도구입니다. React도, 빌드된 프론트엔드 번들도 없습니다. 브라우저 UI("chrome"이라 부름)조차 서버가 렌더한 평범한 HTML + 바닐라 JS입니다. "작지만 단단하게" 만드는 법을 보여 주는 좋은 표본입니다.
| 항목 | 내용 |
|---|---|
| 언어 | 순수 JavaScript, ESM 전용("type":"module"). TS 소스는 없고 checkJs로 .js를 타입 검사 |
| 런타임 | Node.js 22+ (CI는 Node 24 · ubuntu/macOS/windows) |
| 테스트 | 내장 node:test + node:assert/strict (node --test). 8개 파일 약 2,542줄 |
| 빌드 | esbuild로 bin/lavish-axi.js → dist/cli.mjs 번들. 버전·텔레메트리 env를 빌드 타임에 인라인 |
| 패키지 매니저 | pnpm 11. minimumReleaseAge 7일 — 갓 나온 의존성 업데이트는 일주일 묵혔다 받는 공급망 안전장치 |
| 품질 | ESLint 10(flat config) + Prettier 3, release-please가 CHANGELOG·버전 자동 관리 |
| 패키지 | 역할 |
|---|---|
| axi-sdk-js | AXI 프레임워크의 뼈대. runAxiCli(TOON 직렬화 CLI), 에이전트별 SessionStart 훅 설치. "에이전트 친화적" 스토리 전체가 여기서 나옴 |
| express ^5 | 로컬 HTTP 서버 — 라우트 · JSON 바디 · 정적 자산 · SSE 스트림 |
| chokidar | 파일 감시 → 아티팩트 HTML이 바뀌면 브라우저 자동 새로고침(live reload) |
| open | 세션 URL을 시스템 브라우저로 띄움 |
| @tailwindcss/browser 4 | 옵션형 디자인 시스템. /design 경로에서 브라우저용 Tailwind v4 런타임 제공 |
| daisyui 5 | 같은 디자인 경로의 DaisyUI v5 CSS 컴포넌트 |
리뷰 에디터를 만들면서 프레임워크·상태관리·번들러 묶음을 끌어오지 않았다. 서버는 Express 하나, UI는 바닐라 JS, 테스트는 Node 내장 러너. 플랫폼(Node·브라우저)에 이미 있는 것을 최대한 쓴다는 절제가 코드 전반에 깔려 있다. "작은 도구"의 의존성 다이어트를 배우기 좋은 예다.
EventSource). WebSocket보다 가볍고 HTTP 위에서 동작한다. lavish-axi는 이걸로 "파일 변경됨 → 새로고침", "에이전트 답장 도착", "에이전트 작업 중" 같은 이벤트를 화면에 흘려보낸다.lavish-axi의 진짜 배울 점은 "에이전트 ↔ 사람 비동기 협업"을 단순한 부품으로 조립한 방식입니다. 핵심 흐름은 에이전트가 HTML을 쓴다 → CLI가 연다 → 사람이 코멘트를 단다 → CLI가 poll로 받아 고친다는 루프이고, 그 사이를 롱폴링 · SSE · postMessage · 파일감시라는 네 가지 검증된 웹 기술이 잇습니다.