{"slug": "metas-astryx-brings-a-cli-and-mcp-server-to-an-open-source-react-design-system", "title": "Meta’s Astryx Brings a CLI and MCP Server to an Open-Source React Design System Agents Can Read", "summary": "Meta released Astryx, an open-source React design system in beta, featuring a CLI and MCP server that enable AI agents to scaffold and document UIs. Built on StyleX and tested internally for eight years, Astryx includes over 90 components, ten themes, and machine-readable tooling for agent automation.", "body_md": "Meta released [Astryx ](https://github.com/facebook/astryx?)this week. It is an open-source design system, currently in Beta. The project grew inside Meta’s monorepo over eight years. Astryx is built on React and StyleX. StyleX is Meta’s compile-time CSS engine.\n\n**TL;DR**\n\n- Astryx is Meta’s open-source, agent-ready React design system, now in Beta.\n- It pairs StyleX styling with a CSS-variable theme cascade and ten themes.\n- A CLI and MCP server lets AI agents scaffold and document UIs.\n- It is production-tested inside Meta but young as a public project.\n\n**What is Astryx**\n\nAstryx is a component library and a system around it. It provides foundations, components, templates, and themes. Foundations cover typography, color, layout, and accessibility. The official repository documents more than 90 React components. Meta’s docs site counts over 150. Components ship with built-in spacing, dark mode, and flexible styling. Templates compose full pages like dashboards, settings, and forms. The license is MIT. TypeScript makes up about three-quarters of the codebase.\n\nThe styling layer is worth understanding. StyleX compiles styles to static, atomic CSS at build time. Meta open-sourced StyleX at the end of 2023. It powers Facebook, Instagram, WhatsApp, and Threads. External companies like Figma and Snowflake also use it.\n\nTwo design choices stand out. First, internals are open. All primitives are exported and composable, not hidden. You can compose at any level. Second, spacing is automatic. Astryx calls this context-aware spacing compensation. It eliminates ‘double padding’ issues without manual fixups.\n\n**The ‘Agent Ready’ Part**\n\nThis is the main difference from other design systems. Astryx ships docs and tooling that AI agents can read. Components carry JSDoc annotations with composition hints. A CLI exposes the same API a developer uses. There is also an MCP server. MCP is the Model Context Protocol. Agents use it to scaffold, browse, and document.\n\nThe CLI is called via `astryx`\n\nor the shorthand `xds`\n\n. One feature is really important for automation. The CLI returns a self-describing manifest as JSON. It lists every command, argument, flag, and response type. Compareing it to an OpenAPI spec for the CLI. So an agent need not scrape `--help`\n\ntext. It reads one structured payload instead.\n\n```\nnpx astryx component Button # full docs for a component\nnpx astryx template dashboard # emit full page source\nnpx astryx manifest --json # machine-readable command spec\n```\n\n**Themes and the CSS-Variable Cascade**\n\nAstryx ships ten ready-made themes. They are named default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. All are fully customizable. Theming uses a CSS variable cascade. You change the variables, and every component restyles. Component code stays untouched.\n\nThe interactive demo below shows this directly. Pick a theme and watch the tokens update live.\n\n**01**/ 06 · Overview\n\n**Getting Started: A Code Example**\n\nThe simplest path is Next.js with Tailwind. Astryx ships pre-built CSS, so no build plugins are needed. Install the core package and a theme.\n\n```\nnpm install @astryxdesign/core @astryxdesign/theme-neutral\nnpm install -D @astryxdesign/cli\n```\n\nWrap your app in the Theme provider.\n\n``` python\nWrap your app in the Theme provider.\n\n'use client';\nimport type {ReactNode} from 'react';\nimport {Theme} from '@astryxdesign/core/theme';\nimport {neutralTheme} from '@astryxdesign/theme-neutral/built';\n\nexport function Providers({children}: {children: ReactNode}) {\n return {children};\n}\n```\n\nThen use components directly.\n\n``` js\nimport {Button} from '@astryxdesign/core/Button';\n\nexport default function Page() {\n return