Design System

Artifacts - Generated & References

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.

Artifact Generated & References

Generated deliverables plus reference cards that hand users off to preview, gallery, and profile surfaces.

Generated Content & References

Generated outputs should feel inspectable and directly actionable, with clear links to their related surfaces.

Developer details

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

src/shared/ui/chat/artifacts/GeneratedContentCard.tsx ยท src/shared/ui/chat/artifacts/ArtifactReferenceCard.tsx

Content Generated!

Your portfolio content is ready for review

Title52/60 chars

Two-Story Pennsylvania Fieldstone Fireplace Surround

Description57 words

This stunning two-story fireplace surround showcases the timeless beauty of Pennsylvania fieldstone installed in a classic dry-stack pattern. The project transformed a plain drywall fireplace wall int...

SEO
Title: Stone Veneer Fireplace | Pennsylvania Fieldstone | Denver CO(60/60)
Description: Professional stone veneer installation featuring a 2-story Pennsylvania fieldstone fireplace surround with dry-stack pattern. View project details and photos.(158/160)
Tags5 tags
stone veneerfireplacefieldstonenatural stonedry-stack
Portfolio content generated successfully. Title: Two-Story Pennsylvania Fieldstone Fireplace Surround. Description has 57 words. 5 tags assigned.