エージェントレンダリングプロトコル

課題 ​

AIエージェントはテーブル、フォーム、チャート、ステータスメッセージ、コードブロックといった構造化された出力を生成します。しかし、その出力のレンダリングはトランスポートとフロントエンドフレームワークに密結合されています。Webチャット向けに構築されたエージェントはデスクトップアプリでレンダリングできません。SSEストリームを使うエージェントは、別のプロトコルを期待するモバイルクライアントにサービスを提供できません。

新しいレンダリングサーフェスごとに、カスタムの統合コードが必要になります。

解決策 ​

ARPはプロトコルを定義します — フレームワークでも、ライブラリでもありません。Waylandがアプリケーションをディスプレイサーバーからデカップリングしたように、ARPはエージェントをレンダラーからデカップリングします。

エージェントは何を表示するかを決定します。レンダラーはどのように表示するかを決定します。

Agent (backend)                              Renderer (web, CLI, mobile)
───────────────                              ──────────────────────────
Owns surfaces         ── render / delta ──►  Owns display
Owns UI state         ◄── input events ────  Owns input routing

設計原則 ​

プロトコルメッセージ ​

すべてのARPメッセージは、最低限 { v: 1, type: "<type>" } を持つJSONです。

14の組み込みコンポーネント ​

ARP準拠のレンダラーは最低限 text をサポートしなければなりません。コンポーネントはフォールバックチェーンを宣言します — chart は table にフォールバックし、table は text にフォールバックします。

トランスポート ​

クライアントSDK ​

import { ArpClient } from '@haira/arp'

const client = new ArpClient('ws://localhost:8080/_arp/v1', {
  onDelta: (text) => appendToChat(text),
  onRender: (event) => renderComponent(event.component, event.props),
  onDone: () => markStreamComplete(),
})

client.connect()
client.sendText('Show me the sales data')

import { ArpChat } from '@haira/arp-react'

function App() {
  return (
    <ArpChat
      url="ws://localhost:8080/_arp/v1"
      theme="dark"
      title="Data Explorer"
    />
  )
}

Vue 3向けの @haira/arp-vue と、Goバックエンド向けの github.com/haira-lang/arp-go も提供しています。

Haira統合 ​

すべてのHairaサーバーはネイティブでARPを話します。設定は不要です。

import "ui"

tool query_database(query: string) -> any {
    """Executes a SQL query and displays results."""
    rows, err = postgres.query(db, query)
    if err != nil {
        return ui.status_card("error", "Query Failed", conv.to_string(err))
    }
    return ui.table("Query Results", headers, rows)
}

agent DataExplorer {
    provider: OpenAI
    tools: [query_database]
    ui: ui
}

@webhook("/chat")
workflow Chat(message: string, session_id: string) -> stream {
    return DataExplorer.stream(message, session: session_id)
}

拡張ライフサイクル ​

新しいコンポーネントは、Waylandにインスパイアされた3フェーズのライフサイクルに従います：

適合レベル ​