AI-Native UX and Generative UI Design

Parent: Frontend Design · Published reference · snapshot 2026-09-08 · skill frontend-ui

Also known as: AI-Native UX & Generative UI Design for LLM Applications

AI-native UX is consolidating into a recognizable pattern language. Three findings dominate. First, streaming is the foundational UX primitive: users perceive streaming interfaces as ~40% faster than

These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.

Executive Summary

AI-native UX is consolidating into a recognizable pattern language. Three findings dominate. First, streaming is the foundational UX primitive: users perceive streaming interfaces as ~40% faster than buffered responses even at identical total latency, making time-to-first-token (TTFT) the key design metric, not total completion time (Redis, TheFrontKit). Second, Generative UI - LLMs emitting renderable components rather than only text - has standardized around tool-call-driven rendering. The Vercel AI SDK is the reference implementation, but its RSC path (streamUI/createStreamableUI) is officially paused; the recommended production approach is now the client-side useChat hook reading typed message parts, with streamObject/useObject for structured-output-to-component (ai-sdk.dev, Vercel). Third, the trust/calibration layer is contested: NN/g warns that chain-of-thought "show your work" displays and citations can inflate unjustified trust because reasoning traces are often post-hoc rationalizations and users rarely click citations yet feel more confident seeing them (NN/g). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#executive-summary]
Four authoritative design frameworks now govern this space: Microsoft's 18 Guidelines for Human-AI Interaction (the most cited, 4-phase rubric), Google's People + AI Guidebook (6 chapters + patterns), Apple's Generative AI HIG (transparency-first), and the community Shape of AI pattern library (6 categories, ~60 named patterns). They converge on: disclose AI use, set capability expectations, support efficient correction/dismissal, fail gracefully, and give granular feedback + global controls. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#executive-summary]

1. Streaming UX

Why it matters. TTFT is "one of the most visible metrics for production LLM apps because it directly shapes perceived responsiveness" (Redis TTFT). Thresholds: under 0.5s feels instant, 0.5–1s responsive, and above 1.5–2s feels sluggish unless the UI explains what is happening (Redis). Streaming TTFT is typically 200–500ms vs 5–30s for buffered (TheFrontKit). Perceived speed gain: ~40% at identical total time (Redis). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
The hard part is rendering, not receiving (TheFrontKit). Transport is usually Server-Sent Events (SSE) over a persistent HTTP connection (data: {"choices":[{"delta":{"content":"..."}}]}); WebSockets are the bidirectional alternative. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
Named rendering techniques (TheFrontKit): [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
- Markdown buffering / "only render complete structures" - defer rendering of unclosed bold/italic markers, code fences, incomplete table rows, partial list items, to avoid formatting flicker as ambiguous characters arrive. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
- Code-highlight strategies - (a) defer syntax highlighting until block completion, (b) progressive highlighting with 200–300ms debounce, (c) language detection from the opening fence. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
- Layout-thrash prevention - set min-heights on response containers; use CSS that grows vertically without sibling reflow; scroll the response area independently from page content. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
- Smooth streaming - batch/animate token reveal rather than rendering each raw chunk, to avoid jitter (the perceived-TTFT lever product teams control independently of infra TTFT, per Redis). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
Stop / regenerate / progressive disclosure. Streaming enables progressive disclosure - users read early tokens while later ones arrive. A Stop button must be visible during streaming and must preserve partial output; Retry/Regenerate and Copy appear post-completion; a rendered/raw toggle lets users inspect source (TheFrontKit). Early interruption also cuts token cost. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]
Accessibility (streaming-specific). Use aria-live="polite" + aria-atomic="false" so screen readers announce new content without re-reading; aria-busy="true" during the stream; batch announcements every 2–3s, not per-token; never steal input focus while streaming (TheFrontKit). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux]

2. Generative UI

