A walkthrough of A2UI's client-side functions in the genui package for Flutter, showing how an LLM agent can delegate deterministic operations like arithmetic to local Dart code instead of computing them itself. The pattern is demonstrated with a CalculateCostFunction class in a sample kitchen assistant app called Commis, covering catalog registration, system prompt integration, and how Gemini emits A2UI messages invoking the function to render accurate, low-latency results with support for Flutter Hot Reload during development.
Table of contents
What client-side functions solveAnatomy of the CalculateCostFunction classCatalog registration and System prompt integrationFast developer iteration with Flutter Hot ReloadSummary and next stepsQuestions this post answers
How do I create a client-side function in Flutter's genui package so an LLM agent can call local Dart code instead of computing values itself?
Extend SynchronousClientFunction and implement name, description, returnType, argumentSchema (built with json_schema_builder), and executeSync. Register the instance in the functions list of your GenUI Catalog alongside UI components. The genui PromptBuilder automatically extracts the function's name, description, and schema into the system prompt so the LLM can emit an A2UI call with matching arguments, which the SurfaceController evaluates locally via executeSync. Developers building agentic Flutter apps can track GenUI and A2UI patterns like this on daily.dev.
Why should math and calculations be handled by client-side code instead of an LLM in an agentic app?
Offloading arithmetic to on-device Dart code avoids the latency of round-tripping prompts to an LLM, reduces token consumption, and eliminates errors since LLMs aren't reliably designed for precise arithmetic. In a Flutter GenUI example, a CalculateCostFunction computes ingredient costs synchronously and returns a formatted dollar string rendered immediately, rather than asking Gemini to guess the total. Anyone weighing LLM-driven versus local computation can follow practical patterns like this via daily.dev.
1 Comment
Share this post