Meta's Astryx Brings CLI and MCP Server to Open-Source React Design System Agents Can Learn

Meta released Astryx this week. It is an open source design program, currently in Beta. The project grew within Meta's monorepo over eight years. Astryx is built on top of React and StyleX. StyleX is a CSS integration engine for Meta.

The TL;DR

• Astryx is Meta's open source, agent-friendly React design system, now in Beta.
• It pairs the StyleX style with a dynamic CSS theme cascade and ten themes.
• Server CLI and MCP allow AI agents to program and write UIs.
• It has been tested for production within Meta but is still young as a community project.

What is Astryx

Astryx is part of the library and the system that surrounds it. It provides frameworks, components, templates, and themes. Basics include typography, color, layout, and accessibility. The official repository lists over 90 React components. The site lists more than 150 Meta documents. Components ship with built-in space, dark mode, and flexible styling. Templates document full pages such as dashboards, settings, and forms. Licensed by MIT. TypeScript makes up about three-quarters of the codebase.

The stylistic background is worth understanding. StyleX compiles styles into static, atomic CSS at build time. Meta open-sourced StyleX by the end of 2023. It powers Facebook, Instagram, WhatsApp, and Wires. Third parties such as Figma and Snowflake also use it.

Two design options stand out. First, the insiders are open. All raw materials are imported and assembled, not hidden. You can write at any level. Second, space is automatic. Astryx calls this space compensation context-aware. Eliminates 'double padding' problems without manual correction.

'Agent Ready' section

This is a big difference from other design systems. Astryx ships documents and tools that can be read by AI. Components carry JSDoc annotations with naming conventions. The CLI exposes the same API used by the developer. There is also an MCP server. MCP is Model Context Protocol. Agents use it for scaffolding, browsing, and writing.

The CLI is called astryx or summary xds. One factor is really important for automation. The CLI returns a self-describing manifest as JSON. Lists all commands, argument, flag, and response type. Comparing it to the OpenAPI spec for the CLI. So the agent doesn't need scrubbing --help text. It reads one scheduled payload.

npx astryx component Button        # full docs for a component
npx astryx template dashboard      # emit full page source
npx astryx manifest --json         # machine-readable command spec

Themes and CSS-Variable Cascade

Astryx ships ten ready-made themes. They are named spontaneous, neutral, everyday, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. All are fully customizable. The theme uses CSS dynamic cascade. You change variables, and all parts of styles. The component code remains untouched.

The interactive demo below shows this directly. Choose a theme and watch the tokens update live.

import {Button} from '@astryxdesign/core/Button';
import {Badge} from '@astryxdesign/core/Badge';

export default function Toolbar() {
  return (
    

      <Button label="Save" variant="primary" />
      <Badge>BetaBadge>
    
  );
}

# get the real component source to edit in your repo
$ npx astryx swizzle Button

# then import your local copy instead of the package
import {Button} from './components/Button';

# install core, a theme, and the CLI
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

// providers.tsx — wrap your app once
'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return <Theme theme={neutralTheme}>{children}Theme>;
}

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

Wrap your app in the Theme provider.

'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return {children};
}

import {Button} from '@astryxdesign/core/Button';

export default function Page() {
  return ;
}