# Stop, Edit, Retry, Undo

Course: [AI UX & Generative UI](https://www.devtutorials.ai/learn/ai-ux) · Section: Trustworthy AI Interfaces
Source: https://www.devtutorials.ai/learn/ai-ux/trustworthy-ui/stop-edit-undo

> Give users control over AI output: stop a runaway answer, fix the question, keep every version when they retry, and undo an applied suggestion to the exact state before.

## What User Control Means

**User control** = the user can steer the AI at any moment: stop it, fix the question, ask again, or take back a change.

In this lesson, you will add four controls to the order-support app: Stop, Edit, Retry and Undo.

AI output changes from run to run, and it is sometimes wrong. So the user needs a way out at every step.

A support agent asks the AI to draft a reply to Asha. Halfway through, the draft starts to ramble about "our delivery partners and our service". The agent wants it to stop. There is no button.

Press **Play**, or use **Next** to go one step at a time.

- **Frame 1:** the moment the user wants to stop. Both answers look the same so far.
- **Frame 2:** the end. Without Stop, the answer ran on. With Stop, it ended where the user wanted.
- **The score:** how many words the user has to read.

**Simple lesson:** a user who cannot stop the AI has to wait for it.

### A Real-World Example

Think about a sat-nav in a car.

- You can **cancel** the route when you change your mind.
- You can **change the address** when you typed the wrong one.
- You can ask for **another route** and compare.
- If it sends you down a wrong turn, you can **go back** to where you were.

A sat-nav with none of these would be frightening to use.

AI features need the same four controls:

- **Cancel the route** = Stop.
- **Change the address** = Edit the question.
- **Another route** = Retry.
- **Go back** = Undo.

Click the button. The Build tab plays the undo scenario through the naive interface.

- **Moment by moment:** the user applies an AI rewrite to the ticket note, fixes a typo, then wants the original back.
- **The note at the end:** it is not the original.
- **The checks:** which control is missing.

**Simple lesson:** each control answers one "I want to…" moment.

## What You Will Learn

In this lesson, you will learn:

1. How to stop an answer mid-stream.
2. How to let users fix the question and get a new answer.
3. How Retry can keep every version.
4. Why undo must go back to a snapshot, not just the last edit.
5. The checks your controls must pass.

**About the controls in this lab**

- The Build tab has four scenarios for this lesson: a runaway answer, the wrong question, a weak first try and an applied suggestion.
- In each one, the scripted user tries to use a control at a fixed moment.
- If your interface has that control, it works. If not, the user is stuck, and the check fails.

## Stop

**Stop** = end the answer where it is, and keep the words written so far.

Show Stop while the answer streams. When pressed:

- the stream ends (abort the request, as in Lesson 2);
- the words so far stay on screen;
- Edit and Retry appear, so the user can try again.

**Simple lesson:** Stop keeps what is useful and saves reading time.

## Edit the Question

The user asked about order #A-1024, but meant #A-1042. The answer is correct, for the wrong order.

**Edit** = open the question again, change it, and get a new answer in the same place.

Without Edit, the user retypes the whole question in a new message, and the wrong answer stays in the thread to confuse the next reader.

**Simple lesson:** a wrong question needs a fix, not a new conversation.

## Retry and Versions

### Why Retry Matters

AI output changes each time. The first try is often not the best try.

**Retry** = ask for another answer to the same question.

### Keep Every Version

**Version** = one answer to the same question. Retry adds a new version. It does not replace the old one.

Step through both frames.

- **Frame 1:** without Retry, the one-word subject line "Sorry" is all the user gets.
- **Frame 2:** with Retry, version 2 appears, and version 1 is kept to compare.

Keep versions in a list, and show "Version 2 of 2" with arrows:

```tsx
function useVersions() {
  const [versions, setVersions] = useState<string[]>([]);
  const [current, setCurrent] = useState(0);
  const add = (text: string) => setVersions((v) => { setCurrent(v.length); return [...v, text]; });
  return { versions, current, setCurrent, add };
}
```

**Easy way to remember:** Retry adds. It never replaces. The user picks the version they like.

**Simple lesson:** keep every version, so trying again is safe.

## Undo

### The Problem

The user applies an AI rewrite to the ticket note. Then they fix a typo. Then they decide the rewrite was a mistake.

What does Undo give back?

Step through all three frames.

- **Frame 1:** the AI rewrite replaces the user's note.
- **Frame 2:** the user fixes a typo in it.
- **Frame 3:** three kinds of undo. Only the snapshot brings back the original note.

### Snapshot Undo

**Snapshot** = a saved copy of the user's work, taken just before the AI changed it.

Save the snapshot when the suggestion is applied. Undo goes back to it:

```tsx
function useSnapshotUndo<T>(value: T, setValue: (v: T) => void) {
  const [snapshot, setSnapshot] = useState<T | null>(null);
  const apply = (next: T) => { setSnapshot(value); setValue(next); };
  const undo = () => { if (snapshot !== null) { setValue(snapshot); setSnapshot(null); } };
  return { apply, undo, canUndo: snapshot !== null };
}
```

**"Undo the last edit" is not enough.**

- The user's last edit was a typo fix, not the AI change.
- Undoing only that leaves the AI's text in place.
- Tell the user what Undo will do: "Undo AI rewrite".

**Simple lesson:** undo goes back to the exact state before the AI touched the user's work.

### Lab Exercise: Give the User Control

Your task: change the Lesson 4 choices in the Build tab so all four scenarios pass. Then press **Check all scenarios**.

Click the button and open the **Build** tab.

- **Stop, Edit and Retry:** tick them on.
- **Undo:** choose the kind that brings back the original note.
- **Play each scenario:** watch the scripted user press each control.

**Simple lesson:** Stop, Edit, Retry and Undo each get the user out of one kind of trouble.

### What Changes per Framework

| Option | Controls |
|---|---|
| Hand-built React | `AbortController` for Stop, a versions list, a snapshot for Undo, as above |
| CopilotKit | Build the controls around its chat state; keep undo in your own state |
| Vercel AI SDK UI | `useChat` gives `stop()` and a regenerate function; keep versions yourself |
| Syncfusion AI components | AI AssistView toolbars can hold your own buttons (optional, not graded) |

## Build It in React

The Build tab uses switches. In the **Code** tab you write the same controls as a React component. The scripted agent runs it, and the lab acts as the user: it presses Stop, fixes the question, presses Retry, then Apply and Undo.

Two ideas carry the whole lesson. Keep every version in a list, so Retry adds instead of replacing:

```tsx
const retry = () => { setShown(versions.length); setVersions([...versions, ""]); agent.retry(); };
```

And save a snapshot before the AI changes the user's work, so Undo can bring it back word for word:

```tsx
const apply = () => { setBefore(note); setNote(versions[shown]); };
const undo = () => { if (before !== null) setNote(before); };
```

## TL;DR

1. **User control** = the user can steer the AI at any moment.
2. **Stop** = end the answer where it is, keep the words so far.
3. **Edit** = fix the question and get a new answer in the same place.
4. **Retry** = another answer to the same question. Keep every version.
5. **Undo** = go back to a snapshot from before the AI changed the user's work.

## Common mistakes

| Mistake | Wrong idea | Correct idea | What goes wrong |
|---|---|---|---|
| Retry replaces the answer | "The new one is always better." | Keep every version and let the user pick. | The better first answer is lost. |
| Undo only the last edit | "Undo is undo." | Undo to the snapshot from before the AI change. | The AI's text stays in the user's work. |
| Stop clears the screen | "Stopped means start again." | Keep the words written so far. | The useful half of the answer is gone. |
| No Edit | "They can just ask again." | Let users fix the question in place. | The thread fills with wrong answers. |
| Controls hidden in a menu | "Power users will find them." | Show Stop while streaming, Edit and Retry after. | Users do not know they can steer. |

## Check Your Understanding

## Exercises

## What to Remember

- Users need a way out at every step.
- Stop ends the answer and keeps the words so far.
- Edit fixes the question in place.
- Retry adds a version and never replaces one.
- Undo goes back to a snapshot from before the AI change.
- Show the controls where the user needs them, not in a menu.

## Further Reading

- [Guidelines for Human-AI Interaction, by Microsoft Research](https://www.microsoft.com/en-us/research/project/guidelines-for-human-ai-interaction/): see "Support efficient correction" and "Support efficient dismissal".
- [User control and freedom, by Nielsen Norman Group](https://www.nngroup.com/articles/user-control-and-freedom/): why every action needs an emergency exit.

Next: **Ask Before Acting**, where the agent wants to refund, send and tag, and you decide when it must ask first.