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.](https://www.ui-lab.app/docs/getting-started) [**Accessibility** \\
Ensure AI-generated code meets a11y standards.](https://www.ui-lab.app/docs/accessibility) [**Best practices** \\
Learn patterns for effective component usage.](https://www.ui-lab.app/docs/best-practices) [**Customization** \\
Extend components with custom variants.](https://www.ui-lab.app/docs/customization)

Open Page

[Open in GitHub](https://github.com/kyza0d/ui-lab.app/blob/master/apps/site/content/docs/ai-integration.mdx) [Open in Claude](https://claude.ai/new?q=Read%20this%20and%20help%20me%20understand%20it%3A%20https%3A%2F%2Fgithub.com%2Fkyza0d%2Fui-lab.app%2Fblob%2Fmaster%2Fapps%2Fsite%2Fcontent%2Fdocs%2Fai-integration.mdx) [Open in ChatGPT](https://chatgpt.com/?q=Read%20this%20and%20help%20me%20understand%20it%3A%20https%3A%2F%2Fgithub.com%2Fkyza0d%2Fui-lab.app%2Fblob%2Fmaster%2Fapps%2Fsite%2Fcontent%2Fdocs%2Fai-integration.mdx) [Open in Gemini](https://gemini.google.com/app?q=Read%20this%20and%20help%20me%20understand%20it%3A%20https%3A%2F%2Fgithub.com%2Fkyza0d%2Fui-lab.app%2Fblob%2Fmaster%2Fapps%2Fsite%2Fcontent%2Fdocs%2Fai-integration.mdx)

Copy Markdown