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.

#Use the library

  1. Open Components: the standard library plus your org’s own, filterable by category (UI, Form, Layout, Navigation, Data, Feedback, Marketing) and searchable.
  2. Every card renders a live preview — the real component, not a screenshot. Click a card for the detail panel with Preview / Code / Props.
  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 — part of 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.