Components

A shared React library with live previews.

#What Components does

Your reusable React components, catalogued with live previews — a library both your team and your AI build from.

  • Live component previews. Every component renders live in the catalogue — see the real thing, not a screenshot.
  • Token-driven styling. Components pull from your Design System tokens, so the library is always on-brand.
  • One library, every project. Stop re-implementing the same UI. The library is shared across your whole workspace.
  • MCP write surface. Your AI reads the library and writes new token-aware components with sstm_component_create — they render live for your team to review.

#A two-tier library

The Components module is two libraries in one view:

  • sSystm Library — the curated catalogue, maintained by the platform. Read-only, rendered as trusted live previews, and available to every workspace.
  • My Library — your organisation’s own components: fully editable in the Studio, previewed in an isolated sandbox.

Anything in the curated gallery can be duplicated into your own library — the copy is yours to restyle and extend.

#Work with components

  1. Browse and filter by category (UI, Form, Layout, Navigation, Data, Feedback, Marketing) or search — every card renders a live preview, the real component, not a screenshot.
  2. Click a card for the detail panel with Preview / Code / Props tabs.
  3. Click New component to add your own (token-aware TSX using var(--ds-*) variables), or duplicate a catalogue component into your org to customise it.
  4. With an active project selected, Use in project links the component to the project — it then rides along in the Build AI’s context and in the truth your AI reads over MCP.

#On the MCP surface

Your AI builds UI with your components, not around them. It reads sstm://component/recipe for the token vocabulary, then writes self-contained, token-aware TSX straight into the shared library — rendered live in the catalogue.

Tools (write):

  • sstm_component_create
  • sstm_component_update

Resources (read):

  • sstm://components
  • sstm://component/{id}
  • sstm://component/recipe

Full definitions live in the MCP reference.

#On the Cloudflare side

  • The library lives in the platform database; components are token-aware TSX that your AI writes over MCP and that Build composes into Workers deployed to your account.