Custom UI (A2UI)
Flow-Like supports A2UI (Agent-to-User Interface), an open protocol created by Google that enables rich, structured user interfaces to be generated dynamically.
What is A2UI?
Section titled “What is A2UI?”A2UI is a JSON-based format for describing user interfaces. It defines pages (full-screen layouts) and widgets (reusable components) that can be rendered into beautiful, interactive UIs.
The key insight: the same JSON format that AI agents produce can also be created by humans using a visual builder.
Two Ways to Build
Section titled “Two Ways to Build”1. Visual Drag-and-Drop Builder
Section titled “1. Visual Drag-and-Drop Builder”Flow-Like provides a visual interface builder where you can:
- Drag and drop components onto a canvas
- Configure each component’s properties visually
- Preview your interface in real-time
- Connect to your Flows for dynamic data
No coding required—perfect for designers and non-technical users who want full control over their interfaces.
See Pages and Widgets for detailed guides on using the visual builder.
2. AI-Generated Interfaces
Section titled “2. AI-Generated Interfaces”Connect an AI agent to your Flow, and it can generate A2UI interfaces on-the-fly:
- Dynamic layouts that adapt to context
- Personalized content based on user data
- Conversational UI that evolves with the interaction
Both approaches output the same A2UI JSON format, so you can mix and match—start with a template you designed, let AI customize it, then refine it visually.
Core Concepts
Section titled “Core Concepts”Pages are full-screen layouts specific to your app. Each page:
- Has a unique URL path via Routes
- Contains components arranged in a layout
- Can bind to flow data for dynamic content
- Supports different layout types (Grid, Stack, Sidebar)
Widgets
Section titled “Widgets”Widgets are reusable UI components that can be shared:
- Build once, use across multiple pages
- Configure with customization options per instance
- Version and share within your organization
Routes
Section titled “Routes”Routes map URL paths to pages or events:
- Define navigation structure for your app
- Support deep linking to specific content
- Can trigger events for API endpoints
Supported Components
Section titled “Supported Components”Flow-Like supports a comprehensive set of A2UI components:
| Category | Components |
|---|---|
| Layout | Row, Column, Stack, Grid, ScrollArea, AspectRatio, Overlay, Absolute |
| Display | Text, Image, Icon, Video, Markdown, Divider, Badge, Avatar, Progress, Spinner, Skeleton, Lottie, Iframe, PlotlyChart |
| Interactive | Button, TextField, Select, Slider, Checkbox, Switch, RadioGroup, DateTimeInput, FileInput, ImageInput, Link |
| Container | Card, Modal, Tabs, Accordion, Drawer, Tooltip, Popover |
| Game/Visual | Canvas2D, Sprite, Shape, Scene3D, Model3D, Dialogue, CharacterPortrait, ChoiceMenu, InventoryGrid, HealthBar, MiniMap |
For a complete reference, see A2UI Components.
When to Use What
Section titled “When to Use What”| Use Case | Recommendation |
|---|---|
| Simple chat responses | Use the Chat UI |
| Rich dashboards | Use Pages with data bindings |
| AI-generated reports | Use A2UI with AI generation |
| Interactive forms | Use Pages with form components |
| Reusable UI patterns | Create Widgets |
| Multi-page apps | Use Pages + Routes |
Getting Started
Section titled “Getting Started”Create a Page
Section titled “Create a Page”- Open your app in Flow-Like
- Click the gear icon (⚙️) → Pages & Routes
- Create a new page or open the Page Builder
- Design your interface with drag-and-drop
Set Up Routing
Section titled “Set Up Routing”- In Pages & Routes, switch to the Routes tab
- Click Add Route
- Define the path and select your page as the target
- Mark one route as default (home page)
Connect to Data
Section titled “Connect to Data”- In the Page Builder, select a component
- Find Data Binding in the properties panel
- Choose a path from your flow’s data
- The component displays live data when running
Human + AI Collaboration
Section titled “Human + AI Collaboration”The real power of A2UI in Flow-Like is combining human creativity with AI capabilities:
- Design a template using the visual builder
- Mark sections as dynamic where AI can fill in content
- Connect to an AI Flow that provides personalized data
- Users see a polished interface with relevant content
This gives you:
- Consistent branding - You control the design
- Dynamic content - AI personalizes for each user
- Maintainability - Update templates, AI adapts
AI-Powered Interface Generation
Section titled “AI-Powered Interface Generation”Don’t want to design from scratch? Use AI to generate A2UI interfaces instantly:
FlowPilot (Built-in)
Section titled “FlowPilot (Built-in)”Flow-Like includes FlowPilot, an integrated AI assistant that can generate A2UI interfaces directly within the app. Simply describe what you want and FlowPilot creates the components for you—no copy-pasting required.
- Context-aware - FlowPilot understands your app’s data and existing pages
- Interactive - Refine and iterate on designs through conversation
- Integrated - Generated UI appears directly in the page builder
ChatGPT Frontend Builder (External)
Section titled “ChatGPT Frontend Builder (External)”We also provide a free FlowLike Frontend Builder GPT for generating A2UI JSON outside of Flow-Like.
Example prompts:
- “Create a login form with email, password, and remember me checkbox”
- “Build a dashboard with 4 stat cards and a line chart”
- “Make a pricing page with 3 tier cards (Free, Pro, Enterprise)”
- “Create a user profile card with avatar, name, and edit button”
The GPT outputs JSON that you can paste directly into Flow-Like’s page builder.
Styling Rules
Section titled “Styling Rules”The generator uses shadcn/ui theme tokens for automatic dark/light mode support:
- Preferred:
bg-background,text-foreground,bg-primary,text-muted-foreground - Also allowed: Hardcoded colors (
bg-red-500) when you request specific colors