Learning Path: AI Full-Stack and GenUI Architect
Target learner
This path is for engineers building AI-assisted interfaces, generative UI, RAG-backed applications, agentic workflows, MCP/A2A integrations, and hybrid-rendered AI product experiences. The goal is to learn how to make AI behavior useful, observable, secure, accessible, and bounded by deterministic product architecture.
Prerequisites
You should understand React, server/client rendering, API design, auth/session boundaries, design-system primitives, observability, and basic LLM concepts such as prompts, tools, retrieval, citations, and evals.
Recommended chapter sequence
| Phase | Chapters | Outcome |
|---|---|---|
| Foundation | Part 0, Part III, Part VII, Part VIII | Build rendering, component, security, and reliability foundations before adding AI. |
| AI stack | Part XIII in order | Learn GenUI, AG-UI/A2UI, agents, RAG, MCP/A2A, production evals, and hybrid rendering. |
| Practice | part-xiii/build-a-genui-ai-fullstack-system | Build the end-to-end system skeleton. |
| Review | review-packets/genui-ai-system-review-packet | Evaluate model, tool, UI, retrieval, and observability boundaries. |
Eight-week study plan
| Week | Focus | Required output |
|---|---|---|
| 1 | Product boundary | Define deterministic shell, AI surfaces, and non-AI fallback behavior. |
| 2 | Component registry | Define allowed generated components, schemas, validation, accessibility, and versioning. |
| 3 | Streaming UI | Build event semantics for text, tool progress, generated components, errors, and approvals. |
| 4 | RAG | Design retrieval, citation, source quality, stale document, and context packing rules. |
| 5 | Tools and approvals | Define tool risk classes, human approval points, audit logs, and rollback. |
| 6 | Evals | Create prompt fixtures, retrieval tests, component rendering tests, and red-team cases. |
| 7 | Observability | Track model, retrieval, tool, latency, cost, user correction, and component failure signals. |
| 8 | Capstone | Complete the GenUI AI full-stack copilot capstone. |
Required exercises
- Write a GenUI schema and registry ADR.
- Write an MCP tool boundary ADR.
- Build a RAG evaluation matrix with source quality checks.
- Design a fallback UX for model outage and low-confidence answers.
Capstone project
Complete capstones/capstone-genui-ai-fullstack-copilot. It must include a deterministic application shell, component registry, RAG boundary, tool approval flow, eval harness, observability model, security controls, and final review packet.
Portfolio artifacts
- GenUI architecture diagram
- Component registry contract
- RAG and citation policy
- Tool risk matrix
- Evals and red-team report
- Cost and latency budget
- Production readiness review
Self-assessment rubric
Use rubrics/ai-fullstack-genui-architect-rubric. A strong score requires evidence that AI features are bounded by product contracts, not only working demos.
Review checklist
- Can the product still function when AI is slow, wrong, or unavailable?
- Are generated UI components selected from a safe registry?
- Are tools permissioned, audited, and reversible?
- Are retrieval sources visible and testable?
- Are evals connected to release decisions?