@raydenui/ai

AI compatibility layer for Rayden UI — enables LLMs to reliably generate UI components without hallucination.

Installation

# Run directly with npx (no install needed)
npx @raydenui/ai

# Or install globally
npm install -g @raydenui/ai

What It Does

This package provides an MCP (Model Context Protocol) server that gives AI assistants structured access to:

• Component definitions — Props, variants, and usage examples for all 33 Rayden UI components
• Design tokens — Colors, spacing, typography, shadows, and border radius values
• Layout recipes — Pre-built patterns for common UI scenarios (dashboards, forms, marketing pages)
• Anti-hallucination rules — Constraints that prevent AI from inventing non-existent props or patterns

Available MCP Tools

| Tool | Description | |------|-------------| | get_components | List all components, optionally filtered by category | | get_component_props | Get detailed props, examples, and rules for a specific component | | get_tokens | Retrieve design tokens (colors, spacing, typography, etc.) | | get_layout_recipes | Get pre-built layout patterns for common UI scenarios |

Claude Desktop Integration

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "rayden-ai": {
      "command": "npx",
      "args": ["@raydenui/ai"]
    }
  }
}

Claude Code Integration

Add to your project's .mcp.json:

{
  "mcpServers": {
    "rayden-ai": {
      "command": "npx",
      "args": ["@raydenui/ai"]
    }
  }
}

Programmatic Usage

You can also import the component manifests and tokens directly:

import { getComponentManifest, getAllManifests } from '@raydenui/ai/manifests';
import { tokens } from '@raydenui/ai/tokens';
import { recipes } from '@raydenui/ai/recipes';

// Get all component definitions
const manifests = getAllManifests();

// Get a specific component
const buttonManifest = getComponentManifest('Button');

// Access design tokens
console.log(tokens.colors.primary);

CLI Options

npx @raydenui/ai          # Start MCP server (stdio transport)
npx @raydenui/ai --help   # Show help message

Related Packages

• @raydenui/ui — The React component library
• Rayna UI Figma — Design system source

License

MIT