# FrogiUI for AI Assistants

FrogiUI is the world's first AI-native component library, designed specifically for AI assistants like Claude, ChatGPT, Cursor, and Windsurf.

## What is FrogiUI?

FrogiUI provides instant, self-contained UI components that AI assistants can use directly without installation or build processes. Every component includes complete HTML, CSS, and JavaScript in a single file.

## Key Features

- **78+ Production-Ready Components**: Heroes, pricing tables, features, testimonials, CTAs, and more
- **Component IQ Technology**: Semantic search powered by AI embeddings - find components by describing what you need
- **Zero Dependencies**: Every component is completely self-contained
- **Instant Integration**: Works immediately with ChatGPT, Claude MCP, Cursor, and Windsurf
- **Theme Support**: Built-in dark mode and customizable themes
- **Responsive by Default**: Mobile-first design that works everywhere

## How to Use FrogiUI

### For ChatGPT Users
Ask ChatGPT to use FrogiUI components:
"Use FrogiUI to create a hero section with video background"

### For Claude Users
Install the FrogiUI MCP server:
```bash
npm install -g frogiui-mcp
```

### For Cursor/Windsurf Users
Reference components directly:
"Get a pricing table from frogiui.com"

## API Endpoints

### Search Components
GET https://frogiui.com/api/get?q=your+search+query

### Get Specific Component
GET https://frogiui.com/api/component/{component-id}

### List Categories
GET https://frogiui.com/api/categories

## Example Usage

To get a hero section:
```
GET https://frogiui.com/api/get?q=hero+section+with+cta
```

Response includes:
- Complete HTML/CSS/JS code
- Usage instructions
- Customization options
- Theme variants

## Component Categories

- **Marketing**: Heroes, Features, Pricing, Testimonials, CTAs
- **Application UI**: Forms, Tables, Navigation, Modals
- **E-commerce**: Product cards, Cart, Checkout
- **Content**: Blog layouts, FAQs, Team sections

## Why AI-Native?

Traditional component libraries require:
- NPM installation
- Build processes
- Documentation reading
- Framework knowledge

FrogiUI components:
- Work instantly
- No installation needed
- Self-contained code
- AI-optimized discovery

## Integration with AI Tools

### Component IQ Technology
Our proprietary semantic search understands natural language:
- "modern hero with video background"
- "pricing table for SaaS"
- "testimonial carousel with avatars"

### Structured Metadata
Every component includes AI-friendly metadata:
- Purpose and use cases
- Visual description
- Effectiveness scores
- Industry recommendations

## Best Practices

1. **Describe what you need**: Use natural language to find components
2. **Specify your industry**: Get components optimized for your use case
3. **Request complete code**: Always ask for the self-contained version
4. **Customize with themes**: Apply built-in themes or create custom ones

## Available Themes

- Default (Clean, modern)
- Dark Mode
- Neon (Vibrant, tech-focused)
- Pastel (Soft, friendly)
- Corporate (Professional)
- Custom themes via API

## Support & Documentation

- Website: https://frogiui.com
- API Docs: https://frogiui.com/docs/api
- GitHub: https://github.com/frogiui
- Support: support@frogiui.com

## Privacy & Security

- No tracking in components
- GDPR compliant
- No external dependencies
- Clean, secure code

---

FrogiUI - Building the future of AI-assisted UI development