Definition (Vercel): "the process of allowing a large language model (LLM) to go beyond text and 'generate UI'" (ai-sdk.dev). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
The tool-call-driven pattern (current recommended path). Architecture: client sends prompt + conversation history + available tools via useChat → model decides whether to call a tool → tool results stream back and map to React components (ai-sdk.dev). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
- Tool definition (ai/tools.ts, createTool()): a description, a Zod inputSchema, and an execute function returning structured data shaped like the component props. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
- API route: streamText() with the tools, returning toUIMessageStreamResponse(). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
- Typed message parts: each message carries a parts array. Text parts { type:'text', text }; tool parts { type:'tool-{toolName}', state, input/output }. Tool-part states: input-available (loading), output-available (success, has data), output-error. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
- Client rendering: switch on part.type and part.state; spread part.output into the component (<Weather {...part.output} />). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
RSC path is paused. streamUI / createStreamableUI (AI SDK RSC) streams React Server Components directly from the server, but "Development of AI SDK RSC is currently paused" and Vercel recommends AI SDK UI for production (ai-sdk.dev streamUI, GitHub discussion #2162). Decision rule from the maintainers: RSC/Server Actions → streamUI; client-side hooks → streamText + useChat or streamObject + useObject (#2162). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
Structured-output-to-component. streamObject (core) constrains output to a Zod/Valibot/JSON schema and streams partial objects as fragments arrive; the client useObject (still experimental_useObject) progressively builds the object so the UI can render incrementally - recommended for large response structures (ai-sdk.dev structured data, AI Hero, DevActivity). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
useChat API surface (ai-sdk.dev useChat): returns messages (UIMessage[]), status ('submitted'|'streaming'|'ready'|'error'), error, sendMessage, regenerate (resend last user message, optional messageId), stop (aborts the transport stream), clearError, resumeStream, addToolOutput, setMessages. The status enum is the canonical state machine for skeleton/typing/stop affordances. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]
Generative-UI runtimes beyond Vercel. Thesys C1 is an OpenAI-compatible API middleware that returns a structured UI spec (forms, tables, charts, layouts) instead of text, rendered by the C1 React SDK; supports tool calls, state, actions, multi-step flows, and bring-your-own components/design system (Thesys, DEV). Thesys also publishes OpenUI as "the open standard for generative UI" (GitHub). Vendor-reported productivity claims (80% less frontend code, 10x faster) are marketing, not independently verified - Confidence: Low on those figures, High on the architecture. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#2-generative-ui]

3. Latency Masking & Perceived Performance

TTFT is a design variable, shapeable independently of infra latency via streaming and animation (Redis). High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#3-latency-masking-perceived-performance]
Skeleton screens / placeholders / shimmer during the 200ms–several-seconds gap before first token - "if nothing visible happens during this time, users think the submit failed" (TheFrontKit). High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#3-latency-masking-perceived-performance]
Thinking/typing indicators and "We're experiencing high demand, your request is queued" messaging buy patience: "Transparency beats silence - users are forgiving when they understand what's happening" (OrangeLoops). High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#3-latency-masking-perceived-performance]
Optimistic UI - render the user's submitted turn immediately and an assistant placeholder before the stream begins. Medium (widely practiced; less formally sourced here). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#3-latency-masking-perceived-performance]
Progressive disclosure as latency mask - see §1. High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#3-latency-masking-perceived-performance]

4. Trust & Calibration UI (most contested area)

Goal: "calibrating users' trust is crucial for establishing appropriate reliance" - neither over- nor under-trust (NN/g research agenda). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#4-trust-calibration-ui-most-contested-area]
Citations / source attribution. Best practices (NN/g explainable AI): make citations visually prominent and separate from the response; place sources adjacent to the specific claim; use meaningful labels (publication/article titles) not generic ones; link to the relevant section; set the expectation upfront that sources may be inaccurate or fabricated. Perplexity is the exemplar - inline numbered citations next to referenced text, retrieve-then-synthesize, with measurably lower reference-hallucination than ChatGPT (ZipTie, SearchEngineLand). Contrarian finding: "people rarely click citation links, yet they still develop false confidence from seeing citations present" (NN/g). Confidence: High on the practices; the trust effect is Medium/contested. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#4-trust-calibration-ui-most-contested-area]
"Show your work" / reasoning traces. This is where guidance diverges. The Shape of AI documents Stream of Thought ("reveal AI's reasoning, tool use, and decisions") as a Governor pattern, and ChatGPT-5 Thinking ships a step-by-step walkthrough (Shape of AI, SearchEngineLand). But NN/g recommends avoiding step-by-step reasoning displays "for now" because they are "rationalizations generated after the fact, rather than faithful representations" and risk promoting trust in flawed tools (NN/g). Report both: collapsible reasoning aids steerability/debugging but should not be presented as ground-truth explanation. Confidence: Low (genuine disagreement between sources). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#4-trust-calibration-ui-most-contested-area]
Confidence display & uncertainty. Google PAIR's Explainability + Trust chapter recommends partial explanations, progressive disclosure, and model-confidence displays (PAIR feedback, Buildo). "Good AI UX doesn't pretend to be certain - it exposes confidence levels, pauses, narrows scope, and backs off when conditions degrade" (UX Bulletin). Confidence cascades (from voice assistants): high confidence → act + confirm; medium → request clarification; low → explicit uncertainty (OrangeLoops). Medium - numeric confidence percentages are debated; behavioral confidence cues are better supported. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#4-trust-calibration-ui-most-contested-area]
Anthropomorphization / disclaimers (NN/g): eliminate first-person phrasing that implies human thinking; avoid names/personalities/backstories that inflate perceived capability; put specific, actionable disclaimers ("Double-check AI outputs") near the input, not buried in footers; avoid vague "AI-generated, for reference only." High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#4-trust-calibration-ui-most-contested-area]

