Agents & MCPs: Building Beautiful UIs with AI

UI Lab is designed from the ground up to be AI-augmented by design. Rather than treating AI as an afterthought, we've built the entire component system with AI as a first-class citizen.

This means AI systems—whether Claude, custom agents, or other LLMs—can generate production-ready component code that is automatically:

Beautiful by default – Needs no configuration
Consistent with your design system – Uses semantic tokens and theming
Fully accessible – Includes ARIA attributes and keyboard support
Type-safe – Fully typed TypeScript code
Composable – Follows established patterns

Why This Matters

Traditional component libraries require AI to make dozens of decisions:

Which component should I use?
What are the valid variants?
How do components compose together?
What accessibility attributes are needed?
Which design tokens should I reference?

UI Lab answers all these questions upfront through:

Rich Metadata Registry – Every component is fully described
Design Guidelines – Explicit decision-making patterns
LLMs.txt Format – Machine-readable component documentation
MCP Server – Real-time integration with Claude

What You'll Learn

For Claude Users

If you use Claude to generate UI code:

Reference Components – Know what's available in UI Lab
Use the Registry – Discover components and their capabilities
Enable the MCP Server – Real-time integration for up-to-date info
Leverage Design Guidelines – Let Claude make smart decisions

→ Start with: Getting Started with Claude

For AI Developers & Agent Builders

If you're building custom AI systems:

Understand Component Registry – How metadata is structured
Learn Composition Patterns – How components work together
Implement Design Decisions – How guidelines enforce consistency
Build Your MCP Server – Integrate with Claude and other systems

→ Start with: Understanding the Component Registry

Core Concepts: Three Pillars

1. Component Registry

A structured, machine-readable catalog of all UI Lab components:

{
  "id": "button",
  "name": "Button",
  "variants": ["primary", "secondary", "outline", "ghost"],
  "accessibility": {
    "hasAriaSupport": true,
    "notes": ["Full keyboard support", "Proper focus ring styling"]
  },
  "relatedComponents": ["link", "icon-button"],
  "design": {
    "tokens": ["--accent-600", "--spacing-md"],
    "responsive": true,
    "darkMode": true
  }
}

→ Details: Component Registry Reference

2. Design Guidelines

Explicit patterns that guide component selection and composition:

## When to Use Button

### vs. Link
- Use Button for actions that change state
- Use Link for navigation within the app

### Variants
- `primary`: Main call-to-action
- `secondary`: Alternative actions
- `outline`: Secondary with less emphasis
- `ghost`: Tertiary or subtle actions

→ Details: Design Guidelines Reference

3. LLMs.txt Format

Human and machine-readable component documentation:

# UI Lab Components

## Button
**Import:** import { Button } from 'ui-lab-components'

### Props
- variant: "primary" | "secondary" | "outline" | "ghost"
  - primary: Use for main CTA
  - secondary: Use for alternative actions

### Examples
<Button variant="primary">Save</Button>
<Button variant="secondary" disabled>Cancel</Button>

→ Details: LLMs.txt Format Reference

Key Features for AI

Type Safety

Every component is fully typed. Generated code is always valid TypeScript:

interface ButtonProps {
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick?: (e: React.MouseEvent) => void;
}

Semantic Theming

AI references design tokens instead of hardcoding values:

// Good: Uses semantic tokens
<Button variant="primary" className="p-md">Save</Button>

// Avoid: Hardcoded values
<button style={{ padding: "16px", color: "#3B82F6" }}>Save</button>

Composability Patterns

Clear patterns for how components work together:

<Form>
  <FormField>
    <Label>Email</Label>
    <Input type="email" />
  </FormField>
  <Button variant="primary">Submit</Button>
</Form>

Accessibility Built-In

Accessibility is not optional—it's built into every component:

// Icon-only buttons automatically get aria-label support
<Button variant="ghost" aria-label="Close">×</Button>

// Form fields include proper labeling
<Input aria-label="Search" placeholder="Search..." />

Documentation Structure

This section follows the Diataxis framework, organizing content by user needs:

| Section | Purpose | For | Example | |---------|---------|-----|---------| | Getting Started | Learn by doing | Anyone new to UI Lab + AI | Step-by-step tutorials | | Understanding | Learn concepts | Those who want to understand | Explanations of architecture | | How-To Guides | Solve problems | Those building integrations | Goal-focused solutions | | Reference | Look up facts | Those needing API details | Complete specifications |

Just Starting Out?

Getting Started with Claude

Want to Build Your Own?

Need Technical Details?

Looking for Examples?

Philosophy: Beautiful by Default

The core principle that guides everything:

Every component is beautiful without configuration.

This means AI-generated UIs are:

Visually stunning out of the box
Consistent across the entire system
Work in both light and dark modes
Scale responsively from mobile to desktop
Follow accessibility standards automatically

When AI generates component code with UI Lab, the result is production-ready—no tweaking needed.

Next Steps

If you use Claude: Go to Getting Started with Claude
If you're building AI integrations: Go to Understanding the Component Registry
If you need API details: Go to Component Registry Reference

UI Lab: Beautiful by default. Consistent across AI and human code. Ready for production.