KIWI widget

A cute widget that acts as both an AI chatbot and a cute companion!

Comment

Kiwi AI Chat Widget

A draggable, resizable, multi-tabbed AI chat widget built with React, Chakra UI, and Vite. This widget connects to the Google Gemini API to provide conversational AI capabilities within a floating interface. It features multiple themes, tabbed conversations, and basic chat functionalities.

This project was developed as part of the HackMelbourne Hackiethon '25.

✨ Features

  • Draggable & Resizable: Uses react-rnd to allow users to freely move and resize the widget window.
  • Multi-Tab Chat: Supports multiple independent chat sessions in different tabs.
  • Gemini AI Integration: Connects to the Google Gemini API (gemini-1.5-flash) for generating AI responses.
  • Theme Switching: Includes Light, Dark, and Midnight themes selectable via a settings menu.
  • Minimize/Expand: Right-click the widget icon (when minimized) or the widget body (when expanded) to toggle visibility.
  • Animations: Uses framer-motion for smooth minimize/expand transitions and subtle hover/idle animations.
  • Copy Messages: Easily copy messages (both user and AI) to the clipboard with a click.
  • UI Library: Built with the component library Chakra UI.

🚀 Tech Stack

  • Framework: React 18
  • Build Tool: Vite
  • UI Library: Chakra UI
  • AI: Google Gemini API (@google/generative-ai)
  • Interactions:
    • react-rnd (Dragging & Resizing)
    • framer-motion (Animations)
  • Styling: Emotion (via Chakra UI)
  • Icons: Chakra UI Icons, React Icons

📋 Prerequisites

⚠️⚠️IMPORTANT !!⚠️⚠️

  • Please refer to package.json for the specific versions of packages needed. Installing the latest packages directly will cause a bunch of errors, please use stable release versions of the packages instead.

⚙️ Getting Started

1. Clone the Repository

git clone <your-repository-url>
cd yourRepository'sDirectoryName

2. Install Dependencies

npm install

or

yarn install

3. Configure API Key

You must add your Google Gemini API key for the AI features to work. (API key is included for the submission for the hackathon)

Open the file: src/KiwiWidget.jsx

Find the line defining GEMINI_API_KEY:

const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY"; // Replace with your actual key

Replace "YOUR_GEMINI_API_KEY" with your actual API key obtained from Google AI Studio.

⚠️ Important: Do not commit your actual API key to version control (e.g., Git). If deploying or sharing, use environment variables or other secure methods to handle keys.

4. Run the Development Server

npm run dev

or

yarn dev

This will start the Vite development server, typically available at http://localhost:5173 (the exact port might vary). Open this URL in your browser to see the widget.

📜 Available Scripts In the project directory, you can run:

npm run dev

or 

yarn dev

Runs the app in development mode. Open http://localhost:5173 (or the specified port) to view it in the browser. The page will reload if you make edits.

npm run build

or 

yarn build

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run lint

or

yarn lint

Runs the ESLint checker to find potential issues in the code.

npm run preview

or 

yarn preview

Runs a local server to preview the production build generated by npm run build.

🕹️ Usage Drag: Click and drag the top bar (when expanded) or the icon (when minimized) to move the widget.

Resize: Drag the edges or corners of the expanded widget to resize it.

Minimize/Expand: Right-click the widget (icon or body) to toggle between minimized and expanded states.

Chat: Type your message in the input field at the bottom and press Enter or click the send button.

Switch Tabs: Click on the tab icons at the top to switch between conversations.

Add Tab: Click the "+" button next to the tabs to start a new chat session.

Close Tab: Click the small "x" button on a tab icon (appears when you have more than one tab).

Change Theme: Click the settings (gear) icon in the top-right corner and select a theme from the dropdown menu.

Copy Message: Click the copy icon that appears next to a message bubble to copy its content.

Submission info: Email : [email protected] Student id : 1744082

Built With

Share this project:

Updates