에이전트 UI를 위한 스트리밍 실행 프로토콜로서의 마크다운

한 개발자가 마크다운을 통합 프로토콜로 사용하여 생성형 UI와 코드 실행을 AI 에이전트에 결합하는 방법을 탐구하는 프로토타입을 구축했습니다. 이 시스템은 텍스트, 실행 가능한 코드, 데이터를 단일 응답으로 스트리밍하며, 코드는 도착하는 대로 점진적으로 실행됩니다.

프로토콜: 세 가지 블록 유형을 가진 마크다운

이 접근 방식은 LLM이 이미 이해하는 표준 마크다운 구문을 사용하여 새로운 형식을 가르칠 필요를 없앱니다. 세 가지 블록 유형을 정의합니다:

• 텍스트 블록: 사용자에게 스트리밍되는 일반 마크다운 서식
• 코드 펜스: ```tsx agent.run은 지속적인 컨텍스트에서 서버에서 TypeScript/JSX 코드를 실행합니다
• 데이터 펜스: ```json agent.data => "id"는 JSON 데이터를 UI 컴포넌트로 스트리밍합니다

이러한 블록은 단일 응답 내에서 어떤 순서로든 인터리빙될 수 있습니다. 파서는 LLM에서 토큰이 도착하는 대로 이를 점진적으로 처리합니다.

스트리밍 실행

코드는 LLM이 생성하는 대로 문장별로 실행되며, 전체 코드 펜스가 닫히기를 기다리지 않습니다. 이를 통해 API 호출이 시작되고, UI가 렌더링되며, 오류가 표면화될 수 있습니다. 개발자는 bun-streaming-exec를 구축하여 이를 처리했으며, 스트리밍 실행이 표준 런타임 프리미티브가 아니기 때문에 vm.Script와 사용자 정의 래핑을 사용합니다.

mount() 프리미티브를 사용한 에이전트 UI

이 시스템은 UI 생성을 위해 React를 사용합니다. LLM이 React 컴포넌트와 JSX에 광범위하게 노출되어 있기 때문입니다. 핵심 프리미티브는 mount()입니다:

mount({
  ui: () => <Card>Hello from the agent!</Card>
});

LLM이 이 코드를 생성하고 서버가 실행하면, mount()는 React 컴포넌트를 직렬화하여 채팅 인터페이스 내에서 렌더링하기 위해 클라이언트로 전송합니다.

데이터 흐름 패턴

이 프로토타입은 데이터 이동을 위한 네 가지 구별된 패턴을 구현합니다:

1. 클라이언트 → 서버 (폼): 에이전트는 폼을 통해 사용자 입력을 기다릴 수 있습니다
2. 서버 → 클라이언트 (스트리밍 데이터): 데이터 펜스는 JSON을 마운트된 UI로 직접 스트리밍합니다
3. 서버 → LLM (console.log): console.log 출력 및 예외는 새로운 턴으로 LLM에 피드백됩니다
4. LLM → 서버 → 클라이언트 (완전한 왕복): LLM이 데이터를 가져오고 해당 데이터로 UI를 렌더링하는 코드를 생성하는 완전한 주기

피드백 루프

이 시스템은 에이전트가 스스로와 대화하기 위한 메커니즘으로 console.log를 사용합니다. LLM이 코드 블록이 있는 마크다운을 생성하면, 텍스트는 사용자에게 스트리밍되는 동안 코드는 점진적으로 실행됩니다. console.* 출력이나 예외는 새로운 턴으로 LLM에 피드백됩니다. 출력이나 예외가 없으면 시스템은 새로운 사용자 쿼리를 기다립니다.

이를 통해 에이전트는 메시지 수를 확인하거나 진행하기 전에 사용자 입력을 기다리는 등 자신의 실행에 반응할 수 있습니다.