# Where AI Belongs

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/where-ai-belongs

> The same AI feature can be a full chat, a side panel or one button. Learn the four ways AI is not a normal button, and three questions that pick the right place for each task.

## What AI UX Is

**AI UX** = the part of an app that people see and touch when they use an AI feature.

In this lesson, you will learn where an AI feature should live in an app. You will also see what goes wrong when it lives in the wrong place.

A support agent is reading a long ticket. They want a short summary.

The app has an AI that summarises well. But the only way to reach it is a chat page. So the agent:

- leaves the ticket
- copies the ticket into the chat
- waits for the reply
- pastes the summary back by hand

The AI did its job in a few seconds. The interface wasted the rest.

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

- **Frames 1 to 3:** the time grows with every click, copy and switch.
- **The red steps:** places where the agent can make a mistake, like pasting the wrong order.
- **Frame 4:** the same summary as one button next to the ticket.

**Simple lesson:** a good model in the wrong place is a bad product.

### A Real-World Example

Think about a shop.

- Some questions need a long talk with an expert. You walk to the help desk.
- Some questions are about the shirt in your hand. A helper walks with you.
- Some jobs are one quick thing, like checking the price. You scan the tag.

Sending every shopper to the help desk, even to check a price, wastes everyone's time.

AI in an app works the same way:

- **The help desk** = a full chat.
- **The helper beside you** = a side panel.
- **Scanning the tag** = an inline button.

Click the button, then press **Run** in the AI UX Lab at the bottom of the page.

- **The surface buttons:** switch between full chat, side panel and inline action.
- **The step list:** each thing you would do, one step at a time, with its seconds.
- **The table:** when the run ends, all three surfaces for the same task. The best one is ticked.

**Simple lesson:** the AI reply costs the same everywhere. The interface decides the rest.

## What You Will Learn

In this lesson, you will learn:

1. The four ways an AI feature is not a normal button.
2. The three places AI can live in an app.
3. How one task costs more or less on each place.
4. Three questions that pick the right place.
5. How this lesson fits the rest of the course.

**About the AI UX Lab**

- The **AI UX Lab** sits at the bottom of every page in this course.
- It holds a small order-support app. Its AI agent comes from the Building AI Agents course.
- The app and the agent are **simulated**. They follow fixed rules, so your work can be checked.
- In the lab's **Settings** tab, you can let a real AI model in your browser write the replies instead. Then you feel a real wait. The real model never grades your work.
- The seconds come from the lab's task model: clicks, typing, copying and switching. They show the size of the difference. They are not measured from real users.
- Nothing leaves your browser. A real model downloads once, then your browser keeps it.

## Why AI Is Not a Normal Button

A normal button is simple. You click **Save** and the file is saved. Every time. Right away.

An AI feature is different in four ways:

1. **It can change.** The same question can get a different answer.
2. **It is slow.** It takes seconds, not a blink.
3. **It can be wrong and sound sure.** A wrong answer reads as calmly as a right one.
4. **It can act.** An agent can send an email, issue a refund or delete a record.

Step through all five frames.

- **Frames 1 to 4:** one difference each. The left side is a normal button. The right side is the AI feature.
- **The "What this shows" panel:** which later lesson fixes that difference.
- **Frame 5:** all four differences, each with its lesson.

**A better model will not fix these for you.**

- A better model is still slow sometimes.
- A better model is still wrong sometimes.
- Only the interface can show progress, show sources and ask before acting.

**Simple lesson:** AI can change, is slow, can be wrong and can act. The interface has to handle all four.

## Three Places AI Can Live

**Surface** = the place in an app where the user meets the AI.

There are three:

1. **Full chat.** A page where the user talks to the AI.
2. **Side panel.** A panel beside the thing the user is working on. The AI can see what is on screen. People often call it a **copilot**.
3. **Inline action.** One button on the thing itself, such as **Summarise** or **Suggest tag**.

### What Each One Is Good At

| Surface | Good for | Weak for |
|---|---|---|
| Full chat | Open questions with many follow-ups | Tasks about something already on screen |
| Side panel | Help with what is on screen, a few turns | Long, open questions |
| Inline action | One known action on what is on screen | Anything that needs a follow-up |

### One Task, Three Surfaces

Now watch one task, "draft a reply, then make it warmer", on all three surfaces.

Step through all four frames.

- **Frame 1:** full chat. The agent copies the ticket across, then pastes the reply back.
- **Frame 2:** inline action. There is no button for "make it warmer", so the agent fixes it by hand.
- **Frame 3:** side panel. The ticket stays on screen, and there is room to ask for a warmer tone.
- **Frame 4:** the three side by side. The side panel wins this task.

### No Surface Wins Every Task

A different task can have a different winner.

So you pick a surface for each task, not once for the whole app.

**Simple lesson:** chat, side panel and inline action each win some tasks and lose others.

## How to Pick a Surface

### Three Questions, in Order

Ask these three questions. Stop at the first yes.

1. **Does the user need to explore**, with many follow-ups and nothing on screen that holds the answer? Use a **full chat**.
2. **Is it one known action** on the thing on screen? Use an **inline action**.
3. **Is it help with the thing on screen**, with a few turns? Use a **side panel**.

The order matters. A task about the open ticket can still be a big, open question. Question 1 catches that first.

Step through all three frames.

- **Frame 1:** "suggest a tag". Question 2 is the first yes, so it is an inline action.
- **Frame 2:** "draft a reply, then make it warmer". Question 3 is the first yes, so it is a side panel.
- **Frame 3:** "plan how to clear a backlog". Question 1 is the first yes, so it is a full chat.

