PettyUI/.firecrawl/ui-lab-ai-integration.md

AI integration

Specifications and patterns for integrating AI capabilities with UI Lab components.

Accessing LLMs.txt

After installing UI Lab, you can reference the documentation in multiple ways:

Method 1: Local file

The LLMs.txt file is included in the package. Reference it from your node_modules:

node_modules/@ui-lab/core/LLMs.txt

Method 2: CLI

Print LLMs.txt content to the terminal:

npx ui-lab llms

Method 3: Web documentation

Visit the UI Lab website for interactive component reference documentation.

Using with AI tools

ChatGPT / Claude / Copilot

Provide the LLMs.txt content when asking AI tools to generate components. Copy and paste the documentation at the start of your conversation:

You are a React/TypeScript developer. Use UI Lab components for the UI layer.

Here is the complete component documentation:

[Copy LLMs.txt content here]

Now, build a user profile card that shows:
- User avatar
- User name and email
- Edit and delete buttons
- Responsive design

The AI will generate code using the documented components and patterns, respecting the design system constraints.

IDE Extensions

Use GitHub Copilot or Cursor with the documentation. Add a comment with instructions:

// Use UI Lab components
// Button variants: primary, secondary, tertiary, destructive
// Card has Header, Title, Description, Content, Footer slots
// Build a login form with email, password, and submit button

export default function LoginForm() {
  // IDE suggests code using UI Lab components
}

Example prompts

Simple component

Start simple. Provide clear requirements and let the AI handle implementation:

Using UI Lab components, build a settings card with:
- Title: "Display Settings"
- Toggle for dark mode
- Dropdown for language selection
- Save button at the bottom

Make it accessible with proper labels and ARIA attributes.

Complex feature

For larger features, break down requirements and explain data structure:

Build a product list component using UI Lab. Requirements:

Data:
- products: { id, name, price, category, inStock }[]
- isLoading: boolean
- error: string | null

Features:
- Display products in a responsive grid
- Show product card with name, price, category badge
- Disable purchase button if out of stock
- Show loading state with skeleton cards
- Display error message if loading fails
- Include pagination (10 items per page)

Use Tailwind classes for layout, UI Lab for components.

Style and behavior specifics

Be specific about behavior and styling to get better results:

Build a notification component using UI Lab:

Requirements:
- Type: success, error, warning, info
- Auto-dismiss after 5 seconds
- Allow manual close
- Stack multiple notifications vertically
- Show icon based on type
- Use proper semantic colors (success-500, destructive-500, etc)
- Animate in/out smoothly
- Position fixed at top-right
- Respond to keyboard (Escape to close)

Best practices for AI code generation

1. Provide context

Give the AI information about your project structure, state management (React hooks, Redux, etc), and any existing patterns. This helps generate code that fits your codebase.

2. Include LLMs.txt early

Always provide the LLMs.txt documentation in the first message or system prompt. This prevents the AI from inventing components or props that don't exist.

3. Review generated code

Even with AI guidance, review generated code for accessibility, performance, and correctness. Check for proper ARIA attributes, keyboard navigation, and semantic HTML.

4. Test accessibility

Run accessibility checks on generated code. Use tools like axe DevTools, Lighthouse, or WebAIM to ensure components are truly accessible.

5. Iterate with feedback

Provide feedback to the AI when code doesn't meet requirements. Iterate by pointing out issues and asking for adjustments rather than starting over.

6. Don't bypass documentation

If the AI generates props or components that seem wrong, check the LLMs.txt documentation. The AI's understanding is only as good as the documentation provided.

Understanding LLMs.txt structure

LLMs.txt is organized by section, making it easy to find what you need. A typical entry looks like:

## Button Component

### Props
- variant: 'primary' | 'secondary' | 'tertiary' | 'destructive'
  - primary: High emphasis, use for main actions
  - secondary: Medium emphasis, use for secondary actions
  - tertiary: Low emphasis, for less important actions
  - destructive: Dangerous actions, clearly marked

- size: 'sm' | 'md' | 'lg'
- disabled: boolean
- loading: boolean - shows loading spinner, disables interaction
- type: 'button' | 'submit' | 'reset'
- className: string - merge with defaults using clsx

### Examples
```tsx
<Button variant="primary">Submit</Button>
<Button variant="destructive" size="lg">Delete</Button>
<Button disabled>Disabled</Button>
```

### Accessibility
- Uses semantic <button> element
- Keyboard accessible (Enter, Space to activate)
- aria-busy set when loading
- aria-disabled set when disabled

Each component entry includes purpose, props with descriptions, examples, accessibility notes, and integration guidelines.

Advanced scenarios

Custom hooks with components

Ask the AI to generate custom hooks alongside components:

Create a useFormValidation hook and a SignupForm component using UI Lab.

Hook should:
- Track form values and validation state
- Support custom validation rules
- Provide error messages per field

Form should:
- Use the hook for state management
- Display validation errors below inputs
- Disable submit button if form is invalid
- Show loading state while submitting

Integrating with existing code

Share your existing code structure and ask for UI Lab components that fit:

I have this component:

interface Product {
  id: string;
  name: string;
  price: number;
  rating: number;
}

const [products, setProducts] = useState<Product[]>([]);

Refactor the rendering to use UI Lab Card, Badge, and Button
components. Keep the same data structure and logic.

Next steps

Getting started \ Learn how to use components in your project manually. Accessibility \ Ensure AI-generated code meets a11y standards. Best practices \ Learn patterns for effective component usage. Customization \ Extend components with custom variants.

Open Page

Open in GitHub Open in Claude Open in ChatGPT Open in Gemini

Copy Markdown