Amanoba Logo
Back to Course

UI integration and UX copy

Day 16 of 30 · Generative AI 2026: Build AI Apps and Agents

One-liner: Connect the UI to the AI and write clear user guidance.
Time: 20 to 30 min
Deliverable: UI Wired to API with Onboarding Copy

Learning goal

You will be able to: Connect the UI to the AI endpoint and write clear UX copy.

Success criteria (observable)

  • UI sends input and displays output.
  • Loading and error states are defined.
  • Onboarding copy explains the first action.

Output you will produce

  • Deliverable: UI Wired to API with Onboarding Copy
  • Format: UI screen plus copy snippets
  • Where saved: Repo and course folder notes

Who

Primary persona: Digital nomad building the first user experience Secondary persona(s): Users who need simple guidance Stakeholders (optional): Collaborators

What

What it is

A working UI that sends user input to the AI endpoint and shows the result. It also includes short guidance so users know what to do first.

What it is not

It is not full visual design or complex onboarding. It is a functional first experience.

2-minute theory

  • Users trust products that explain what will happen.
  • Clear loading states reduce anxiety.
  • Simple copy prevents support questions.

Key terms

  • Loading state: A visible indicator that the system is working.
  • Onboarding copy: Short text that tells the user how to start.

Where

Applies in

  • Main input screen
  • Result screen

Does not apply in

  • Brand marketing pages

Touchpoints

  • Empty state
  • Error state
  • First use screen

When

Use it when

  • The API endpoint is ready
  • You want users to test the workflow

Frequency

Whenever the workflow changes

Late signals

  • Users do not know where to start
  • Support questions repeat the same instructions

Why it matters

Practical benefits

  • Faster first success for users
  • Fewer support requests
  • Better product trust

Risks of ignoring

  • Confusion and drop off
  • Support overload

Expectations

  • Improves: usability and clarity
  • Does not guarantee: conversion

How

Step-by-step method

  1. Connect the input form to the API.
  2. Display output and clear error states.
  3. Add one paragraph of onboarding copy.
  4. Test the flow with a new user.

Do and don't

Do

  • Show loading and error states clearly
  • Keep copy short and action focused

Don't

  • Hide errors
  • Use vague instructions

Common mistakes and fixes

  • Mistake: No guidance text. Fix: Add a short first step.
  • Mistake: Output hidden. Fix: Display output clearly.

Done when

  • Input sends to API.
  • Output is visible and clear.
  • Onboarding copy explains the first step.

Guided exercise (10 to 15 min)

Inputs

  • API endpoint URL
  • Draft onboarding copy

Steps

  1. Wire the form to the endpoint.
  2. Add loading and error states.
  3. Write onboarding copy.

Output format

Field Value
Input form
Output view
Error state
Onboarding copy

Pro tip: If a user cannot complete the task in 60 seconds, simplify the UI.

Independent exercise (5 to 10 min)

Task

Rewrite the onboarding copy to be even shorter and clearer.

Output

Revised copy snippet.

Self-check (yes/no)

  • Is the input connected to the API?
  • Are loading and error states visible?
  • Is the onboarding copy action focused?
  • Can a new user complete the task quickly?

Baseline metric (recommended)

  • Score: 3 of 4 checks met
  • Date: 2026-02-06
  • Tool used: Browser

Bibliography (sources used)

  1. Nielsen Norman Group UX Writing. NNGroup. 2024-01-01. Read: https://www.nngroup.com/articles/writing-task-driven-ui-text/

  2. Material Design Loading Indicators. Google. 2024-01-01. Read: https://m3.material.io/components/progress-indicators/overview

Read more (optional)

  1. Empty States Why: Pattern ideas for first use screens. Read: https://www.nngroup.com/articles/empty-state/