ADK-Rust

A2UI 빠른 시작 (ADK-UI)

이 가이드에서는 ADK 에이전트에서 A2UI JSONL을 생성하고 React 렌더러로 렌더링하는 방법을 설명합니다.

1) 종속성 추가

[dependencies]
adk-ui = { git = "https://github.com/zavora-ai/adk-ui" }
adk-agent = "2.1.0"
adk-model = "2.1.0"

React 렌더러:

npm install @zavora-ai/adk-ui-react

2) UI 도구 활성화

use adk_agent::LlmAgentBuilder;
use adk_ui::UiToolset;

let tools = UiToolset::all_tools();
let mut builder = LlmAgentBuilder::new("a2ui_agent")
    .instruction(
        "You output A2UI via render_screen (screens), render_page (pages), and render_kit (kits).",
    );

for tool in tools {
    builder = builder.tool(tool);
}

let _agent = builder.build()?;

3) 프롬프트 → A2UI JSONL

에이전트에 프롬프트를 입력합니다.

Create a login screen with email, password, and a primary Sign In button.

모델은 render_screen을 호출하고 JSONL을 반환합니다.

{"createSurface":{"surfaceId":"main","catalogId":"zavora.ai:adk-ui/default@0.1.0","sendDataModel":true}}
{"updateComponents":{"surfaceId":"main","components":[{"id":"root","component":"Column",...}]}}

4) React에서 JSONL 렌더링

import {
  A2uiStore,
  A2uiSurfaceRenderer,
  applyParsedMessages,
  parseJsonl,
} from "@zavora-ai/adk-ui-react";

const store = new A2uiStore();

export function App({ jsonl }: { jsonl: string }) {
  const parsed = parseJsonl(jsonl);
  applyParsedMessages(store, parsed);

  return (
    <A2uiSurfaceRenderer
      store={store}
      surfaceId="main"
      onAction={(payload) => {
        console.log("A2UI action:", payload);
      }}
    />
  );
}

5) 다음 단계

  • render_page을 사용하여 여러 섹션으로 구성된 페이지를 생성합니다.
  • render_kit을 사용하여 카탈로그 + 토큰 + 템플릿을 생성합니다.
  • examples/ui_working/ 아래에서 작동하는 UI 예제를 확인합니다.