If you have ever built an AI product UI, you know the pattern. A sidebar, a chat column, a metrics panel, a streaming caret, some usage cards. It is a lot of CSS before you write a single line of product logic.

In this tutorial we build an AI Ops Console using four FSCSS modules, compile everything to one plain CSS file, and wire it up with a small vanilla JavaScript layer. No frameworks. No runtime preprocessor in the browser.

CodePen preview

What we are building

An AI Ops Console with a desktop layout (sidebar, chat, metrics panel) and a mobile layout (hamburger sidebar drawer, bottom sheet metrics panel at 960px and below).

Surface Module

App shell, sidebar, messages, prompt, stream caret, thinking dots, usage cards, workflow nodes, tool chips, citations ai-ui.fscss

Token burn area and line chart (clip-path, no SVG or canvas) st-core@v2

GPU, Queue and Quota rings circle-progress

Team avatar stack overlapui

Mock agent replies, live chart nudges, mobile drawers dashboard.js

The project is split…