An AI agent’s interface should help users understand its actions, inspect changes, and intervene when necessary. A conversational interface alone cannot provide all of that visibility.
In a talk on familiar UI patterns in AI agents, Gracie, a community intern at RapidNative, explores how established interface patterns apply to agent experiences.
For frontend developers, these patterns offer practical starting points for building clearer interactions.
1. Show Observable Progress
“Thinking…” communicates little about an agent’s actual activity.
More useful updates describe observable operations:
- Reading the project’s configuration.
- Preparing changes to two components.
- Running validation.
- Waiting for approval.
These updates should reflect execution status, rather than invent explanations of the model’s internal reasoning. A failed or stalled operation should also be visible.
2. Make Changes Inspectable
An activity log should distinguish between reading, editing, creating, and deleting a resource.
“Updated three files” is a summary. Users still need access to the affected files and their diffs to assess the changes.
A useful entry connects the action to its purpose: “Updated the sign-in component to display validation errors.” File counts and line counts alone do not establish correctness.
3. Make Permissions Specific
An “Allow” button needs enough context for an informed decision.
Before an agent uploads a file, for example, the interface should identify the file, its destination, and whether approval covers this action alone or future uploads too.
Labels such as “Upload selected files” communicate more than “Continue.” Visual warnings can reinforce the message, but should not replace clear language.
4. Use Structured Controls Where They Help
Chat works well for expressing intent. Cards, forms, and tables can work better for reviewing options.
A travel assistant could accept a conversational request and display flight options with consistent fields for departure time and price.
The application remains responsible for validating agent-generated data and handling missing fields or unsupported actions before presenting actionable controls.
5. Separate Stopping From Undoing
A stop button should explain what it can interrupt.
Stopping an agent may prevent its next operation without reversing a request already accepted by another service. Cancelling pending work and undoing completed work are separate capabilities.
For actions that are difficult to reverse, a preview and explicit approval step can give users control before execution.
Discussion
These patterns help users answer three questions: What is happening? What has changed? What can still be controlled?
For developers building agent interfaces, which is hardest to implement well: accurate progress reporting, useful change logs, or permissions that avoid constant interruptions?
Top comments (0)