### One App Can Use All Three

Most good AI apps mix surfaces.

A support app might have a **Summarise** button on every ticket, a side panel for replies, and a chat page for research.

**Easy way to remember:** before you add an AI feature, ask **Explore? One action? On screen?** The first yes picks the surface.

### Lab Exercise: Pick the Surface for Six Tasks

Your task: pick a surface and a reason for each of the six support tasks. Then press **Check**.

Click the button and open the **Surface picker** tab.

- **Each row:** choose a surface, then the question that decided it.
- **After Check:** a wrong row shows how many seconds your choice costs against the best one.
- **To pass:** 5 of 6 rows right, each with the right reason.

**Simple lesson:** pick the surface from the task, not from what is popular.

## Where This Course Goes

Each lesson fixes one stage of a single request. Follow one request from start to finish to see how they fit together.

Step through all nine frames.

- **The top row:** the stages, left to right. The green one is happening now.
- **The caption:** what the user sees at that stage.
- **The label under each stage:** the lesson that fixes it.

| Stage | What can go wrong | The fix | Lesson |
|---|---|---|---|
| Surface | The AI is on the wrong page | Pick chat, side panel or inline | 1 |
| Wait | 14 seconds of spinner | Show steps and stream words | 2 |
| Answer | Sounds sure, but is wrong | Sources, "not sure", limits | 3 |
| Control | The user is stuck with what the AI did | Stop, edit, retry, undo | 4 |
| Act | Money moves before anyone says yes | Preview and confirm by risk | 5 |
| Recover | A raw error | A designed state for each failure | 6 |
| Show | A wall of text | Generative UI, inside your rules | 7 to 9 |
| Channel | Lost edits, runs that will not stop | One clear event channel | 10 |
| Learn | Feedback goes nowhere; some users are shut out | Traced feedback; accessible UI | 11, 12 |

**Simple lesson:** one request passes every stage, and every stage can let the user down.

### How You Practise in the Lab

Every lesson uses the AI UX Lab at the bottom of the page in the same order.

| Step | Lab tab | What you do |
|---|---|---|
| 1. Watch | The lesson's animations | See the naive interface fail, one frame at a time |
| 2. Find the rule | **Build** | Turn on the right settings until every scenario passes |
| 3. Write it | **Code** | Write the same fix as a React component; the same scripted agent runs it, and the checks look at the real page |
| 4. Keep it | **Export** | Download your interface as React files and Playwright tests |

The scripted agent always does the same thing, so a check that passes once passes every time. A real model can write the reply in the **App** tab (choose it in **Settings**), but it never grades you.

**Easy way to remember:** watch it fail, find the rule, write the code, keep the kit.

### What Changes per Framework

The ideas work with every frontend framework.

You build each pattern by hand in React and TypeScript first, in the **Code** tab. The capstone then maps each part of the lab's `agent` to a real stack.

| Option | What it gives you | In this course |
|---|---|---|
| Hand-built React | Full control, nothing hidden | Every Code exercise |
| CopilotKit | Chat, side panel and generative UI parts | Mapped in the capstone |
| Vercel AI SDK UI | Streaming chat hooks for React | Mapped in the capstone |
| Syncfusion AI components | Ready-made AI assist and smart components | Mentioned, not graded |

**Simple lesson:** learn each pattern by hand first. Then a library is just a faster way to do the same job.

## TL;DR

1. **AI UX** = the part of an app people see and touch when they use AI.
2. **The four differences** = it can change, it is slow, it can be wrong and sound sure, it can act.
3. **Surface** = the place the user meets the AI.
   - Full chat: open questions, many follow-ups.
   - Side panel: help with what is on screen.
   - Inline action: one known action on what is on screen.
4. **The three questions** = Explore? One action? On screen? Stop at the first yes.
5. **The big idea** = the interface is where AI earns or loses trust.

## Common mistakes

| Mistake | Wrong idea | Correct idea | What goes wrong |
|---|---|---|---|
| Making everything a chat | "Users love chat." | Pick a surface for each task. | Users copy details across and paste results back by hand. |
| A side panel that cannot see the screen | "It is beside the ticket, so it knows the ticket." | Give the panel the ticket as context. | The user still has to describe what is on screen. |
| Inline buttons for open questions | "One click is always faster." | Use inline only for one known action. | The user cannot say "make it shorter", so they fix it by hand. |
| Blaming the model | "A smarter model will fix the experience." | Fix the interface. | The model gets better, and the waiting and copying stay. |
| Asking the questions out of order | "It is on screen, so it is a side panel." | Ask "does it need to explore?" first. | A big, open question ends up cramped in a narrow panel. |

## Check Your Understanding

## Exercises

These exercises use new tasks, not the six from the lab.

## What to Remember

- The interface is where AI earns or loses trust.
- AI can change, is slow, can be wrong and sound sure, and can act.
- AI can live in a full chat, a side panel or an inline action.
- No surface wins every task.
- Ask three questions in order: explore? one action? on screen? Stop at the first yes.
- A better model does not fix a bad place. The interface does.

## Further Reading

- [Guidelines for Human-AI Interaction, by Microsoft Research](https://www.microsoft.com/en-us/research/project/guidelines-for-human-ai-interaction/): 18 tested rules for AI features.
- [People + AI Guidebook, by Google PAIR](https://pair.withgoogle.com/guidebook/): how to design AI products people trust the right amount.

Next: **Streaming and Waiting**, where you replace a 14-second spinner with an answer that appears as it is written, shows each step, and can be stopped.