Capstone: GenUI AI Full-Stack Copilot

Product scenario

Design a GenUI copilot for an internal customer operations team. The copilot answers policy questions, retrieves customer/account context, generates task-specific UI, calls approved tools, and escalates risky actions to human approval.

The system must be useful when the model is right, safe when the model is wrong, and understandable when retrieval or tools fail.

Functional requirements

• Deterministic application shell with chat/task workspace.
• GenUI component registry for cards, comparison tables, forms, citations, task summaries, and approval panels.
• RAG pipeline with citations and source freshness rules.
• Tool calls for low-risk read operations and approval-gated write operations.
• Streaming events for text, progress, generated components, tool status, errors, and completion.
• Eval harness for prompts, retrieval, generated component schemas, and tool safety.

Non-functional requirements

Concern	Requirement
Security	Tenant isolation, permission propagation, prompt-injection resistance, and tool audit logs.
Reliability	Model, retrieval, and tool failures must have deterministic fallback UI.
Accessibility	Generated components must use approved accessible primitives.
Performance	Streaming must preserve responsiveness and avoid excessive client bundle growth.
Observability	Track latency, cost, retrieval quality, tool outcomes, user corrections, and component failures.

Architecture constraints

• The model cannot invent arbitrary components or executable UI.
• Tool calls are server-authorized and risk-classified.
• Citations must be visible for policy or knowledge answers.
• Human approval is required for irreversible or externally visible actions.
• Model output must be validated before rendering.

Required diagrams

• End-to-end GenUI request flow.
• Component registry and schema validation flow.
• RAG retrieval and citation pipeline.
• MCP/A2A tool boundary and approval flow.
• Observability and eval feedback loop.

Sample GenUI architecture diagram

Sample component registry contract

Component	Allowed purpose	Required props	Forbidden behavior
PolicyAnswerCard	cited answer summary	title, summary, citations[], confidence	no raw HTML
ComparisonTable	compare options or policies	columns[], rows[], caption	no unbounded row count
ApprovalPanel	human approval for risky tool	action, risk, preview, confirmLabel	no auto-submit
TaskChecklist	workflow progress	items[], status	no hidden completed state

Sample eval feedback loop

Implementation milestones

1. Define deterministic shell and AI-owned surface boundaries.
2. Create component registry and schema validation contract.
3. Define streaming protocol events and reducer behavior.
4. Design RAG ingestion, retrieval, citation, and freshness policy.
5. Define tool risk classes, approval workflow, and audit log.
6. Add generated UI accessibility and security checks.
7. Build eval suite for prompts, retrieval, schema, and tool behavior.
8. Define observability, cost, and latency scorecard.
9. Complete production readiness review.

ADRs to write

• ADR: GenUI component registry and schema validation.
• ADR: RAG source quality and citation policy.
• ADR: MCP/A2A tool risk boundary and approval flow.
• ADR: AI observability and eval release gate.

Gates

Gate	Evidence
GenUI safety	Registry schema, validation failures, component fallback states.
RAG quality	Retrieval fixtures, citation policy, stale-source handling.
Tool safety	Risk matrix, approval UX, audit log, rollback path.
Security/privacy	Tenant isolation, permission propagation, prompt-injection test cases.
Evals	Regression suite and release threshold.
Observability	Cost, latency, quality, correction, and failure signals.

Failure-mode review

• Model requests a component not in the registry.
• Retrieved policy is outdated or contradictory.
• Tool succeeds but stream disconnects.
• User lacks permission for suggested action.
• Prompt injection attempts to bypass approval.
• Component payload validates but creates poor accessibility.
• Model outage occurs during an active workflow.

Architecture drills

Drill	Expected architect-level answer	Common weak answer
The model requests a component that is not in the registry.	Reject schema, render deterministic fallback, log validation failure, update evals if the request is legitimate, and keep arbitrary UI/code blocked.	Let the model render HTML.
A prompt injection asks the agent to skip approval for a write action.	Enforce server-side tool policy, classify action risk, require approval, audit the attempt, and add injection test coverage.	Add a stronger prompt warning.
Retrieval returns contradictory policy documents.	Surface citation conflict, prefer authoritative freshness rules, avoid unsupported action, and route to human review.	Pick the answer with higher model confidence.

Final review rubric

Use rubrics/ai-fullstack-genui-architect-rubric. Passing requires level 4 in product boundary, registry, RAG, tool safety, evals, observability, and security/privacy.

Portfolio deliverables

• GenUI architecture overview.
• Component registry contract.
• RAG policy and eval report.
• Tool risk matrix.
• Approval UX flow.
• Observability dashboard design.
• Production readiness review.

Completed artifact targets

By the end, the capstone should include:

• one registry contract using part-xii/completed-examples/completed-genui-registry-contract
• one eval matrix using part-xii/completed-examples/completed-genui-eval-matrix
• one completed GenUI review using review-packets/genui-ai-system-review-packet
• one tool-risk ADR covering MCP/A2A boundary and approval policy

Use capstones/solution-packs/capstone-solution-pack-genui-copilot and part-xii/completed-examples/completed-genui-launch-review as calibrated examples of a strong final answer.