NewFragments Cloud is coming — governance for AI-generated UI→

We keep your AI-generated UI in check

Machine-readable components, MCP context, and governance checks for teams shipping AI-assisted interfaces. Fast, precise, and reviewable.

Works with your AI tools

ClaudeCursorWindsurfCodexVS CodeOpenCode

Governance Engine

AI writes the UI. We make sure it behaves.

Hallucinated components, rogue event handlers, broken tokens — every AI-generated element tree passes through five configurable validators before it touches your codebase.

Safety

Blocks event handlers, dangerous props, and unsanitized hrefs before they reach production.

block-event-handlersblock-dangerous-propssanitize-hrefs

Components

Only registered design system components pass validation. No invented or hallucinated elements.

allow-listblock-unknown-types

Tokens

Enforces design token usage and validates fui- prefixes across all generated styles.

require-design-tokensallowed-prefixes

Brand

Ensures generated UI respects your 5-seed theming system and brand constraints.

enforce-seedspalette-compliance

Accessibility

Validates WCAG AA compliance including labels, roles, contrast, and keyboard navigation.

wcag-aaaria-labelsfocus-order

How It Works

Define. Generate. Govern.

Three steps from component definition to production-safe AI output. No magic — just a clear pipeline you can inspect at every stage.

Define your components

Write a .contract.json file next to each component. Props, usage rules, accessibility contracts, and AI hints — all in one machine-readable definition.

Card.contract.json

{
  "name": "Card",
  "category": "layout",
  "sourcePath": "src/components/Card/index.tsx",
  "propsSummary": [
    "variant: default|outlined|elevated",
    "padding: none|sm|md|lg (default: md)"
  ],
  "usage": {
    "when": ["Grouping related content"],
    "whenNot": ["Modal content — use Dialog"]
  },
  "ai": {
    "compositionPattern": "compound",
    "subComponents": ["Header", "Title", "Body", "Footer"],
    "requiredChildren": ["Body"]
  },
  "contract": {
    "a11yRules": ["A11Y_CARD_HEADING"],
    "bans": [{ "pattern": "nested-card", "message": "Never nest cards" }]
  }
}

AI generates via MCP

Your AI tool reads the compiled fragments.json through MCP and builds UI using only your registered components — with correct props, valid composition, and real data.

Terminal

$ fragments devMCP server running on stdioIndexed 67 components, 30 blocksClaude: Building settings panel... Using Card, Stack, Switch, Text, Input Props validated against fragments.json ✓ Element tree generated (18 nodes)

Governance validates everything

Before anything ships, five validators sweep the output. Safety, component allowlists, token compliance, brand rules, and accessibility — all checked in milliseconds.

Governance Report

SafetyNo event handlers, dangerous props clean

PASS

ComponentsAll 5 types in allowlist

PASS

Tokens8/8 values use fui- prefix

PASS

BrandSeeds validated, palette compliant

PASS

AccessibilityWCAG AA — labels, roles, contrast

PASS

Score: 100/100All checks passed

Ready to ship AI UI you can trust?

Get started in minutes. Open source, MCP-native, and built for teams.