ai-tailwind-playground

# AI Tailwind Playground

An advanced AI-powered online playground for Tailwind CSS, built for [Bardui.com](https://bardui.com). This interactive development environment allows you to generate and preview Tailwind CSS components in real-time using AI.

## Features

- **AI-Powered Component Generation**: Ask the AI to create Tailwind CSS components using natural language
- **Live Preview**: See your components render instantly in a side-by-side preview pane
- **Monaco Editor**: Professional code editing experience with syntax highlighting
- **Real-time Updates**: Changes in the editor are immediately reflected in the preview
- **Tailwind CSS v4**: Powered by the latest Tailwind CSS browser runtime

## How It Works

1. Type your request in the search input (e.g., "create a tailwind card component")
2. The AI generates HTML code with Tailwind CSS classes
3. The code appears in the Monaco editor on the left
4. The live preview on the right shows the rendered component instantly
5. Edit the code manually or ask for more changes

## Tech Stack

- **Next.js 15** - React framework
- **Monaco Editor** - VS Code's editor component
- **AI SDK** - Vercel AI SDK for streaming responses
- **DeepSeek** - AI model integration
- **Tailwind CSS v4** - Utility-first CSS framework

## Getting Started

1. Clone the repository
2. Install dependencies:

   ```bash
   npm install
   ```

3. Set up your environment variables:
   Create a `.env.local` file and add your Claude API key:

   ```
   DEEPSEEK_API_KEY=your_api_key_here
   ```

4. Run the development server:

   ```bash
   npm run dev
   ```

5. Open [http://localhost:3000](http://localhost:3000) in your browser

## Project Structure

```
├── src/
│   ├── app/
│   │   ├── api/chat/        # API route for AI chat
│   │   ├── chat/            # Chat page component
│   │   └── page.tsx         # Main playground page
│   └── components/
│       └── search-input.tsx # AI input component
```

## Usage Tips

- Be specific in your reques