BuilderIO/agent-native — 에이전트 애플리케이션을 만들기 위한 프레임워크

AI 요약

Agent-Native는 자율적으로 작업하는 에이전트와 이를 inspect, edit, approve, share할 수 있는 전용 UI를 함께 만드는 오픈소스 TypeScript 프레임워크입니다. 프레임워크의 핵심은 에이전트용 기능과 UI용 기능을 별도로 구현하지 않고, 각 기능을 하나의 action으로 정의하는 데 있습니다. 에이전트는 action을 tool처럼 사용하고, UI는 같은 action을 코드에서 호출합니다. 두 경로는 동일한 validation, permissions, implementation을 공유합니다.

■ 에이전트와 UI가 같은 action을 사용합니다

Agent-Native는 에이전트가 UI를 직접 클릭해 작업하도록 만들지 않습니다. 대신 UI와 에이전트가 모두 동일한 action layer를 통해 기능을 실행하도록 합니다. 이렇게 하면 에이전트가 호출한 작업과 사용자가 UI에서 수행한 작업이 같은 구현과 검증·권한 체계를 통과하게 됩니다. 문서에서는 이 구조를 shared actions로 설명하며, 하나의 capability가 agent tool과 UI 코드 호출 양쪽의 기반이 된다고 제시합니다.

예제로는 `actions/hello.ts`에 `defineAction`을 사용해 greeting 기능을 정의합니다. `zod`로 입력 schema를 선언하고, `name`은 문자열이며 기본값은 `world`가 되도록 설정합니다. action의 `description`은 “Return a friendly greeting.”으로 지정하고, `run` 함수는 `Hello, ${name}!` 형식의 메시지를 반환합니다. 이 action은 `http: { method: "GET" }` 설정도 가집니다. 에이전트는 이 기능을 `hello`라는 tool로 받고, React UI는 `useActionQuery("hello", { name: "Alex" })`로 같은 기능을 호출합니다. Agent-Native는 이 action을 HTTP, MCP, A2A, CLI를 통해서도 노출합니다.

■ 작업 데이터와 애플리케이션 상태를 공유합니다

프레임워크가 제안하는 두 번째 축은 shared data입니다. 에이전트가 수행한 작업은 UI에 나타나고, UI에서 수행한 작업은 에이전트가 사용할 수 있습니다. 따라서 에이전트의 결과를 별도 화면에서 확인하거나 다시 입력하는 대신, 같은 작업 공간 안에서 서로의 결과를 이어받을 수 있습니다.

shared application state를 통해 에이전트는 현재 UI의 관련 상태도 전달받습니다. 문서에서 예로 드는 상태는 현재 페이지, 선택된 레코드, 활성화된 뷰입니다. 에이전트가 사용자가 보고 있는 맥락과 분리된 텍스트 입력만 받는 것이 아니라, 애플리케이션 안에서 어떤 대상이 선택되어 있고 어떤 화면이 활성화되어 있는지에 접근하도록 구성하는 방식입니다.

■ 텍스트 입력을 넘어서는 에이전트 환경을 제공합니다

문서는 coding agent가 단순한 text box만으로 작업하지 않는다고 설명합니다. coding agent의 환경에는 context, tools, files, tests, previews가 있으며, 이를 통해 에이전트가 무엇을 할 수 있는지와 작업 결과를 확인할 수 있습니다. Agent-Native는 knowledge work에도 이와 같은 환경이 필요하다고 보고, UI가 에이전트의 능력을 보여주며 사람이 익숙한 방식으로 작업을 inspect, edit, approve, share할 수 있어야 한다고 제시합니다.

이 구조를 바탕으로 Agent-Native에는 agent chat 기능이 포함됩니다. 사용자는 같은 UI에서 작업을 위임하고 질문을 하며 결과를 검토할 수 있습니다. authentication and permissions로 shared work에 누가 접근하고 변경할 수 있는지 제어할 수 있으며, skills and memory로 에이전트에 재사용 가능한 전문성과 persistent context를 제공할 수 있습니다. automations는 일정이나 이벤트에 따라 에이전트 작업을 실행하도록 구성하며, agent teams는 같은 workspace 안의 전문 에이전트 또는 연결된 다른 에이전트에 작업을 위임하도록 합니다.

■ 개발과 운영에 필요한 구성 요소를 포함합니다

백엔드로는 production에서 PostgreSQL을 사용할 수 있고, 로컬 개발에서는 Nitro와 호환되는 호스트에서 PGlite를 사용할 수 있습니다. 사용자는 자신의 LLM, SQL database, tools, infrastructure를 가져와 구성할 수 있으며, 저장소는 빌드한 결과물이 사용자의 것으로 남는다고 설명합니다. 시작점은 `npx --yes @agent-native/core@latest create my-agent --standalone --template chat` 명령으로 제공됩니다. 이후 getting started guide와 framework guide를 따라 전체 구조와 사용법을 확인할 수 있습니다.

■ 예제 애플리케이션과 확장 방향을 제시합니다

저장소는 프레임워크를 적용한 에이전트 예제도 함께 제공합니다. Clips는 회의·화면·음성 메모를 기록하고 이해하며, Design은 대화형 디자인을 생성하고 다듬습니다. Slides는 브랜드에 맞는 프레젠테이션을 만들고 편집하고, Analytics는 데이터에 질문하고 대시보드를 구성합니다. Calendar는 시간 확인과 일정·예약 관리를 지원하며, Prioritize는 이메일 우선순위 지정과 답장 초안 작성 및 후속 조치를 다룹니다.

이 밖에도 Assets는 브랜드 미디어를 만들고 정리하고, Content는 콘텐츠를 작성·정리·게시하며, Plans는 다이어그램·와이어프레임·프로토타입을 포함한 시각적 계획을 만들고 검토합니다. 사용자는 이 예제 중 하나에서 시작하거나 앱 갤러리를 살펴본 뒤 자신의 애플리케이션에 맞게 활용할 수 있습니다. 저장소는 문서와 Discord 커뮤니티를 안내하며, 저장소 자체를 수정하는 경우에는 로컬 설정과 workspace 구조, guard scripts를 설명하는 `DEVELOPMENT.md`를 확인하도록 합니다. 라이선스는 MIT입니다.

원문: GitHub / 번역·요약: Trawling