Persona.js

Persona.js란?

Persona는 순수 JavaScript를 사용하여 모든 웹사이트에 임베드할 수 있는 경량 오픈소스 AI 채팅 UI 라이브러리입니다. React 기반 채팅 프레임워크와 달리 Persona는 프레임워크에 구애받지 않고, 백엔드에 종속되지 않으며, WebMCP를 기본 지원하여 어시스턴트가 부모 페이지에서 노출하는 도구를 발견하고 실행할 수 있습니다. 프론트엔드를 재구축하거나 맞춤형 API를 작성하지 않고도 스트리밍 채팅, 음성, 테마 및 인터랙티브 코파일럿 경험을 추가할 수 있습니다.

대상 사용자

• 프론트엔드 개발자: 스택을 다시 작성하거나 새 프레임워크를 배우지 않고도 모든 웹사이트에 AI 어시스턴트를 추가하려는 분
• 제품 팀: 검색, 장바구니, 예약 또는 양식과 같은 페이지 도구를 직접 작동해야 하는 에이전트 경험을 출시하는 분
• 스타트업 및 인디 빌더: 모든 백엔드 및 모든 호스팅 설정과 함께 작동하는 빠르고 임베드 가능한 채팅 UI를 찾는 분

주요 기능

세 가지 레이아웃 모드

Persona는 플로팅, 도킹 또는 전체 화면 UX를 제공합니다. 지원을 위한 코너 런처, 레이아웃 크기를 조정하는 사이드 코파일럿, 또는 페이지를 완전히 차지하는 전체 높이 어시스턴트 간에 전환할 수 있습니다. 단일 launcher 구성 값을 변경하기만 하면 됩니다.

WebMCP 기본 도구 실행

페이지 작업, 검색, 장바구니, 예약 및 양식을 WebMCP 도구로 노출합니다. 에이전트는 내장된 사용자 승인과 함께 이를 직접 구동하므로 도구 발견 및 실행을 위한 백엔드 통합이 필요하지 않습니다.

Shadow DOM 격리

Shadow DOM 렌더링과 접두사가 붙은 CSS는 위젯과 호스트 스타일을 완전히 분리합니다. Persona를 모든 페이지에 드롭하면 아무것도 새거나 들어오지 않아 기존 디자인 시스템을 보존합니다.

플러그형 스트리밍 전송

플러그형 파서를 사용한 SSE 스트리밍은 customFetch 및 parseSSEEvent를 사용하여 모든 요청 또는 이벤트 형태에 적응합니다. 이는 서버 전송 이벤트를 지원하는 모든 백엔드에서 작동합니다.

차별점

Persona는 브라우저를 단순한 표시 표면이 아닌 일급 런타임으로 취급하는 최초의 에이전트 UI 라이브러리입니다.

대부분의 채팅 UI는 수동적입니다. 텍스트를 표시하고 API 응답을 기다립니다. Persona는 에이전트를 페이지의 능동적인 참여자로 만들어 이를 뒤집습니다. 부모 페이지에서 노출하는 도구를 발견하고, 사용자 승인과 함께 실행하며, 실시간으로 응답을 스트리밍합니다. 즉, 어시스턴트가 문서를 검색하고, 장바구니에 항목을 추가하거나, 예약 양식을 작성할 수 있으며, 이러한 작업을 위한 단일 백엔드 엔드포인트를 작성할 필요가 없습니다.

확인해볼 가치가 있는 경우…

정적 HTML 페이지에서 최신 SPA에 이르기까지 모든 웹사이트에 AI 어시스턴트를 추가하려는 경우, 새 프레임워크를 채택하거나 프론트엔드를 재구축하지 않고도 가능합니다. 모든 백엔드에서 작동하는 스트리밍 채팅, 음성, 테마 및 에이전트 도구 사용이 필요하다면, Persona는 몇 줄의 코드로 프로덕션 준비가 완료된 솔루션을 제공합니다.