AI curriculum

Course outline for Web Application Development in the AI Era

Stopping visible text does not necessarily stop backend work or undo a committed action. Build a mock AI-enabled web feature that separates generated proposals, validated artifacts, user approval, and actual effects. Keep rendering and authority on the application side, and report cancellation truthfully at each state.

Technology: AI-Native Web and Application Development
Duration: 6 hours
Modules: 3 · 2 hours each
Level: Level 4

About Web Application Development in the AI Era

Web Application Development in the AI Era Course Objectives

Review an AI-assisted interface change with independently run tests.
Implement conversational progress, error, and approval states.
Validate structured UI descriptions against an allowed component set.
Enforce backend validation and version-bound action approval.
Distinguish stopping a stream, canceling pending work, and undoing a committed effect.

Pre-requisites

Frontend/backend competence equivalent to Web Application Foundations for AI Engineers.
Validated model-interaction competence equivalent to Building Applications with LLMs.
Familiarity with model APIs, structured output, and local tests; agent and security study are useful extensions.

Before this course

Complete the required courses or bring equivalent experience. Recommended courses add useful depth; they are not enrolment gates.

Required preparation

Recommended preparation

Can build frontend/backend features and validated model interactions before implementing AI interaction states and tool boundaries.

Find your place in the learning map

Lab Setup

Computer with a browser, code editor, and supplied frontend/backend scaffold.
Use synthetic inputs, a local mock event stream, structured UI fixtures, and a disposable mock state store; no paid model API is required.
Supply an explicit backend cancellation contract; no generated HTML or script is executed directly.

Detailed Course Outline

Module 1: Controlled AI interaction

AI-assisted development: Review generated interface changes against requirements and independently run tests; distinguish plausible code suggestions from verified application behavior.
AI-enabled interfaces: Represent generated proposals, validated artifacts, approval, and actual effects separately; expose uncertainty and user controls rather than implying automatic completion.
Conversational UX: Design clear progress, error, clarification, and approval states; compare conversation with a conventional form when interpretation introduces unnecessary ambiguity.

Practical outcome: Implement a scaffolded draft-and-approve interface with clear uncertainty, user controls, and independent checks on generated changes.

Module 2: Streaming and constrained rendering

Streaming responses: Render incremental mock events and handle stream interruption; distinguish stopping visible output from backend cancellation and confirmed action completion.
Generative UI: Validate structured component descriptions against an allowlist; reject malformed or unsafe output without executing generated HTML or scripts.
Agent interfaces: Display tool progress and backend-confirmed action status separately; show proposed actions and required user decisions without trusting agent narration.

Practical outcome: Render mock streaming events and allowlisted component descriptions; reject malformed or unsafe output and separate progress messages from backend-confirmed action status.

Module 3: Backend effect semantics

AI backends: Enforce schema, business rules, and version-bound authority before effects; reconcile delayed results against actual backend state instead of interface assumptions.
AI-native architecture: Separate model proposals, constrained rendering, application validation, and effect execution; keep authority and state transitions outside generated content.
Commit-aware cancellation states: Distinguish stream stop, confirmed pending-work cancellation, and committed effects; reconcile races before reporting outcomes, with compensation requiring a separate authorized operation.

Practical outcome: Implement proposed, validated, awaiting-approval, pending, canceled, committed, and failed states; reconcile unknown status with the backend. Distinguish stream stop, confirmed pending-work cancellation, and a separate authorized compensation after commitment.

Practical exercise

Submit the local interaction, transition table, rendering contract, and automated state tests.
Test a valid approved action, malformed UI output, unauthorized mutation, stop-stream-only, confirmed pre-commit cancellation, post-commit cancellation, and a cancellation/commit race with a delayed result.
Reject every invalid component or forbidden write and keep the server action bound to the approved payload and version.
Require all transition tests to pass: stopping the stream alone leaves backend work unchanged; confirmed pre-commit cancellation prevents the pending mock effect; post-commit cancellation reports commitment, not automatic rollback.
Keep the race outcome unknown until backend state is retrieved; then display the actual result. Any compensation requires a separate approved operation and is not guaranteed to erase the original effect.

What you will produce

Implement an AI web interaction with safe rendering and truthful action/cancellation states.

How the work is checked

The UI rejects malformed or nonallowlisted descriptions without executing generated scripts.
Only the exact approved action can commit; unauthorized fixtures preserve protected state.
Stopping the stream does not cancel backend work; confirmed pending cancellation prevents an effect; post-commit cancellation never claims rollback.
The delayed cancellation/commit race displays unknown status until reconciliation and then matches actual backend state.

Six-hour mock-backed web implementation; live model integration, robust cancellation protocols, and production rendering security require further work.

When another approach is better

A conventional form is preferable when conversational interpretation adds ambiguity without value.
Do not expose dynamic rendering when a fixed component set can express the task safely.
Do not promise cancellation can undo an effect that has already committed.

How we train

Ask about exercises, instructor feedback and the prior knowledge you need. Tool-specific courses marked provisional may become modules in a broader course.

Discuss your learning goals