Agentic apps, part 2 | Observable Flutter
- Flutter에서 에이전트 앱 구축 캠페인의 2부로, 기존 색상 선택 앱을 이미지 생성 및 표시 앱으로 변경하는 코드 수정 작업을 진행합니다. 🛠️
- 사용자가 뉴스 헤드라인을 선택하면, LLM이 해당 헤드라인에서 영감을 받은 이미지를 생성하여 앱에 표시하는 새로운 기능을 구현합니다. 🖼️
- 공개된 스타터 키트를 활용하여 시스템 프롬프트와 도구를 수정함으로써 에이전트의 기능을 재정의합니다. ⚙️
- Gemini Code Assist와 같은 AI 도구를 사용하여 코드를 생성하되, 개발자가 직접 코드를 검토하고 수정하는 "vibe coding adjacent" 방식을 채택합니다. 🤖
- 단순한 색상 선택에서 '뉴스 가져오기 → 헤드라인 선택 → 이미지 생성'으로 이어지는 복잡한 다단계 작업을 LLM이 관리하도록 지시합니다. 🪜
fetch_news (원시 RSS 데이터 반환), pick_favorite_headline (선택된 헤드라인 반환), show_image (이미지 표시)와 같은 새로운 도구들을 정의하고 그 상호작용을 탐구합니다. 🔗
- 도구가 LLM에게 데이터를 반환하는 방식과 UI에 직접적인 부작용을 일으키는 방식의 차이를 심층적으로 다룹니다. ↔️
- 생성된 이미지의 바이트를 디코딩하여 화면에 표시하는 기술적 구현과, 이를 도구 호출에 어떻게 전달할지에 대한 고민이 있습니다. 📸
- LLM이 대화 기록과 도구 응답을 기반으로 현재 작업 단계를 스스로 판단하고 다음 단계를 진행하도록 지시하는 것이 중요합니다. 🧠
- 시스템 프롬프트가 앱의 가장 핵심적인 부분임을 강조하며, 새로운 다단계 작업을 수용하도록 프롬프트 내용을 상세하게 재작성합니다. 📝
데브허브 | DEVHUB | Agentic apps, part 2 | Observable Flutter