Advanced AI Chat App

A modern, highly interactive web application for conversational AI built with Next.js and React. It features a UI similar to Google Gemini, supporting multiple AI models and advanced chat functionalities for a fully featured AI experience.

Features

• Gemini-like UI: A familiar, clean, and responsive user interface for seamless chatting.
• Multi-Model Support: Chat with Google's Gemini models (via @google/generative-ai) and open-source models (via Ollama).
• Media Attachments: Support for uploading and analyzing images alongside text prompts for multimodal interactions.
• Inline Q&A Side Agent: Highlight text within the chat to trigger a side agent for quick definitions, explanations, or questions on specific details.
• Chat Groups: Organize conversations into distinct groups, maintaining isolated context for each group.
• Template: Support for prewrited template for quick chat.

Tech Stack

• Framework: Next.js (App Router)
• Library: React 19
• Styling: Tailwind CSS
• Icons: Lucide Icons (lucide-react)
• AI SDK: Google Generative AI (@google/generative-ai)
• Markdown Processing: react-markdown, remark-gfm, rehype-raw, rehype-highlight

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• A Google API key (from Google AI Studio)
• (Optional) Ollama installed locally for open-source model support

Setup

1. Clone the repository:

   git clone <repository-url>
   cd advanced-ai-chat

2. Install dependencies:

   npm install

   or

   yarn install

3. Configure Environment Variables: Create a .env.local file in the root directory and add your Gemini API key:

   GEMINI_API_KEY=your_api_key_here

4. Run the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the application.

Usage Guide

• Select a Model: Use the header model selector to switch between various Gemini models and any local Ollama models.
• Attach Media: Click the attachment icon to upload images for multimodal analysis (supported by gemini-1.5-pro or similar visual models).
• Side Agent: Select any text in a model's response to ask a quick follow-up question in the side panel—great for diving deeper into a topic without cluttering the main conversation!

License

This project is licensed under the MIT License.