Your AI already knows your design system
Slipstream UI is the AI-first component system built for AI-assisted development. Every component ships a machine-readable spec, an MCP server that serves it, and a validator that keeps agents honest.
What makes Slipstream UI different?
Live demo
The framework, running on this page
No screenshots. Every control below is a Slipstream component — selection, pagination, menus, overlays, toasts and wizards included.
Active runs
6
+2this week
Selected
1
use the checkboxes
Success rate
98.2%
+0.4vs last week
| Status | Owner | |||
|---|---|---|---|---|
| Onboarding emails | success | Ada | 42 | |
| Invoice sync | warning | Grace | 8 | |
| Churn scoring | info | Alan | 21 | |
| Weekly digest | success | Ada | 64 |
1–4 of 6
SelectMenu — rich options, groups
PlanInputGroup — flush addons
ButtonGroup — joined segments
pro · view: board · domain: https://slipstream-ui.comConfirmDialog handles focus trap, Escape and an async pending state; toasts are imperative (toast.success()) and stack above every overlay.
2 of 4 — Access (Roles and SSO)Every component ships a COMPONENT_MANIFEST, tests and a live docs page — this lab is the same library your agent queries over MCP.
- components
- 80
- machine-readable specs
- 80
- MCP tools for agents
- 5
- hallucinated props allowed
- 0
Built for the way software is written now
Half your UI is written by models. Slipstream gives them something better than docs scraped from training data: a spec they can query, and a guardrail they can self-check against.
Machine-readable manifests
Every component ships a COMPONENT_MANIFEST: exact prop schema, defaults, anti-patterns, accessibility requirements, composition rules.
validate_usage MCP tool
Agents validate generated JSX against the manifest before emitting — hallucinated props and missing requireds can be caught, not shipped.
shadcn-compatible registry
Install real source files through any shadcn-compatible CLI, or use packages. Your codebase, your rules.
Fully stateless
No runtime lock-in. Bring any backend — Vercel AI SDK, LangGraph, or raw streams. Components render; you own state.
Accessibility, tested
jest-axe suites on every component, aria-busy streaming states, polite completion announcements, reduced-motion variants.
Themeable to the token
One createTheme() call emits every CSS variable. Radius, dark mode, instant switching — no rebuilds.
How your AI uses it
Three steps, no fine-tuning, no prompt incantations.
Connect
Point Claude Code or Cursor at the Slipstream MCP server, or serve llms.txt and the /llm markdown routes.
Query the spec
The agent calls get_component_manifest and get_usage_examples — exact props, defaults, anti-patterns.
Self-validate
Before emitting, validate_usage checks the generated JSX against the manifest and corrects hallucinated props.
The failure mode, caught
An agent guesses onSend because that is what other chat libraries call it. validate_usage checks the manifest and refuses the snippet before it is written.
1. Hallucinated usage
<PromptInputonSend={handleSend}placeholder="Ask anything"/>
The prop does not exist, and the required onSubmit is missing.
2. validate_usage response
{"componentId": "prompt-input","valid": false,"usageCount": 1,"issues": [{"severity": "error","message": "Unknown prop \"onSend\" on <PromptInput> (usage). This prop does not exist in the manifest."},{"severity": "error","message": "Missing required prop(s) on <PromptInput> (usage): \"onSubmit\"."}]}
Trimmed for display; the tool also returns the manifest's anti-patterns.
3. Correct usage
<PromptInputonSubmit={handleSend}placeholder="Ask anything"/>
Validated against the same contract your docs, MCP server, and registry serve.
Themes that ship with the library
Default, Violet, and Zinc presets included. Switch below — this is live theming, not a screenshot.
Try the shipped themes
One createTheme() call emits every CSS variable - components re-theme instantly, no rebuild. Each preset ships a dark variant that follows the site's .dark class.
How it compares
Other libraries document for humans. Slipstream documents for both of you.
| Capability | Slipstream | shadcn/ui + AI Elements | assistant-ui | MUI |
|---|---|---|---|---|
| Distribution model | npm packages (ESM + CJS) | copy-in source via CLI | npm packages | npm packages |
| Components shipped | 80 (63 UI + 17 AI) | UI primitives + AI Elements | Chat surface + primitives | Broad UI set, no chat |
| Per-component machine-readable spec | Yes — props, a11y, anti-patterns | Partial — registry.json (files, deps) | No | No |
| MCP server | Yes — 5 tools incl. validate_usage | Partial — browse/search/install | No | Partial — agent skills |
| Validates generated JSX against the spec | Yes — validate_usage | No | No | No |
| llms.txt | Yes | Yes | Yes | No |
| Canonical markdown per component/page | Yes — /llm/*.md | Partial — MDX in repo | Yes — .md pages | No |
| AI chat components | Yes — 17 built-in | Yes — AI Elements (separate) | Yes — core focus | No |
| State & transport | Stateless — bring your own | Components only | Runtime adapters (AI SDK, LangGraph, custom) | n/a — no chat components |
| Styling | Tailwind + CSS variables | Tailwind + CSS variables | Tailwind | Emotion + theme object |
| Theme presets | 4 (Default, Dark, Violet, Zinc) | CSS-variable themes | CSS variables | theme object |
| Peer dependencies | react, react-dom | react | react | react, @emotion/react, @emotion/styled |
| License | MIT | MIT | MIT | MIT |
Reflects each project's public documentation and published packages as of November 2026 · ✅ provided · 🟡 partial or a different model · — not provided for this purpose
Choose Slipstream
When agents must generate correct, design-system-compliant code and you want a validator in the loop before code ships.
Choose shadcn/ui + AI Elements
When maximum ecosystem gravity and copy-in ownership of a very large primitive base matter most.
Choose assistant-ui
When you need a battle-tested chat runtime: streaming, tools, and generative UI as the core product.
Start from a template
Complete, copy-paste patterns built entirely from Slipstream components.
For agent builders →
Wire the MCP server into Claude Code or Cursor, run validate_usage before emit, or serve llms.txt and markdown routes — five tools, three consumption paths.
For product teams →
Ship the production chat surface — streaming markdown, stop-generation, citations, approvals — with stateless components, jest-axe coverage, and your own backend.
Ship AI interfaces faster
80 components · 80 machine-readable specs · validate generated usage before it ships.