# Open-Fiesta Gemini Assistant Context

## Project Overview

Open-Fiesta is a web-based AI chat playground built with Next.js and TypeScript. It allows users to interact with and compare various large language models (LLMs) from different providers side-by-side. The application features a flexible interface where users can select up to five models to chat with simultaneously.

### Key Features:

*   **Multi-Provider Support:** Integrates with major AI providers like Google (Gemini), OpenRouter, and Ollama, which provide access to a wide range of open-source and proprietary models.
*   **Model Comparison View:** The core feature is the ability to send a single prompt to multiple selected models and view their responses in a clean, organized grid layout.
*   **Persistent Chat Threads:** Chat history is saved locally in the browser, allowing users to resume previous conversations.
*   **Customizable Experience:** Users can manage their API keys, select their preferred models, and customize the user interface.
*   **Web Search and Image Attachments:** Supports web search capabilities and image attachments for certain models like Gemini.
*   **Dockerized Environment:** Comes with pre-configured Docker setups for both development and production, simplifying deployment.

### Architecture and Tech Stack:

*   **Framework:** Next.js 14 (with App Router)
*   **Language:** TypeScript
*   **Styling:** Tailwind CSS
*   **API Handling:** Next.js API routes are used to proxy requests to the different AI provider APIs. This allows for secure handling of API keys and normalization of responses.
*   **State Management:** Primarily uses React hooks (`useState`, `useMemo`) and `useLocalStorage` for persistent state.
*   **Deployment:** Configured for standalone Next.js output, suitable for containerized deployments.

## Building and Running the Project

### Prerequisites:

*   Node.js and npm
*   Docker (optional, for containerized workflows)

### Development Mode:

1.  **Install Dependencies:**
    ```bash
    npm install
    ```

2.  **Configure Environment:**
    Copy the example environment file and add your API keys:
    ```bash
    cp .env.example .env
    ```
    Edit `.env` to add your `GEMINI_API_KEY` and/or `OPENROUTER_API_KEY`.

3.  **Run the Development Server:**
    ```bash
    npm run dev
    ```
    The application will be available at `http://localhost:3000`.

### Production Mode:

*   **Build the Application:**
    ```bash
    npm run build
    ```

*   **Start the Production Server:**
    ```bash
    npm run start
    ```

### Docker Workflows:

*   **Build Production Image:**
    ```bash
    npm run docker:build
    ```

*   **Run Production Container:**
    ```bash
    npm run docker:run
    ```

*   **Run in Development Mode with Docker Compose:**
    ```bash
    npm run docker:dev
    ```

## Development Conventions

*   **Linting:** The project uses ESLint for code quality. Run the linter with:
    ```bash
    npm run lint
    ```
*   **Component-Based Architecture:** The UI is built with reusable React components located in the `components/` directory.
*   **API Routes:** Server-side logic for communicating with AI providers is handled in the `app/api/` directory. Each provider has its own route for handling requests and normalizing responses.
*   **Model Definitions:** The available AI models are defined in `lib/models.ts`. To add a new model, this file should be updated.
*   **Styling:** Utility-first CSS with Tailwind CSS is the standard. Custom styles are defined in `app/globals.css`.
*   **State Management:** For client-side state, prefer React hooks. For state that needs to persist across sessions, use the `useLocalStorage` hook found in `lib/useLocalStorage.ts`.
*   **Types:** TypeScript types are used throughout the project. Global or shared types are defined in `lib/types.ts`.