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 combines 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>;
}

Getting Started: Example Code

The easiest way is Next.js with Tailwind. Astryx ships with pre-built CSS, so no build plugins are required. Install the core package and theme.

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

Wrap your app in a Theme Provider.

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};
}

Then use the components directly.

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

export default function Page() {
  return ;
}

Tailwind Bridge displays tokens to services. So bg-surface resolves the system token. This avoids verbose var(--...) classes. Only the Vite method and the StyleX method are also documented.

Use Cases with examples

The interior dashboards are clearly proportional. You can create eval views or monitor quickly. Astryx offers dashboard, table, and detail templates. The Vega/Vega-Lite chart wrapper handles plots.

Agent-built UIs are the second case. The AI ​​code agent can open the settings page. It calls the CLI, reads the agent-ready documentation, and compiles the components. The MCP server makes this a structured workflow, not a guess.

Multi-brand products are a third case. A single component set can provide multiple products. You change themes using a dynamic cascade. No component rewriting is required.

How does Astryx compare

The shadcn/ui is the usual nearest comparison. Both good architecture and CLI scaffolding. Astryx differs in its StyleX engine and MCP tools. This competitor information is summarized and will be updated.

Strengths and Weaknesses

Power:

• Combine the StyleX style of time, proven on the Meta scale
• First words are open, combinable at all levels
• Ten customizable themes with a dynamic CSS cascade
• The CLI and MCP server provide agents with a real API
• Automatic spacing eliminates common layout bugs
• MIT license with support for Next.js, Vite, and Tailwind

Weaknesses:

• Beta status, so APIs and versions are subject to change
• The CLI is early, at version 0.0.14 for now
• StyleX has a steeper learning curve than Tailwind
• The component counts differ between the repo site and the docs
• Availability outside of Meta has not been confirmed

Check it out Repo again Project page. Also, feel free to follow us Twitter and don't forget to join our 150k+ML SubReddit and Subscribe to Our newspaper. Wait! are you on telegram? now you can join us on telegram too.

Need to work with us on developing your GitHub Repo OR Hug Face Page OR Product Release OR Webinar etc.? contact us