Capstone: Your AI UX Kit
By the Syncfusion DevTutorials team · Last updated
Bring every lesson together on the surface you chose: streaming, trust cues, controls, confirmations, designed states and one generative UI pattern, graded against 15 scenarios. Then export your kit.
What the Capstone Is
Capstone = one interface that brings every lesson together, graded against 15 scripted scenarios from the whole course.
In this lesson, you will pass all 15 scenarios on the surface you chose, with one generative UI pattern, then export your full AI UX kit.
You have fixed one problem per lesson. In a real app, they all happen in the same panel: a slow answer, a wrong source, a runaway draft, a risky refund, a timeout, a hostile payload, a screen-reader user.
Watch the same 15 scenarios as the interface grows:
Press Play, or use Next to go one step at a time.
- Frame 1: the naive chat UI. Every card is red.
- Frames 2 and 3: after Section 1, then with a generative UI pattern.
- Frame 4: with accessibility, all 15 pass.
Simple lesson: the interface is where AI earns or loses trust, and you now have every piece.
A Real-World Example
Think about a driving test.
- You learned steering, mirrors, parking and junctions one at a time.
- The test puts them all together on one real drive.
- You pass when the whole drive is safe, not when one skill is perfect.
The capstone works the same way:
- The separate lessons = the separate skills.
- The 15 scenarios = the test drive.
- One interface = you drive the whole route in one car.
Click the button and open the Export tab.
- Check the capstone: runs all 15 scenarios through your interface.
- The list: each scenario, with the first failing check if there is one.
- The surface: set in Settings under "Surface for my capstone".
Simple lesson: one interface, 15 scenarios, every check.
What You Will Learn
In this lesson, you will:
- Choose your capstone surface.
- Pick one generative UI pattern.
- Pass all 15 scenarios.
- Answer the four UX questions for your own app.
- Export your full AI UX kit.
About the capstone checks
- The 15 scenarios come from Lessons 2 to 6, Lesson 12, and two from your generative UI pattern.
- They use the same checks as each lesson's Build tab. Nothing new is graded.
- Lessons 9, 10 and 11 are not in the 15, but their parts are in your kit. Keep them on.
Step 1: Choose Your Surface
In Settings, pick the surface for your capstone: full chat, side panel or inline actions. Use Lesson 1's three questions:
- Does the user need to explore? Full chat.
- Is it one known action on what is on screen? Inline action.
- Is it help with what is on screen? Side panel.
If you came with your own app, pick the surface where AI will appear first.
Simple lesson: the surface comes from the task, not from habit.
Step 2: Pick One Generative UI Pattern
You need one generative UI pattern to pass. Either is fine:
Step through all three frames.
- Frame 1: Lesson 7 only (a registry). The capstone counts its two scenarios.
- Frame 2: Lesson 8 only (A2UI). The capstone counts its two scenarios instead.
- Frame 3: neither. The capstone fails.
| Pick | When |
|---|---|
| Controlled (Lesson 7) | Your team builds the components; the agent picks. The safest start. |
| Declarative (Lesson 8) | The agent needs to lay out forms from your parts. |
Simple lesson: controlled is the safest start; declarative when you need layouts.
Step 3: Pass the 15 Scenarios
Open the Build tab for any lesson that fails, fix its settings, then check the capstone again. Then pass the same lesson in the Code tab, so the fix exists as React code and not only as a switch.
| Scenario | Lesson |
|---|---|
| A 14-second answer · The user gives up | 2 |
| A confident wrong answer · A shaky answer | 3 |
| A runaway answer · An applied suggestion | 4 |
| A refund from a casual message · A tag suggestion | 5 |
| A request that never answers · A refusal · Too many requests | 6 |
| Your two generative UI scenarios | 7 or 8 |
| A streamed answer and a screen reader · Keyboard only | 12 |
Easy way to remember: fix the first failing scenario, check again, repeat. The list always shows the next one to fix.
Simple lesson: fix one failing check at a time.
Step 4: Your Own App
If you are applying this to an existing app, answer four questions. They turn the course into a plan:
- Where does AI appear? The surface, and the screen.
- Which actions need confirmation? Anything with money, reach outside the app, or no way back.
- What must users be able to undo? Every AI change to their work.
- Which outputs suit structured UI? Anything with a shape: orders, tracking, forms.
You will write these in the third exercise below.
Simple lesson: four answers make your capstone a plan for your own product.
Step 5: Export Your Kit
Step through all five frames.
- Frames 1 and 2: the Section 1 parts: streaming, trust cues, controls, previews and states.
- Frames 3 and 4: the generative UI parts: registry, A2UI renderer, MCP App host, AG-UI client, feedback and accessibility.
- Frame 5: your checks as Playwright tests, and the README checklist.
Download the full kit
When the capstone passes, the Export tab downloads ai-ux-kit.zip.
The kit is a start, not a finish.
- The Playwright tests begin as "fixme". Point each one at your app's mocked stream, then remove "fixme".
- Wire the components to a real model through a framework, and check that streaming, Stop, confirmation and A2UI rendering behave as they did in the lab.
- Re-check the A2UI, AG-UI and MCP Apps versions against their docs: these specs move quickly.
Simple lesson: your kit is the whole course, as code you can ship.
Step 6: From the Lab to a Real App
In the Code tab, your component talks to a scripted agent. In a real app, the same calls go to a real stack. Only the names change.
| In the lab | What it is | In a real app (examples) |
|---|---|---|
agent.on(...) events | The stream from the agent | AG-UI events such as TEXT_MESSAGE_CONTENT and TOOL_CALL_START; message parts in Vercel AI SDK's useChat |
agent.cancel() | Stop the run | stop() in useChat, or an AbortController on your own fetch |
agent.send() · agent.retry() | A new or repeated question | sendMessage() · regenerate() in useChat |
propose + agent.perform() | An action that waits for a yes | A tool call your UI confirms before it runs; CopilotKit can render the confirm card |
tool-ui · a2ui events | UI the agent picks or describes | Generative UI in CopilotKit; an A2UI renderer |
state-delta · hitl-request | Shared state and questions for a person | AG-UI STATE_DELTA and interrupts |
agent.feedback() | One feedback event | A call to your analytics or evals store, with the trace ID |
Check the names against the docs. These libraries change their APIs often. The jobs in the middle column stay the same; the names on the right may not.
The work is the same in every stack. Mock the stream first, as the lab does. Then write the UI against the mock, test it with Playwright, and only then connect the real model.
Simple lesson: the lab's agent is a stand-in for your stack. Same jobs, different names.
TL;DR
- Capstone = one interface, 15 scenarios from the whole course.
- Surface = chosen with Lesson 1's three questions.
- One generative UI pattern = Lesson 7 (controlled) or Lesson 8 (declarative).
- Four questions = where AI appears, what needs confirming, what can be undone, what suits structured UI.
- Export = React and TypeScript components, a config, and Playwright tests.
Common mistakes
| Mistake | Wrong idea | Correct idea | What goes wrong |
|---|---|---|---|
| Fixing lessons out of order | "I'll fix everything at once." | Fix the first failing check, then check again. | You lose track of what changed. |
| Turning off earlier lessons | "Lesson 9 isn't graded here." | Keep every lesson's settings on. | Your kit ships an unsafe host. |
| Shipping fixme tests | "The tests are in the zip." | Wire each test to your app. | Nothing actually runs in CI. |
| Skipping the real-model check | "It passed in the lab." | Test streaming and Stop with a real model. | A framework detail breaks Stop. |
| Pinning nothing | "Use the latest spec." | Pin versions and re-test each release. | A spec change breaks rendering. |
Check Your Understanding
Exercises
What to Remember
- The interface is where AI earns or loses trust.
- One interface must handle waiting, doubt, control, actions, failures, payloads and every user.
- One generative UI pattern is enough; controlled is the safest start.
- Fix the first failing check, then check again.
- Export your kit, wire its tests, and re-check against a real model.
Further Reading
- Guidelines for Human-AI Interaction, by Microsoft Research: a checklist to review your capstone against.
- People + AI Guidebook, by Google PAIR: patterns for the parts of your product beyond this kit.
Next: AI UX Cheat Sheet, every pattern from the course on one page.