# 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 19 facets · 111 facts · page: https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/ ## 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). — [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. — [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. — [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. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#1-streaming-ux) - Named rendering techniques (TheFrontKit): — [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. — [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. — [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. — [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). — [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. — [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. — [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). — [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). — [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. — [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(). — [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. — [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 (). — [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. — [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). — [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. — [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. — [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. — [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. — [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. — [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). — [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. — [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). — [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. — [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). — [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. — [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. — [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): — [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). — [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. — [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. — [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). — [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). — [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. — [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. — [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): — [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?"). — [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. — [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). — [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"). — [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. — [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). — [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. — [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. — [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. — [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. — [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). — [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: — [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. — [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. — [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. — [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). — [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. — [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. — [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. — [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%. — [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. — [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. — [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. — [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. — [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). — [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. — [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. — [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. — [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. — [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). — [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. — [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. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Vercel AI SDK - streamUI (RSC) - RSC streaming, paused. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Vercel AI SDK - Generating Structured Data - generateObject/streamObject + Zod. — [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. — [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. — [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. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - DevActivity - Streaming structured content - progressive object rendering. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Redis - Streaming LLM responses - perceived +40%, TTFT thresholds. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Redis - TTFT meaning - TTFT definition/metric. — [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. — [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. — [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. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - NN/g - Prompt Suggestions - suggestions and follow-ups. — [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. — [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. — [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). — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Google PAIR Guidebook - 6 chapters + patterns. — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Google PAIR - Feedback + Control - feedback rules, confidence display. — [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." — [source](https://llms-explorer.com/sources/global-ai-hub/ai-native-ux-generative-ui/#sources) - Apple HIG - Generative AI - transparency, expectations, control. — [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. — [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. — [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. — [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. — [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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(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](https://llms-explorer.com/tree/ai-native-ux-generative-ui-design-for-llm-applications/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)* ## Context files - [AI-Native UX & Generative UI Design for LLM Applications](https://llms-explorer.com/downloads/sources/global-ai-hub/ai-native-ux-generative-ui.md)