DevFest Daegu 2025 - Flutter Agent App A to Z with Gemini, GenUI, A2UI 박제창

핸즈온 세션 자료
Flutter Agent App A to Z with Gemini, GenUI

2025 DevFest - 대구경북 개발자들과 한해를 회고하며 기술 온도를 측정합니다
https://event-us.kr/gdgdaegu/event/115425

1. Daegu, 대구경북 박제창 GDE Dart-Flutter, GDG Golang Korea Flutter Seoul Flutter Agent App A to Z 1
3. Gemini 3 • Gemini 3 Pro ◦ gemini-3-pro-preview • Gemini 3 Flash ◦ gemini-3-flash-preview 3
4. https://docs.flutter.dev/ai/create-with-ai 4
5. genui the GenUI SDK for Flutter is an orchestration layer. This suite of packages coordinates the flow of information between your user, your Flutter widgets, and an AI agent, transforming text-based conversations into rich, interactive experiences. 5
6. https://pub.dev/packages/genui 6
7. 1. 주요 변경 및 파괴적 변경 (Breaking Changes) • 클래스 명칭 변경: GenUiManager → A2uiMessageProcessor (역할 명확화) • 설정 단순화: GenUiConfiguration, ActionsConfig 제거 및 구조 최적화 • 카탈로그 체계 개편: 단일 Catalog에서 (복수 카탈로그 ) 수용 방식으로 변경 2. 핵심 신규 기능 (New Features) • 멀티 카탈로그 (Multi-Catalog) 지원: ◦ A2uiMessageProcessor에서 여러 개의 카탈로그를 동시에 처리 가능 ◦ UiDefinition에 catalogId 속성 추가 (각 UI 서피스별 카탈로그 지정 가능) • 표준화: standardCatalogId 상수를 공통 상수로 분리하여 접근성 향상 Genui 0.6 7
9. Protocol 9
11. 11 https://a2a-protocol.org/latest/
12. A2UI A Protocol for Agent-Driven Interfaces • https://github.com/goog le/A2UI • https://a2ui.org/ 12
14. How It Works 1. User sends a message to an AI agent 2. Agent generates A2UI messages describing the UI (structure + data) 3. Messages stream to the client application 4. Client renders using native components (Angular, Flutter, React, etc.) 5. User interacts with the UI, sending actions back to the agent 6. Agent responds with updated A2UI messages 14
15. 15 1. 사용자가 AI 에이전트에게 메시지를 보냅니다. 2. 에이전트는 UI(구조 및 데이터)를 정의하는 A2UI 메시지를 생성합니다 . 3. 메시지가 클라이언트 애플리케이션으로 스트리밍됩니다 . 4. 클라이언트는 네이티브 컴포넌트(Angular, Flutter, React 등)를 사용하여 UI를 렌더링합니다 . 5. 사용자가 UI와 상호작용하면 , 해당 액션이 에이전트로 다시 전송됩니다 . 6. 에이전트는 업데이트된 A2UI 메시지로 응답합니다 .
16. 16 https://a2ui.org/#how-it-works
17. 17 https://a2ui-composer.ag-ui.com/
18. 18 https://a2ui-composer.ag-ui.com/gallery
19. 핸즈온 진행방법 리포지토리 1. https://github.com/JAICHANGPARK/de vfest-2025-daegu 2. https://github.com/JAICHANGPARK/de vfest-2025-daegu/tree/main/docs 19
21. 핸즈온 진행방법 3. Gemini API 키 준비 4. 새로운 Flutter 프로젝트를 생성 5. 프로젝트 의존성 설정, 라이브러리 추가 5. Docs 폴더 내부의 step 별로 진행 6. 진행 중 모르는 내용은 질문해주세요 . 21
22. Flutter genui Key Point! 1. 생성 스키마 정의 a. 최대한 상세하게 2. 위젯 정의 a. AI가 반환하는 정보를 화면에 보여줄 위젯 b. 어떤 위젯을 사용해서 보여줄 것인가 3. 시스템 프롬프트 ! 22
23. Daegu, 대구경북 박제창 @jaichangpark Thanks 23