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

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

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

Transcript

1. Daegu, 대구경북 박제창 GDE Dart-Flutter, GDG Golang Korea Flutter Seoul Flutter Agent App A to Z 1
2. Gemini 3 • Gemini 3 Pro ◦ gemini-3-pro-preview • Gemini 3 Flash ◦ gemini-3-flash-preview 2
3. https://docs.flutter.dev/ai/create-with-ai 3
4. 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. 4
5. https://pub.dev/packages/genui 5
6. 1. 주요 변경 및 파괴적 변경 (Breaking Changes) • 클래스 명칭 변경: GenUiManager → A2uiMessageProcessor (역할 명확화) • 설정 단순화: GenUiConfiguration, ActionsConfig 제거 및 구조 최적화 • 카탈로그 체계 개편: 단일 Catalog에서 (복수 카탈로그 ) 수용 방식으로 변경 2. 핵심 신규 기능 (New Features) • 멀티 카탈로그 (Multi-Catalog) 지원: ◦ A2uiMessageProcessor에서 여러 개의 카탈로그를 동시에 처리 가능 ◦ UiDefinition에 catalogId 속성 추가 (각 UI 서피스별 카탈로그 지정 가능) • 표준화: standardCatalogId 상수를 공통 상수로 분리하여 접근성 향상 Genui 0.6 6
8. A2UI A Protocol for Agent-Driven Interfaces • https://github.com/goog le/A2UI • https://a2ui.org/ 8
10. 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 10
11. 11 https://a2ui.org/#how-it-works
12. 12 https://a2ui-composer.ag-ui.com/
13. 13 https://a2ui-composer.ag-ui.com/gallery
14. 핸즈온 진행방법 리포지토리 1. https://github.com/JAICHANGPARK/de vfest-2025-daegu 2. https://github.com/JAICHANGPARK/de vfest-2025-daegu/tree/main/docs 14
16. 핸즈온 진행방법 3. Gemini API 키 준비 4. 새로운 Flutter 프로젝트를 생성 5. 프로젝트 의존성 설정, 라이브러리 추가 5. Docs 폴더 내부의 step 별로 진행 6. 진행 중 모르는 내용은 질문해주세요 . 16
17. Flutter genui Key Point! 1. 생성 스키마 정의 a. 최대한 상세하게 2. 위젯 정의 a. AI가 반환하는 정보를 화면에 보여줄 위젯 b. 어떤 위젯을 사용해서 보여줄 것인가 3. 시스템 프롬프트 ! 17
18. Daegu, 대구경북 박제창 @jaichangpark Thanks 18