5. Refusal / Error / Fallback UX

Error taxonomy (Google PAIR Errors + Graceful Failure) (PAIR errors): [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
- System limitations - can't give a right/any answer (missing data, insufficient precision). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
- Context errors - system "working as intended" but the user perceives an error because it broke their mental model or rested on poor assumptions. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
- User-perceived vs. invisible - context errors/failstates are visible; "happy accidents" and background errors are not. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
- Error sources: prediction/training-data errors, input errors, relevance errors (low confidence, bad timing), system-hierarchy errors (multi-system conflicts). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
Communication principle: "Be human, not machine … Address mistakes with humanity and humility"; make failure "safe, boring, and a natural part of the product" (PAIR errors). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
Graceful-degradation patterns (aiuxdesign.guide, UX Bulletin): degradation answers three user questions - what still works? what doesn't? what next? Offer 2–3 recovery options (retry / wait-in-queue / offline-basic mode); let users revert an AI decision; route to human assistance or manual paths when the AI can't solve it. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]
"I don't know" done well: "Graceful failure doesn't just say 'I don't know' - it suggests next steps, like ChatGPT prompting users to rephrase" (OrangeLoops). Guardrail-block messaging should acknowledge the limit, explain, and offer an alternative rather than a cryptic refusal (Clearly Design). Maps to HAX G9/G10 (efficient correction; scope when in doubt). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#5-refusal-error-fallback-ux]

6. Human-AI Handoff & Steering

Prompt-input design - NN/g "4 main uses of prompt controls" (NN/g prompt controls): [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
- Increase feature discoverability - show upload icons etc. instead of forcing users to ask ("can you upload files?"). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
- Educate & inspire - conversation starters, prompt libraries ("Inspiration Center"); ~19–30% of users are unfamiliar with GenAI capabilities. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
- Set constraints - scope/output controls up front (Perplexity Focus: Reddit/YouTube/academic; chart-type pickers). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
- Facilitate follow-ups - since 77% of conversations have >1 exchange, offer edit/regenerate/copy and quick modifiers (Gemini "Shorter," "More casual"). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
Input best practices (NN/g): standard icons with labels/tooltips (novel icons confuse); clearly named features (avoid vague brand labels like "Think Carefully"); group controls by purpose (proximity); don't override standard gestures. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
Suggestions / follow-ups (NN/g prompt suggestions): system-generated hints (questions, phrases, keywords) showcase capability and reduce effort; follow-up questions shown below an answer drive engagement and continuation; proactively ask framing questions instead of launching a generic response (mixed-initiative). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]
Feedback affordances (NN/g, Shape of AI): standard, universally-understood icons - favorite, thumbs-up, thumbs-down, copy, share - at the bottom of each reply; edit-in-place of generated artifacts (diagrams, text); Regenerate to explore alternatives; Variations to compare versions side-by-side. Google PAIR's Feedback + Control chapter adds three rules: align feedback with model improvement (implicit vs explicit), communicate value + time-to-impact, and balance control/automation with easy opt-out (PAIR, Buildo). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#6-human-ai-handoff-steering]

