Build with Rayden AI

Citrionus is Rayden’s complete free default flavor. Rayden AI connects its component catalog, public APIs, and usage guidance to coding agents. The same generated catalog powers this page, the MCP server, and the registry pilot.

Build with an agent

Copy component guidance grounded in this release of Citrionus.

Loading component guidance…

Start with the project

Ask your agent to inspect the installed Rayden version, discover the supported components, and retrieve their props before generating code. Catalog versions identify the reference build; they do not prove which version your project has installed.

The work on this page is a local development pilot. Build the current workspace to try the new catalog and validation tools. Published releases may not yet contain them.


pnpm --filter @raydenui/ai build
node packages/rayden-ai/dist/mcp/server.js

The server uses standard input/output. Configure your MCP client to start that built server using an absolute path appropriate to your checkout. The command above is for testing from the repository root, not a hosted endpoint.

MCP tools

Tool	Purpose
`get_components`	Discover component families, exports, and categories
`get_component_props`	Retrieve supported props and component guidance
`get_tokens`	Read design tokens by category
`get_layout_recipes`	Retrieve composition examples
`get_catalog`	Inspect Citrionus reference versions and capabilities
`get_component_guidance`	Get a component-specific implementation prompt
`validate_component_usage`	Check a structured component usage description

Unknown components and invalid inputs receive explicit errors. Exact exported component names take precedence over aliases. For example, Spinner must resolve to Spinner rather than ProgressCircle.

Validation reports what it can establish from static data. It does not replace TypeScript, interaction tests, or an accessibility review. Dynamic values and runtime-dependent behavior can be reported as not assessed.

Programmatic usage

From a project using the locally built AI package:


import {
  getCatalog,
  getComponentGuidance,
  getManifest,
  validateComponentUsage,
} from "@raydenui/ai";
 
const catalog = getCatalog();
const button = getManifest("Button");
const guidance = getComponentGuidance("Button");
const result = validateComponentUsage("Button", { size: "giant" });

Component families are not always importable components. The catalog records the actual export names and import paths, including the separate chart entry point. Use those mappings rather than turning a family name into an import.

Installation and editable examples

The distribution pilot adds shadcn-compatible setup, rules, and editable example files. Rayden’s npm package supplies component behavior; you own and can edit the installed example source. The registry and Rayden MCP serve different purposes: installation and component knowledge.

Motion guidance

The motion pilot provides independent Calm, Snappy, Playful, and Reduced presets. Tabs and Modal opt in explicitly. A requested preset never overrides an operating-system request for reduced motion.

Machine-readable resources

Component catalog: generated metadata and prompts.
Concise agent index: identity, imports, and conventions.
Full component guidance: per-component implementation prompts.
Registry catalog: package-backed installation items.

These resources are built from maintained source information. Generated-file checks catch drift before release.

Figma and design specifications

The AI package also contains component anatomy, token data, and the rayden-use skill. These describe the design system; they do not themselves write to Figma. A connected Figma tool is required for design actions. Availability of an anatomy specification is not a guarantee that every design variant matches the runtime component.

Update the guidance

When a public component API changes, regenerate the AI data and connected guidance, then run their consistency checks. Preserve authored design intent while deriving export names and prop contracts from the actual source.