Principles of Agent-Facing UIs

Designing a UI for an agent is fundamentally different from designing a standard SaaS product. In a standard app, the user acts, and the system responds. In an agentic app, the System acts, and the user Observes.

This reversal of roles creates a "Trust Gap." If the user doesn't see what the agent is doing, they will get anxious, bored, or skeptical. In this lesson, we will explore the core design principles that close this gap.

---

1. Transparency: Show the "Thinking"

Never show just a "Thinking..." spinner for more than 3 seconds. An agent's reasoning process is inherently interesting and builds trust.

The "Progress Log" Pattern

Instead of a stationary spinner, show a stream of agentic steps:

• 🟢 Searching Google for "Market Trends 2024"...
• 🟡 Analyzing 15 search results...
• 🔵 Drafting 3 sections of the report...

This transforms "Latency" into "Productivity." The user feels like they are watching a specialized worker finish a task.

---

2. Shared Context: The Whiteboard

In an agentic UI, there shouldn't just be a "Chat box." There should be a Workspace. Imagine the chat is on the left, and on the right is a Whiteboard (or Canvas) where the agent is actually building the output.

• As the agent researches, the whiteboard fills with links.
• As the agent writes code, the whiteboard shows the code.
• Why? It prevents the user from having to scroll back through a long chat to find the final result.

---

3. The "Interrupt" UI: Requesting Permission

When an agent hits a checkpoint (Module 5.3), the UI must clearly signal that Action is Required.

• The Call to Action: A vibrant "Approval" button or a "Select Choice" interface.
• The Why: The UI must display the "Reasoning" right above the button.
• Agent: "I want to spend $5.20 to buy the 'Basic' plan because it's the cheapest way to fulfill your goal. [Approve] [Edit]."

---

4. Multi-Modal Feedback

Agents work with more than just text. Your UI must handle:

• Images: If an agent generates a chart, it should be interactive.
• Files: If an agent creates a CSV, provide a "Download" button.
• Code: If an agent writes Python, provide a syntax-highlighted editor with a "Run" button.

---

5. Agency Control: The "Kill Switch"

A user should always have the "Veto Power."

• Stop Button: Terminate the agentic loop immediately.
• Edit Prompt: Allow the user to "Correct" the agent's goal midway through.

---

6. Trust over Intelligence

A user will forgive a "Stupid" agent if it is Transparent. They will hate a "Smart" agent if it is Mysterious.

• Trust Metric: Does the user know exactly how the agent reached its conclusion?
• Implementation: Every claim in the UI should be linked to a Source Citation (Module 15 / RAG).

---

Summary and Mental Model

Think of the Agent UI like The Cockpit of a Plane.

• The human is the Pilot.
• The AI is the Autopilot.
• The UI doesn't need to show every single line of code, but it needs to show the Status, the Path, and any Alerts that require the Pilot to grab the stick.

You are building a dashboard for collaboration, not just a display for text.

---

Exercise: UI Critiquing

1. Analysis: Look at a standard AI chat (like ChatGPT).
   • Why is it "Bad" for an agent that takes 2 minutes to write a full application?
   • What would you add to the sidebar to make it better?
2. Design: Draft a "Thinking State" for an agent that is searching for a hotel.
   • What are 3 distinct "Progress Steps" you would show the user?
3. Verification: How would you show a user that an agent "Hallucinated" a source link?
   • (Hint: How do you visualize a "broken link" or a "low confidence" score?) Ready to build the React code? Let's move to Chat-based vs Task-based Interfaces.