Menu

ai-ui.fscss: shell, messages, prompt, and stream — without a UI kit runtime
📰

ai-ui.fscss: shell, messages, prompt, and stream — without a UI kit runtime

DEV Community: css·FSCSS tutorial·4 days ago
#jgXT4Ke0
#devtocss#devto#dev#enter#exit
Reading 0:00
15s threshold

ai-ui.fscss is a presentation layer for AI product surfaces in the FSCSS ecosystem: tokens, layout, and chrome only. No models, no streaming clients, no backend.

Your app still owns data, events, and model I/O. This module owns how the shell, messages, prompt bar, and related pieces look and sit on the page — and it compiles to plain CSS.

What it covers

Surface Role

Shell App grid: sidebar + main + room for the prompt

Messages User / assistant rows, bubbles, avatars

Prompt Textarea + send control

Stream Caret on partial assistant text

Thinking Processing dots

Citations Source chips under answers

Artifacts Code / JSON / doc cards

Workflow Step nodes and edges

Usage Token and metric cards

Same contract as other FSCSS modules: import registers @define helpers, you call them with host selectors, markup uses those class names, design tokens flow through CSS variables.

Install mindset

You need FSCSS 1.2.6+ (CLI, browser runtime, IDE, or the Python wrapper - same language).

Registry-style…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.