Design System

Generative UI - Renderers

Overview
Review paths
Preview chat app surfacesOpen the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.Build an inline app surfaceUse the host-friendly card, rail, and fullscreen rules.Review widget inventoryCompare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.Review artifact cardsCompare reference, decision, and generated artifact patterns.Design a shellStart with bounded chat shells, context rails, and panel states.Compare mobileReview mode changes, device framing, and recipe-level examples.Inspect tokensCheck foundation rules before composing new surfaces.

GenUI Renderers

The runtime has two renderer layers: expression-based GenUI for open composition and typed JSON artifacts for known decision states.

GenUI Renderer

Expression-based runtime specs rendered from the GenUI primitive registry. Use the bar pattern here for step collection, not for total profile completeness.

Developer details

Start from these files when you need to trace the live implementation.

shared/ui/chat/generative-ui/GenerativeUiRenderer.tsx

Business confirmation card

ABC Masonry & Restoration

123 Main St, Denver, CO — 4.8 stars

VerifiedMasonry42 Reviews

Progress tracker

Portfolio Intake Progress

4 of 6 details collected
Use bars for step-based collection; the artifact donut covers overall completeness.
  • Photos uploaded
  • Project type identified
  • Materials documented
  • Customer problem described
  • Timeline
  • Highlight

Choice selection

Choose Portfolio Style

Select the visual style that best represents your work.

JSON Artifact Renderer

Typed artifact specs with builtin visibility and state handling for decisions, readiness, and edit transitions. This layer should mirror the shared artifact semantics instead of inventing parallel CTA rules.

Developer details

Start from these files when you need to trace the live implementation.

shared/ui/chat/json-artifacts/JsonArtifactRenderer.tsx

Clarification

Low confidenceProject Type

What type of project is this?

I detected masonry work but the specific type is unclear.

Current understanding

Brick repair

Or did you mean:

Publish ready

Ready

Ready to Publish

All required fields are complete. Your project is ready to go live!

Publish not ready

Not Ready Yet

Some required fields are missing before publishing.

Missing Required (2)

  • Photos
  • Project Type

How to Fix

  • Upload at least 3 project photos
  • Describe the type of work you did

Progress tracker

You're almost there!

Portfolio completeness75%

You can generate now, or add more details for a better result.

  • Photos
  • Project type
  • Materials
  • The problem
  • Your solution
  • Timeline
  • Highlight

Focus edit transition

Your draft is ready for Focus Edit

I've prepared the current layout. Continue refining in chat or open Focus Edit for precise structural changes.

Change summary

Changes Applied

  • Updated hero image to "after" photo
  • Added materials section with granite details
  • Reworded solution approach for clarity

Revision #3