Microsoft — 18 Guidelines for Human-AI Interaction (2019 CHI paper, the canonical rubric; validated with 49 practitioners against 20 products) ([Microsoft Research](https://www.microsoft.com/en-us/research/blog/guidelines-for-human-ai-interaction-design/), [HAX Toolkit](https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/))

Initially: G1 Make clear what the system can do · G2 Make clear how well it can do it. During interaction: G3 Time services based on context · G4 Show contextually relevant information · G5 Match relevant social norms · G6 Mitigate social biases. When wrong: G7 Support efficient invocation · G8 Support efficient dismissal · G9 Support efficient correction · G10 Scope services when in doubt · G11 Make clear why the system did what it did. Over time: G12 Remember recent interactions · G13 Learn from user behavior · G14 Update and adapt cautiously · G15 Encourage granular feedback · G16 Convey the consequences of user actions · G17 Provide global controls · G18 Notify users about changes. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#microsoft-18-guidelines-for-human-ai-interaction-2019-chi-paper-the-canonical-rubric-validated-with-49-practitioners-against-20-products-microsoft-researchhttpswwwmicrosoftcomen-usresearchblogguidelines-for-human-ai-interaction-design-hax-toolkithttpswwwmicrosoftcomen-ushaxtoolkitai-guidelines]
The toolkit also ships HAX Design Patterns, a searchable Design Library with implementation examples, and a Workbook for prioritization (HAX Toolkit). Confidence: High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#microsoft-18-guidelines-for-human-ai-interaction-2019-chi-paper-the-canonical-rubric-validated-with-49-practitioners-against-20-products-microsoft-researchhttpswwwmicrosoftcomen-usresearchblogguidelines-for-human-ai-interaction-design-hax-toolkithttpswwwmicrosoftcomen-ushaxtoolkitai-guidelines]

Google — People + AI Guidebook (PAIR) ([PAIR](https://pair.withgoogle.com/), [Buildo](https://www.buildo.com/blog-posts/what-we-learned-from-googles-people-ai-guidebook))

Six chapters: User Needs + Defining Success · Data Collection + Evaluation · Mental Models · Explainability + Trust · Feedback + Control · Errors + Graceful Failure, plus a pattern set with sensitizing examples (patterns and anti-patterns). High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#google-people-ai-guidebook-pair-pairhttpspairwithgooglecom-buildohttpswwwbuildocomblog-postswhat-we-learned-from-googles-people-ai-guidebook]

Apple — Generative AI HIG ([Apple HIG](https://developer.apple.com/design/human-interface-guidelines/generative-ai))

Transparency-first: "Communicate where your app uses AI" to set expectations and let people knowingly opt in; responsibly/transparently incorporate generation; manage expectations and maintain user control; built-in safety guardrails on model input/output. Granular Apple error/feedback specifics were not extractable (JS-rendered page) - see Knowledge Gaps. Medium (page-render gap). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#apple-generative-ai-hig-apple-highttpsdeveloperapplecomdesignhuman-interface-guidelinesgenerative-ai]

Shape of AI — community pattern library (curator Emily Campbell) ([Shape of AI](https://www.shapeof.ai/))

Six categories with ~60 named patterns: [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Wayfinders (start the first prompt): Gallery, Follow Up, Initial CTA, Nudges, Prompt Details, Randomize, Suggestions, Templates. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Inputs / Prompt Actions: Auto-fill, Chained Action, Describe, Expand, Inline Action, Inpainting, Madlibs, Open Input, Regenerate, Restructure, Restyle, Summary, Synthesis, Transform. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Tuners (refine via context/params): Attachments, Connectors, Filters, Model Management, Modes, Parameters, Preset Styles, Prompt Enhancer, Saved Styles, Voice and Tone. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Governors (human-in-the-loop oversight): Action Plan (show intended steps before execution), Branches, Citations, Controls (pause mid-stream), Cost Estimates, Draft Mode, Memory, References, Sample Response, Shared Vision, Stream of Thought, Variations, Verification (confirm before proceeding). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Trust Builders: Caveat, Consent, Data Ownership, Disclosure (mark AI content), Footprints (trace steps prompt→result), Incognito Mode, Watermark. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
- Identifiers: Avatar, Color, Iconography, Name, Personality. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]
Agent UX specifics. Showing the agent's plan and tool use maps to Shape of AI Action Plan, Stream of Thought, Footprints, and Verification, and to HAX G11 (why it did what it did) - surface intended steps before execution, reveal tool calls, and gate consequential actions behind confirmation (Shape of AI, Microsoft Research). High. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#shape-of-ai-community-pattern-library-curator-emily-campbell-shape-of-aihttpswwwshapeofai]

Key Takeaways

Optimize TTFT, not total latency. Stream by default; mask the pre-first-token gap with skeletons; animate token reveal (smooth streaming). Perceived speed ≈ +40%. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]
Generative UI = tool-calls → typed parts → components. Use Vercel AI SDK useChat + streamText/tools (client-side) - not the paused RSC streamUI. Use streamObject/useObject + a Zod schema for structured-output-to-component. Thesys C1/OpenUI is the schema-driven runtime alternative. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]
Calibrate trust deliberately and skeptically. Inline, claim-adjacent citations (Perplexity-style) with honest disclaimers near the input; treat reasoning-trace displays as steering aids, not faithful explanations (NN/g caution); prefer behavioral confidence cues (confidence cascades) over raw percentages. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]
Engineer failure. Classify errors (PAIR: system / context / invisible); "be human, not machine"; offer 2–3 recovery paths + revert + human handoff; never a cryptic refusal. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]
Make steering cheap. Prompt controls for discoverability/education/scoping/follow-ups; standard feedback icons (thumbs/copy/edit/regenerate); mixed-initiative framing questions. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]
Anchor to the four frameworks. Microsoft 18 Guidelines (rubric), Google PAIR (process + patterns), Apple HIG (transparency), Shape of AI (concrete pattern vocabulary). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#key-takeaways]

Knowledge Gaps

Apple Generative AI HIG granular detail - the official page is JS-rendered and did not return full text via WebFetch after 2 attempts; only high-level transparency/expectations guidance was confirmed via secondary sources. The error-handling, feedback, and over-reliance specifics should be read directly at developer.apple.com. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#knowledge-gaps]
Numeric confidence display - whether to show explicit confidence percentages is contested; behavioral cues (cascades, hedging language) are better supported than numeric scores. Low/Medium. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#knowledge-gaps]
Reasoning-trace display - direct disagreement: Shape of AI / shipping products embrace "Stream of Thought"; NN/g advises against presenting it as explanation. Low. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#knowledge-gaps]
Thesys C1 productivity claims (80% less frontend code, 10x faster) - vendor marketing, not independently verified. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#knowledge-gaps]
Full HAX Design Patterns catalog - confirmed to exist as a searchable library but individual patterns were not enumerated here (out of scope for this pass). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#knowledge-gaps]

Sources

Vercel AI SDK - Generative UI - tool-call→parts pattern; RSC paused. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Vercel AI SDK - useChat reference - messages/status/stop/regenerate API. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Vercel AI SDK - streamUI (RSC) - RSC streaming, paused. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Vercel AI SDK - Generating Structured Data - generateObject/streamObject + Zod. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
vercel/ai Discussion #2162 - streamUI vs streamObject/streamText decision rule. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Vercel - AI SDK docs - three-layer (Core/UI/RSC) architecture. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
AI Hero - Structured Outputs with Vercel AI SDK - useObject/streamObject usage. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
DevActivity - Streaming structured content - progressive object rendering. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Redis - Streaming LLM responses - perceived +40%, TTFT thresholds. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Redis - TTFT meaning - TTFT definition/metric. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
TheFrontKit - Streaming UI in AI apps - SSE, markdown buffering, layout thrash, stop, a11y. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
NN/g - Explainable AI in Chat Interfaces - citations, anti-reasoning-trace, disclaimers, anthropomorphization. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
NN/g - Prompt Controls in GenAI - 4 main uses + input best practices. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
NN/g - Prompt Suggestions - suggestions and follow-ups. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
NN/g - Research Agenda for GenAI in UX - trust calibration framing. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Microsoft Research - Guidelines for Human-AI Interaction - all 18 guidelines, 4 phases. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Microsoft HAX Toolkit - AI Guidelines - toolkit components (Patterns/Library/Workbook). [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Google PAIR Guidebook - 6 chapters + patterns. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Google PAIR - Feedback + Control - feedback rules, confidence display. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Google PAIR - Errors + Graceful Failure - error taxonomy, "be human not machine." [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Apple HIG - Generative AI - transparency, expectations, control. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Shape of AI - 6-category, ~60-pattern AI UX library. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
Thesys C1 + OpenUI / DEV writeup - schema-driven generative-UI runtime. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]
OrangeLoops - 9 UX patterns for trustworthy AI / ZipTie - How Perplexity cites - trust/confidence/citation patterns. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources]

Methodology

Ran 11 web searches + 8 deep page-fetches (built-in WebSearch/WebFetch fallback; firecrawl/exa not configured, so source targets were raised ~50%). Analyzed 24 sources across 7 sub-questions: streaming UX, generative UI, latency masking, trust/calibration, refusal/error UX, human-AI steering, and design-system heuristics. Prioritized primary/authoritative sources (Vercel AI SDK docs, NN/g, Microsoft HAX/Research, Google PAIR, Apple HIG, Shape of AI). Injection guard honored - no fetched page content was treated as instructions; no adversarial redirection encountered. [archived source: https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#methodology]

Where this helps

Designing a chat or assistant interface where streaming responses need to feel fast — deciding what to render token-by-token, when to buffer markdown, and how to mask the pre-first-token gap. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Building a generative-UI feature where the model's tool calls should render as typed components (a weather card, a chart, a form) instead of as plain text. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Deciding how much of a model's reasoning or tool use to expose to the user, and how to display confidence or citations without either overstating or hiding uncertainty. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Designing the refusal, error, and recovery experience for an AI feature so a failure reads as a natural, human product moment instead of a cryptic dead end. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Project ideas

Build a chat UI with the Vercel AI SDK's useChat hook, streaming tokens over SSE with markdown buffering so incomplete bold/italic markers and code fences don't flicker as they arrive. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Implement a tool-call-driven generative UI: define a Zod-typed tool with createTool(), stream its output back through typed message parts, and render each part.type as a distinct React component. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Add optimistic UI and skeleton placeholders for the 200ms-to-several-second gap before the first token, plus a visible Stop button that preserves partial output when interrupted. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Build a trust-calibration layer that places claim-adjacent citations next to specific statements (Perplexity-style) instead of a single unlabeled source list at the bottom of the response. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Antipatterns

Rendering every raw streamed chunk immediately without markdown buffering, causing visible flicker as incomplete bold/italic markers, code fences, or table rows resolve mid-stream. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Hiding a Stop button during streaming, or discarding partial output when a user does stop the generation. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Presenting a model's chain-of-thought as a faithful explanation of its reasoning rather than as a steering aid — NN/g explicitly warns against this, since a displayed reasoning trace is not guaranteed to reflect the actual computation. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Returning a cryptic refusal or generic error with no recovery path, instead of classifying the failure (system limitation vs context error) and offering 2-3 concrete next steps. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Known issues

The four major design frameworks this pack draws on (Microsoft, Google PAIR, Apple, Shape of AI) actively disagree on reasoning-trace display — some treat 'Stream of Thought' as a trust-building pattern, others advise against presenting it as an explanation at all. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Numeric confidence display is contested: behavioral cues (hedging language, disclaimers) are better evidenced than showing an explicit confidence percentage, per this pack's own knowledge-gaps section. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
The React Server Components path for generative UI (streamUI / createStreamableUI) is explicitly paused by Vercel, so any new build should default to the AI SDK UI (useChat + typed message parts) path instead. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Several vendor productivity claims cited in adjacent tooling (e.g. Thesys C1's stated code-reduction numbers) are marketing claims that this pack notes were not independently verified. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.

Children

Streaming UX (TTFT, markdown buffering, smooth streaming, a11y) (frontier)
Generative UI (Vercel AI SDK useChat/streamObject, typed parts, paused RSC, Thesys C1/OpenUI) (frontier)
Latency masking & perceived performance (frontier)
Trust & calibration UI (citations, confidence cascades, reasoning-trace caveat) (frontier)
Refusal/error/fallback UX (PAIR taxonomy) (frontier)
Human-AI steering & feedback affordances (frontier)
Governing frameworks (Microsoft HAX 18, Google PAIR, Apple HIG, Shape of AI) (frontier)

Frontier under this node: Generative UI (Vercel AI SDK useChat/streamObject, typed parts, paused RSC, Thesys C1/OpenUI), Governing frameworks (Microsoft HAX 18, Google PAIR, Apple HIG, Shape of AI), Human-AI steering & feedback affordances, Latency masking & perceived performance, Refusal/error/fallback UX (PAIR taxonomy), Streaming UX (TTFT, markdown buffering, smooth streaming, a11y), Trust & calibration UI (citations, confidence cascades, reasoning-trace caveat)

← the whole tree · 3D view· how to read this page