Ask Before Acting

By the Syncfusion DevTutorials team · Last updated October 26, 2026

An agent can refund, send and delete. Add an action preview card, ask only when the risk is high, and give a short undo window after the action.

When the AI Can Act

Side effect = something an action changes outside the screen: money moves, an email is sent, a record is deleted.

In this lesson, you will make the agent ask before it acts: with a preview card, a confirm step that matches the risk, and an undo window.

An AI agent does not only write text. It can refund, send and delete.

Asha is upset. She writes: "ugh, just refund it". The agent reads that as an order, and refunds £29.99 to her card. At once.

Was that what the support agent wanted? Was it the right card? Nobody was asked.

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

• Frame 1: the agent proposes a refund. On the left, the ledger already shows the money moving.
• Frame 2: on the right, the preview card shows amount, order and card. Nothing moves until yes.
• Frame 3: the user spots a problem and presses Undo. Only the right side can reverse it.

Simple lesson: a casual message is not consent.

A Real-World Example

Think about a bank app.

• Checking your balance needs no question. It changes nothing.
• Moving money between your own accounts asks once.
• Paying someone new shows the name, the amount and the account, and asks you to confirm.
• Many banks then give a short window to cancel.

The bank does not ask the same way for everything. The question matches the risk.

AI actions work the same way:

• Checking the balance = a low-risk action, like adding a tag. Just do it.
• Paying someone new = a high-risk action, like a refund. Preview and confirm.
• The cancel window = the undo window.

Click the button. The Build tab plays the casual refund through the naive interface.

• The screen: "It happens at once: Refund £29.99".
• Side effects: the refund appears before any yes.
• The checks: no preview, no confirm, no undo.

Simple lesson: the more an action can hurt, the more the interface should ask.

What You Will Learn

In this lesson, you will learn:

1. Why an agent should not act on a casual message.
2. How to rate an action's risk.
3. What an action preview card must show.
4. When to ask, and when asking does harm.
5. How an undo window works.

Rate the Risk

Risk = how much harm an action can do if it is wrong.

Ask three questions about the action:

1. Does it move money? A refund, a voucher, a charge.
2. Does it reach outside the app? An email, a message, a call to another company.
3. Can it be taken back? A tag can be removed. A sent email cannot.

Simple lesson: money, reach and no way back make an action high risk.

The Action Preview Card

Action preview card = a card that shows exactly what the action will do, before it runs.

For a refund, it must show:

• The action and amount: "Refund £29.99"
• The order: #A-1042
• The recipient: Asha Rao, card ending 4242

The button says the action, not "OK". "Refund £29.99" makes the user read what they agree to.

function ActionPreviewCard({ action, onConfirm, onCancel }: Props) {
  return (
    <div role="dialog" aria-label={action.label}>
      <strong>{action.label}</strong>
      <dl>
        <dt>Amount</dt><dd>{action.amount}</dd>
        <dt>Order</dt><dd>{action.order}</dd>
        <dt>To</dt><dd>{action.to}</dd>
      </dl>
      <button onClick={onConfirm}>{action.label}</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  );
}

The agent only proposes. Your app runs the action after onConfirm, never before.

Simple lesson: show exactly what will happen, then wait for an explicit yes.

Ask Only When It Matters

Asking Too Much Is a Problem Too

If the app asks "Are you sure?" for every tag, people stop reading. They click yes by habit. Then they click yes on the refund too.

Confirm fatigue = people approve without reading because the app asks too often.

Step through all three frames.

• Frame 1: never ask. The tag is fine, but the refund and the email go through at once.
• Frame 2: always ask. The refund is safe, but asking for a tag trains people to click yes.
• Frame 3: ask when the risk is high. Each action gets the right amount of friction.

Simple lesson: match the friction to the risk.

The Undo Window

Undo window = a few seconds after an action when the user can still reverse it.

It catches the mistakes people spot just after they click: the wrong card, the wrong amount.

Step through all three frames.

• Frame 1: the refund runs. An Undo button appears for 10 seconds.
• Frame 2: time is running out, but Undo still works.
• Frame 3: the window closes. The refund is final, and the screen says "Done".

For actions that cannot be reversed, like a sent email, there are two choices: hold the action until the window ends, or rely on the preview alone.

Simple lesson: a short undo window catches the last mistakes.

Lab Exercise: Ask Before Acting

Your task: change the Lesson 5 choices in the Build tab so all three scenarios pass. Then press Check all scenarios.

Click the button and open the Build tab.

• The three scenarios: the casual refund, a tag suggestion and an email to the customer.
• Side effects: watch when each line appears, compared with the user's yes.
• The tag scenario: checks that you do not ask when there is no need.

Simple lesson: preview, ask by risk, and offer undo.

What Changes per Framework

Build It in React

In the Code tab, the agent sends a propose event with an action and its risk. The starter calls agent.perform() at once. Your version shows a preview card for risky actions and waits for a yes.

if (e.action.risk === "low") run(e.action);
else setPending(e.action);

agent.perform() returns an object with undo(). Keep it, and show an Undo button for a few seconds.

TL;DR

1. Side effect = a change outside the screen: money, email, delete.
2. Risk = money, reach outside the app, and no way back.
3. Action preview card = action and amount, order, recipient. The button says the action.
4. Ask by risk = high risk: preview and confirm. Low risk: just do it, and offer undo.
5. Confirm fatigue = asking too often teaches people to click yes.
6. Undo window = a few seconds to reverse an action.

Common mistakes

Check Your Understanding

Exercises

What to Remember

• An agent can act, so the interface must guard the actions.
• A casual message is not consent.
• Rate the risk: money, reach, no way back.
• High risk: preview the exact details, and wait for an explicit yes.
• Low risk: just do it, and offer undo. Asking too often does harm.
• Give the agent a propose tool, not the real one.

Further Reading

• Guidelines for Human-AI Interaction, by Microsoft Research: see "Support efficient correction".
• Confirmation dialogs can prevent user errors, if not overused, by Nielsen Norman Group: when a confirm step helps, and when it does not.

Next: Errors, Refusals and Empty States, where timeouts, tool failures, refusals, rate limits and "I don't know" become screens you design, and you export your v1 kit.