Skip to main content

Complete learning course

Frontend Developer + AI

AI interfaces, streaming UX, approvals, and generative UI

A path for frontend developers covering chat UI, streaming, state, human-in-the-loop controls, accessibility, browser-context security, and production AI UX.

Finish the course with more than a chat UI: build a production evidence pack for an AI interface with an explicit streaming state machine, schema-driven rendering, citations, approval boundaries, accessible status updates, adversarial tests, quality telemetry, and a tested rollback path.

0%0/10 lessons

Progress is stored locally in your browser.

8–14 weeks3 modules10 lessons2 assessments

Study operating system

How to complete the course and retain a real result

1. Design states before components

Define idle, submitting, streaming, validating, completed, cancelled, retryable error, and terminal error first. Buttons, spinners, and answer text must project controlled system state rather than hide logic across several boolean flags.

2. Separate preview from validated result

A partial stream improves perceived speed but is not a final domain result. Render untrusted text safely, and present structured output, citations, and proposed actions as confirmed only after schema and application-side validation.

3. Test without mouse or magic

Run every lab with keyboard-only navigation, screen-reader status announcements, slow network, cancellation, malformed payloads, duplicate events, and prompt-injected content. Verify observable UI state and side effects, not just a polished screenshot.

4. Capture UX evidence

Record state-transition traces, accessibility audits, error recovery, citation opening, approval decisions, time to first useful feedback, and task completion. A median response time alone does not show whether users understood the system state and retained control.

Course rules

Do not merely read it — prove it

  • Streaming is a transport lifecycle, not permission to present partial output as a confirmed result.
  • Generative UI renders an allowlisted schema; the model does not supply arbitrary component code, HTML, or authority.
  • Approval without a clear action, target, consequence, and decline path is consent theater, not human control.
  • Accessibility is tested across state transitions, errors, and recovery, not only by scanning a static finished page.
  • After a production UX or security incident, the minimized interaction trace becomes a permanent regression case.

Module 1

Shared AI core

Foundation for controlled and verifiable interaction with AI systems.

OutcomeThe developer understands model limits and can verify AI-generated results.

  1. AI literacy and model limits

    Core

    Capabilities, hallucinations, context limits, privacy, and responsible use.

    Material →

  2. Prompt and context engineering

    Core

    Instructions, examples, constraints, context, and output verification.

    Prerequisites: AI literacy and model limits

    Material →

  3. Structured outputs and evaluation

    Core

    Response schemas, deterministic checks, test cases, and acceptance criteria.

    Prerequisites: Prompt and context engineering

    Material →Resource →

Checkpoint after module

Trustworthy interaction baseline

  • ✓ model, privacy, and authority boundaries are explained in the flow
  • ✓ structured results have a schema and fallback
  • ✓ critical claims are distinguishable from source evidence

Scenario transfer lab

Transfer lab: trust contract for an AI response

Take an AI response that mixes explanation, facts, and a recommended action. Separate model text, validated fields, citations, uncertainty, and the action proposal so users can see information provenance and do not mistake a proposal for an action that already happened.

Deliverable

Response schema + annotated wireflow + content rules for loading, evidence, uncertainty, stale citations, validation failure, and unavailable sources.

Structured outputs →RAG citations →AI UX →Frontend Developer + AI roadmap →
  • ✓ an invalid payload never reaches a privileged component
  • ✓ a citation opens a concrete source or shows an explicit unavailable state
  • ✓ uncertainty is not hidden behind decorative confidence
  • ✓ an action proposal is visually and semantically distinct from a completed action

Module 2

AI interaction patterns

Interface patterns for probabilistic systems and long-running AI interactions.

OutcomeThe interface communicates streaming, uncertainty, approvals, and errors correctly.

  1. Chat UI and streaming responses

    Core

    SSE, partial output, cancellation, retries, and optimistic states.

    Material →

  2. Human-in-the-loop and approval UI

    Core

    Action confirmation, risk context, undo, and audit trail for consequential AI actions.

    Material →

  3. Accessibility for AI interfaces

    Recommended

    Screen readers, focus management, status updates, and progressive disclosure.

    Material →

  4. Project: production AI assistant interface

    Projectpractice + assessment

    Build a streaming chat interface with citations, approvals, error states, and accessibility.

    Prerequisites: Chat UI and streaming responses, Human-in-the-loop and approval UI

    Material →Practice →Assessment →

Checkpoint after module

