Astryx on Meta brings CLI and MCP server to agent-readable open supply React Design System

meta has been launched Astrix this week. It’s an open supply design system and is at the moment in beta. This venture grew over eight years inside Meta’s monorepo. Astryx is constructed on React and StyleX. StyleX is Meta’s compile-time CSS engine.

TL;DR

• Astryx is Meta’s open supply, agent-enabled React design system, at the moment in beta.
• It combines StyleX types with CSS variable theme cascading and 10 themes.
• The CLI and MCP server enable AI brokers to scaffold and doc the UI.
• It has been examined in manufacturing inside Meta, however continues to be younger as a public venture.

What’s Astrix?

Astryx is a part library and system round it. Supplies basis, elements, templates, and themes. Fundamentals embody typography, colour, format, and accessibility. There are over 90 React elements documented within the official repository. There are over 150 Meta documentation websites. The part comes with built-in spacing, darkish mode, and versatile types. Templates make up full pages similar to dashboards, settings, and types. The license is MIT. TypeScript makes up about three-quarters of the codebase.

Styling layers are value understanding. StyleX compiles types into static, atomic CSS at construct time. StyleX might be meta-open sourced on the finish of 2023. Energy Fb, Instagram, WhatsApp, and Threads. Exterior corporations like Figma and Snowflake additionally use it.

Two design decisions stand out. To begin with, the within is open. All primitives are exported, configurable, and never hidden. You may compose at any stage. Second, the interval is about robotically. Astryx calls this context-aware spacing correction. Eliminates the “double padding” drawback with out guide fixes.

“Agent is prepared” half

That is the principle distinction from different design methods. Astryx supplies documentation and instruments that AI brokers can learn. Parts embody JSDoc annotations that comprise configuration hints. The CLI exposes the identical API that builders use. There’s additionally an MCP server. MCP is a mannequin context protocol. Brokers use it for scaffolding, searching, and documentation.

The CLI is invoked by way of: astryx or shorthand xds. There’s one function that is essential for automation. The CLI returns a self-describing manifest as JSON. Listing all instructions, arguments, flags, and response sorts. Comparability of CLI with OpenAPI specification. Due to this fact, there isn’t a want for brokers to scrape --help Sentence. As a substitute, it reads a single structured payload.

npx astryx part Button        # full docs for a part
npx astryx template dashboard      # emit full web page supply
npx astryx manifest --json         # machine-readable command spec

Themes and CSS variable cascading

Astryx comes with 10 ready-made themes. They’re named Default, Impartial, Day by day, Butter, Chocolate, Matcha, Stone, Gothic, Brutalist, and y2k. All totally customizable. Theming makes use of CSS variable cascading. Altering the variable modifications the fashion of all elements. The part code stays intact.

The interactive demo beneath demonstrates this instantly. Choose a theme and watch your tokens replace stay.

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

export default operate Toolbar() {
  return (
    <div>
      <Button label="Save" variant="major" />
      <Badge>Beta</Badge>
    </div>
  );
}

# get the true part supply to edit in your repo
$ npx astryx swizzle Button

# then import your native copy as a substitute of the bundle
import {Button} from './elements/Button';

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

// suppliers.tsx — wrap your app as soon as
'use shopper';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export operate Suppliers({kids}: {kids: ReactNode}) {
  return <Theme theme={neutralTheme}>{kids}</Theme>;
}

npm set up @astryxdesign/core @astryxdesign/theme-neutral
npm set up -D @astryxdesign/cli

Wrap your app within the Theme supplier.

'use shopper';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export operate Suppliers({kids}: {kids: ReactNode}) {
  return <Theme theme={neutralTheme}>{kids}</Theme>;
}

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

export default operate Web page() {
  return <Button label="Howdy XDS" variant="major" />;
}