#### 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
```
### Accessibility
- Uses semantic