Resilient AI interface

  • ✓ the streaming lifecycle has explicit transitions, cancellation, and retry policy
  • ✓ generated UI is constrained by an allowlisted schema
  • ✓ approval shows the action, target, consequence, and a decline path without side effects

Scenario transfer lab

Transfer lab: streaming, cancellation, and approval state machine

Build an assistant interface for a long answer and a proposed tool action. Reproduce a slow stream, disconnect, duplicate chunk, cancellation during generation, malformed final payload, and reopening approval after the target state changes.

Deliverable

Executable UI + state-transition table + automated component/e2e tests + a trace linking request, stream, validation, approval, and the authoritative action result.

Streaming and backpressure →Human in the loop →Tool-calling contracts →Production AI interface practice →
  • ✓ late or duplicate events cannot move the UI back to a false state
  • ✓ cancellation stops presentation and has a defined backend reconciliation path
  • ✓ partial output is never marked completed before final validation
  • ✓ approval rechecks target and permission immediately before the side effect

Module 3

Safety and production UX

Browser security, trust, explainability, structured rendering, and quality telemetry.

OutcomeThe AI interface has safe actions, evidence, fallbacks, and measurable UX quality.

  1. Prompt injection and browser security

    Core

    Untrusted content, XSS boundaries, tool approvals, and data leakage controls.

    Material →

  2. Generative UI and structured rendering

    Core

    Schema-driven components, validation, constrained rendering, and safe fallbacks.

    Material →

  3. Milestone: trustworthy AI frontend

    Milestonepractice + assessment

    An accessible, observable, and safe AI experience ready for production review.

    Prerequisites: Prompt injection and browser security, Generative UI and structured rendering

    Material →Practice →Assessment →

Checkpoint after module

Production UX gate

  • ✓ keyboard and screen-reader scenarios pass acceptance checks
  • ✓ prompt injection and unsafe rendering have regression cases
  • ✓ quality, task-success, and UX telemetry can stop rollout and trigger rollback

Scenario transfer lab

Transfer lab: accessibility, adversarial UX, and release gate

Test the finished flow as a probabilistic interface rather than a static page. Add keyboard-only and screen-reader scenarios, reduced motion, narrow viewport, prompt-injected sources, unsafe URLs, citation mismatches, timeout, and rollback to the previous schema version.

Deliverable

Versioned UX evaluation set + accessibility report + security regression suite + canary dashboard and runbook with stop, fallback, and rollback criteria.

Prompt-injection guardrails →AI evaluation →AI incident response →Knowledge Map →
  • ✓ status changes are announced without stealing focus
  • ✓ untrusted model or source content cannot create executable markup or unsafe navigation
  • ✓ evaluation measures task completion, recovery, evidence use, and accessibility separately
  • ✓ schema incompatibility or a severe regression activates documented fallback or rollback

Capstone contract

Capstone: trustworthy production AI assistant interface

Build an end-to-end AI interface where streaming, evidence, structured rendering, and consequential actions have explicit contracts. Prove that users understand system state, can inspect sources, cancel or reject actions, recover from failures, and complete the key task accessibly.

What to submit

  • — interaction/state model covering request, stream, validation, approval, action result, cancellation, retry, and terminal states
  • — versioned response and generative-UI schemas with allowlisted components, safe text/URL rendering, and backward-compatible fallback
  • — evidence UX with citations, freshness/unavailable states, uncertainty, and a clear distinction between model proposal and authoritative result
  • — approval contract with actor, action, target, parameters, risk context, expiry, permission recheck, and audit event
  • — automated accessibility, component, e2e, and adversarial tests for keyboard, screen reader, injection, malformed, duplicate, and stale events
  • — UX evaluation set and telemetry for task completion, recovery, validation failure, approval outcome, and time to first useful feedback
  • — canary, feature flag, fallback, and rollback runbook with schema/version compatibility checks

When it is ready

  • ✓ every visible state maps to a defined system state and has an accessible name or announcement
  • ✓ partial or malformed output cannot become a validated fact, component, or completed action
  • ✓ users can inspect evidence, decline safely, cancel the flow, and recover from retryable failure
  • ✓ untrusted content cannot bypass rendering, navigation, permission, or approval boundaries
  • ✓ the release gate blocks severe accessibility, security, evidence-integrity, or task-completion regressions
  • ✓ rollback restores a compatible UI/schema envelope without losing the audit trail of unfinished actions

Final practice and assessment

The course ends with a practical artifact and an acceptance rubric. The result is considered complete after the acceptance criteria are met, not merely after reading the materials.

Project: production AI assistant interface →Milestone: trustworthy AI frontend →Open roadmap →