🌟 Gemini Interface Agent (Next.js)

A plug-and-play Gemini AI chat + widget interface for any Next.js application.
This package installs a complete AI chat UI, floating widget, dashboard view, and Gemini API routes — ready to use instantly.

Designed for developers who want a beautiful Gemini-powered chat experience with zero setup time.

✨ Features

1. Full Gemini Chat UI

• Modern chat experience
• Typing indicators, timestamps, and smooth autos-scroll
• Multi-turn conversation with context
• Suggestion cards for quick prompts
• Light and dark mode support

2. Floating Gemini Chat Widget

• Click-to-open chat bubble
• Fully animated UI
• Position options:
  • bottom-right
  • bottom-left
  • top-right
  • top-left
• Works in any page or layout

3. Full-Screen Gemini Dashboard

• Clean top bar
• Full-screen chat panel
• Ideal for dashboards, admin panels, and AI tools

4. API Routes Included

Two ready-to-use Next.js API endpoints:

• /api/gemini/chat – Main chat endpoint
• /api/gemini/analyze – For analysis or advanced prompts

5. One-Command Installation

Simply run:

npx gemini-interface-agent init

This automatically generates:

• UI components
• API routes
• .env.local template

🚀 Quick Start

1. Generate Files Using CLI

npx gemini-interface-agent init

2. Add Environment Variables

Create .env.local:

GEMINI_API_KEY=your_api_key
NEXT_PUBLIC_GEMINI_MODEL=gemini-2.0-flash

📁 Folder Structure (after init)

project/
│
├── component/
│   ├── Dashboard.tsx
│   ├── GeminiChat.tsx
│   └── GeminiWidget.tsx
│
├── app/
│   └── api/
│       └── gemini/
│           ├── chat/
│           │   └── route.ts
│           └── analyze/
│               └── route.ts
│
└── .env.local

💬 Components Overview

1. <GeminiChat />

Interactive, polished Gemini chat interface with:

• Contextual conversations
• Interactive suggestion cards
• Error states
• Typing animations
• Large message support

Usage:

<GeminiChat theme="light" maxHeight="600px" />

2. <GeminiWidget />

Floating chat widget that opens the full chat interface.

<GeminiWidget 
  position="bottom-right"
  theme="light"
/>

3. <Dashboard />

Full-screen AI dashboard layout with a minimal header and integrated chat.

import Dashboard from '@/component/Dashboard';

export default function Page() {
  return <Dashboard />;
}

🔌 API Endpoints

POST /api/gemini/chat

Request:

{
  "message": "Hello!",
  "history": []
}

Response:

{
  "response": "Hello! How can I help you today?"
}

POST /api/gemini/analyze

Use for:

• Summaries
• Explanations
• Code analysis
• Reasoning-based tasks

🧠 How It Works

GeminiWidget / GeminiChat
→ Sends prompt to /api/gemini/chat
→ Gemini model processes input
→ API returns AI response
→ UI updates with animations & timestamps

🛠 Requirements

• Next.js 13+ (App Router)
• Node.js 18+
• Gemini API key from Google AI Studio

📄 License

MIT License

⭐ Why Use This Agent?

• Zero configuration
• Beautiful UI out of the box
• Stable API routes included
• Drop-in widget + dashboard + chat
• Saves hours of development time

Build production-ready Gemini chat features in minutes — not days.