Agent-Native: 자율 에이전트와 React UI를 단일 액션 계층으로 통합하는 TypeScript 프레임워크

웹 빌더 플랫폼 기업 빌더아이오(Builder.io)가 자율 AI 에이전트와 목적별 사용자 인터페이스(UI)를 하나의 코드베이스에서 유기적으로 결합하는 오픈소스 TypeScript 애플리케이션 프레임워크 'Agent-Native'를 공개했습니다. MIT 라이선스로 배포되는 이 프로젝트는 2026년 9월 기준 GitHub 스타 6,350개 이상(6,353개)과 포크 570개 이상을 기록하며 개발자 커뮤니티에서 활발한 주목을 받고 있습니다.

이미지 출처: Builder.io / GitHub

기존의 에이전트 애플리케이션은 화면 밖에서 백그라운드 작업만 수행하거나, 복잡한 사용자 인터페이스를 다루기 위해 가상 브라우저를 띄워 DOM 요소를 직접 클릭하는 불안정한 컴퓨터 조작(Computer Use) 방식에 의존하는 경우가 많았습니다. Agent-Native는 이러한 분절을 해소하기 위해 프론트엔드 React 컴포넌트와 자율 에이전트 도구가 하나의 통일된 '액션(Action)' 계층을 공유하도록 설계된 개발 도구입니다.

defineAction 기반의 단일 액션 정의와 다중 프로토콜 노출

Agent-Native의 핵심 설계 사상은 '단일 정의, 다중 소비'입니다. 개발자가 애플리케이션의 비즈니스 로직과 기능 단위를 defineAction 함수를 통해 한 번 작성해 두면, 시스템 내의 다양한 주체가 동일한 액션을 각자의 방식으로 즉시 활용할 수 있습니다.

• 에이전트 도구(Tool) 자동 변환: 백그라운드에서 추론을 수행하는 LLM 에이전트는 정의된 액션을 호출 가능한 도구(Tool) 명세로 자동 인식하여 필요한 작업을 자율적으로 트리거합니다.
• React UI 직접 호출: 프론트엔드 인터페이스에서는 useActionQuery와 같은 전용 React 훅을 통해 해당 액션을 컴포넌트 내부에서 일반적인 비동기 함수나 상태 질의처럼 직접 실행합니다.
• 다양한 프로토콜 및 인터페이스 지원: 동일한 액션 로직이 표준 HTTP 엔드포인트뿐만 아니라 모델 컨텍스트 프로토콜(MCP, Model Context Protocol), 에이전트 간 통신(A2A, Agent-to-Agent), 터미널 CLI 환경으로 동시에 노출됩니다.

이러한 구조 덕분에 개발자는 에이전트용 도구 API와 사용자 화면용 REST/GraphQL 엔드포인트를 이중으로 작성하고 유지보수할 필요 없이, 단일 액션 선언만으로 UI와 AI 제어 루프를 완전히 동기화할 수 있습니다.

DOM 조작을 대체하는 상태·데이터 공유: PGlite와 PostgreSQL 연동

Agent-Native가 기존의 컴퓨터 사용(Computer Use)이나 UI 자동화 에이전트와 가장 크게 차별화되는 지점은 인터랙션의 방식입니다.

웹 브라우저의 DOM 트리를 파싱해 가상 마우스로 버튼을 클릭하거나 텍스트 입력을 흉내 내는 방식은 화면 레이아웃이 조금만 바뀌어도 쉽게 깨지는 취약점을 안고 있습니다. Agent-Native는 이 대신 정형화된 액션 계층을 통해 에이전트와 UI가 데이터 및 런타임 애플리케이션 상태를 직접 상호 공유하도록 구축되었습니다.

• 공유 상태(Application State): 사용자가 현재 머물고 있는 활성 페이지, 테이블에서 선택한 특정 레코드, 폼의 편집 상태 등이 액션 계층을 통해 에이전트의 컨텍스트로 실시간 반영됩니다.
• 데이터베이스 동기화: 로컬 개발 단계에서는 브라우저 및 Node.js/WASM 환경에서 가볍게 동작하는 내장형 데이터베이스인 PGlite를 활용하여 빠른 프로토타이핑이 가능합니다.
• 프로덕션 환경 확장: 정식 운영 단계에서는 표준 PostgreSQL 백엔드와 연결되어 대규모 트랜잭션과 데이터 영속성을 안정적으로 보장합니다.

사용자가 화면에서 특정 데이터를 선택하면 에이전트가 그 상태를 즉각 인지하고, 에이전트가 액션을 통해 데이터베이스 레코드를 갱신하면 React UI가 추가적인 브라우저 리로드 없이 실시간으로 최신 상태를 렌더링합니다.

빠른 시작을 위한 CLI 스타터와 아키텍처 도입 시 고려사항

Agent-Native는 새로운 프로젝트를 신속하게 스캐폴딩할 수 있는 단일 CLI 스타터 명령어를 공식 제공합니다. 터미널에서 다음 명령어를 실행하면 대화형 챗 템플릿이 포함된 독립 실행형 프로젝트를 곧바로 구성할 수 있습니다.

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

이 스타터를 통해 개발자는 액션 정의 예제와 React UI 컴포넌트, PGlite 기반 로컬 저장소가 사전에 구성된 베이스라인 환경을 수분 내에 마련할 수 있습니다.

다만 실제 프로젝트에 Agent-Native를 도입할 때는 프레임워크의 특성에 따른 몇 가지 기술적 경계를 염두에 두어야 합니다.

• Computer Use와의 차이점: Agent-Native는 임의의 서드파티 웹사이트나 데스크톱 화면을 외부에서 시각적으로 조작하는 에이전트 도구가 아닙니다. 애플리케이션 자체가 Agent-Native의 액션 규약과 상태 관리 모델에 맞춰 설계되어야 하므로 신규 앱 개발이나 전면적인 아키텍처 통합에 적합합니다.
• 인프라 호환성: 로컬 프로토타입 환경은 PGlite로 손쉽게 구동되지만, 실제 운영 배포 단계에서는 외부 PostgreSQL 인스턴스와 함께 Nitro 호환 런타임 호스팅 환경을 구성하는 것이 권장됩니다.

출처

• GitHub: BuilderIO/agent-native Repository