Chat-based vs Task-based Interfaces

As an AI engineer building with React, you must decide how the user will interact with your agent. While "Chat" is the most popular interface, it is often not the most efficient for Task-oriented agency.

In this lesson, we will compare the Two primary agentic interaction models and build the mental model for when to use each.

---

1. The Chat-Based Interface (Conversational)

The Chat Interface is a "Command Line" for humans. It is flexible, familiar, and great for open-ended projects.

Use Cases

• Creative Writing: Brainstorming ideas.
• Exploratory Research: "Tell me about X, and then Y."
• Customer Support: Resolving vague human complaints.

The React Architecture

• State: A messages array of objects { role, content, type }.
• Components: MessageBubble, ChatInput, StreamingText.

---

2. The Task-Based Interface (Dashboard/Canvas)

The Task Interface treats the agent like a Utility Service. The user defines a goal in a form, and the agent populates a dashboard with results.

Use Cases

• Code Refactoring: An agent that scans a repo and shows a list of "Fixes" with checkboxes.
• Financial Analysis: An agent that fills out a spreadsheet.
• Data Migration: A progress bar showing "15 of 100 files migrated."

The React Architecture

• State: Structured objects representing the task (e.g., files: [], security_issues: []).
• Components: DataTables, ProgressBars, DiffViewer, ActionButtons.

---

3. The Modern Hybrid: "Chat + Canvas"

The most sophisticated apps (like Artifacts in Claude or Cursor for code) use a Split View.

• Left Side (Chat): Commands, clarification, and feedback.
• Right Side (Canvas): The actual "Artifact" the agent is building.

graph LR
    User -->|Instruction| Chat
    Chat -->|Agent Logic| Worker[Orchestrator]
    Worker -->|Update Text| Chat
    Worker -->|Update Visuals| Canvas

Why Hybrid?

Writing code or a 10-page document inside a tiny chat bubble is a terrible User Experience (UX). Putting it in a secondary pane allows for "Deep Editing" while the chat stays "High Level."

---

4. Technical Comparison

Feature	Chat-Based	Task-Based
Primary Input	Text Area	Forms / Uploaders
History	Chronological	Status-driven
User Intent	Implicit (Vague)	Explicit (Structured)
Main View	Stream of speech	Dashboard of outcomes
Reliability	🔴 Low (User can say anything)	🟢 High (Schema-enforced)

---

5. Implementing "Streaming" in Task UIs

In a Task-based UI, you don't just stream "words." You stream State Updates.

• Step 1: Agent finds row 1.
• React: Instantly renders row 1 in a table.
• Step 2: Agent finds row 2.
• React: Appends row 2.

This requires a Store (like Redux, Zustand, or React Context) that can handle partial updates from a WebSocket or Server-Sent Event (SSE).

---

6. The "Agent Persona" in the UI

Even in a task-based UI, the agent's "Personality" should be present.

• The "Thinking" Avatar: A small animation near the task that says "Reviewing legal clause 4..."
• The "Advice" Banner: A small text area where the agent explains why it did a certain task in the dashboard.

---

Summary and Mental Model

Think of a Chat Interface like a Telephone. It's about communication and discovery.

Think of a Task-based Interface like a Photoshop Workspace. It's about manipulation of objects and producing a specific file.

In this course, we will build a Hybrid Interface (Module 10) because that is what production-grade agent platforms (v0.dev, Replit Agent, Perplexity) use.

---

Exercise: UI Selection

1. Selection: You are building an agent for Insurance Adjusters to process claims.
   • Should the adjuster talk to the agent in a chat bubble, or see a table of claims with suggested payouts?
   • Why?
2. Hybrid Design: If an agent is writing a "Product Roadmap," what belongs on the Chat side and what belongs on the Canvas side?
3. State Management: If the user edits a value in the Canvas, how do you let the Agent know so it can update its internal "Memory"? Ready to handle the streaming? Next lesson: Streaming Responses and Progress States.