Project 13: Chat-Native UX and Error Recovery Lab

Design and validate conversational workflows that remain clear and recoverable under interruptions, auth failures, and ambiguous prompts.

Quick Reference

Attribute Value
Difficulty Intermediate
Time Estimate 1-2 weeks
Main Programming Language TypeScript (UI + tests)
Alternative Programming Languages N/A
Coolness Level Level 3
Business Potential High activation impact
Prerequisites UI component basics, state modeling
Key Topics Entry points, fallback UX, conversational state continuity

1. Learning Objectives

  1. Define high-signal conversational entry points.
  2. Build explicit state transitions with one clear action per state.
  3. Implement recoverable error patterns for critical failures.
  4. Validate chat-to-widget continuity with transcript tests.

2. All Theory Needed (Per-Concept Breakdown)

Conversational State Resilience

Fundamentals Chat-native UX must communicate progress and next actions clearly. A good experience is not only visual polish; it is recoverability and state continuity.

Deep Dive into the concept Define a state model first: empty, loading, ready, partial, error, confirmed. Each state should map to one primary user action. In failures, preserve user progress and offer deterministic recovery. For example, auth-expired should lead to reconnect and return user to pre-commit state.

Entry-point quality drives routing and user expectations. Use explicit language in metadata and prompts, then mirror that language in onboarding and first UI actions. If listing copy promises one behavior but first-run flow does another, abandonment rises.

Design an error taxonomy that maps each failure class to one recovery action: retry, reconnect, edit input, or cancel safely. Avoid dead-end messages. Every error should include cause, next step, and what was preserved.

Minimal concrete example

error=AUTH_EXPIRED
message="Connection expired. Reconnect to continue."
preserved_state={ selected_records:[...], draft_action:"reassign" }
next_action="Reconnect"

3. Project Specification

3.1 What You Will Build

A UX blueprint and validation suite for three core conversational workflows with robust recovery behavior.

3.2 Functional Requirements

  1. Define invocation prompts for each workflow.
  2. Implement explicit state machine transitions.
  3. Implement deterministic recovery paths for top error classes.
  4. Add transcript-based UX tests.

3.3 Real World Outcome

User: "Update 5 overdue invoices and notify owner."
App: "I can do that. First, connect billing service."
[Connect]
App: "Connection expired. Reconnect to continue. Your draft is saved."
[Reconnect]
App: "Ready to update 5 invoices. Confirm?"
User: "Confirm."
App: "Done. 5 invoices updated. Receipt rcp_5512."

4. Solution Architecture

Entry Prompt -> Planner -> Tool Call -> Widget State -> Recovery Action -> Resume Flow

5. Implementation Guide

5.1 The Core Question You’re Answering

“Can users finish important tasks without confusion when the happy path breaks?”

5.2 Concepts You Must Understand First

  1. Conversational state-machine design.
  2. Error taxonomy and remediation language.
  3. Risk confirmation checkpoints for writes.

5.3 Questions to Guide Your Design

  1. Which states are mandatory for each flow?
  2. Which failures preserve progress vs reset progress?
  3. How do you keep model text and widget state synchronized?

5.4 Thinking Exercise

Model one flow with forced auth expiration and network timeout, then design the shortest safe recovery sequence.

5.5 The Interview Questions They’ll Ask

  1. How do you avoid dead-end errors in chat UX?
  2. Which UX state transitions should be deterministic?
  3. How do you test interrupted workflows?
  4. What makes an error message high quality?
  5. How do you measure recovery success?

5.6 Hints in Layers

  • Hint 1: Start with one flow and five explicit states.
  • Hint 2: Write recovery copy before implementing handlers.
  • Hint 3: Persist minimal state needed to resume safely.
  • Hint 4: Test with transcript scripts, not screenshots only.

5.7 Books That Will Help

Topic Book Chapter
Interaction flow “Designing Interfaces” Flow and state chapters
Iterative refinement “The Pragmatic Programmer” Feedback loops
Defensive behavior “Code Complete” Robustness sections

6. Testing Strategy

  • Transcript tests for happy and failure paths.
  • Mid-flow auth-expiry and reconnect tests.
  • State reconciliation tests after delayed responses.

7. Common Pitfalls & Debugging

Pitfall Symptom Solution
Dead-end error copy Users abandon flow Add cause + action + preserved state
State mismatch UI says pending after success Reconcile from receipt-bearing tool responses
Weak entry prompts Wrong tool invocation Rewrite prompts around concrete outcomes

8. Extensions & Challenges

  • Add accessibility checks for all states.
  • Add multilingual recovery copy validation.
  • Add UX quality scorecard per release.

9. Real-World Connections

  • Customer support copilots
  • CRM update assistants
  • Internal workflow automation tools

10. Resources

  • OpenAI Apps SDK: UX principles
  • OpenAI Apps SDK: UI component guidelines
  • OpenAI Apps SDK: State management

11. Self-Assessment Checklist

  • I can define deterministic state transitions for core flows.
  • I can recover from auth/network failures without losing user progress.
  • I can validate UX quality with transcript-driven tests.

12. Submission / Completion Criteria

Minimum Viable Completion

  • One workflow with explicit states and recoverable errors.

Full Completion

  • Three workflows, transcript test suite, and measured recovery-completion metrics.