Project Overview

MSN React Clone is a web application that replicates the classic Windows Live Messenger experience, providing an interactive chat interface with the Gemini 1.5 Flash model. Leveraging React and Bootstrap, this app offers a modern take on a nostalgic chat application.

Context:

MSN Messenger, an icon of early digital communication, evokes nostalgia and provides an intuitive framework for exploring user-AI interaction. In this project, we aim to recreate this experience using the Gemini 1.5 Flash model, analyzing how LLMs can be integrated into classic chat interfaces to provide a seamless and conversational user experience. In today's era, where large language models (LLMs) are transforming how we interact with technology, this project sits at the intersection of nostalgia and innovation, exploring the potential of LLMs to revive and enhance classic user experiences.

Specific Objectives:

• Implement a functional chat interface that replicates the look and feel of MSN Messenger.
• Integrate the Gemini 1.5 Flash model to handle multi-turn conversations with acceptable latency.
• Evaluate the model's ability to maintain conversation context across multiple interactions.
• Provide an intuitive user interface that allows for seamless interaction with the AI model.
• Evaluate the model's response latency and the interface's usability.

Methodology:

The application was built using React for the user interface and Bootstrap for responsive design. A main chat component was created to handle the conversation state, sending user messages to the Gemini API and displaying responses. An API service was implemented to interact with the Gemini 1.5 Flash model, managing requests and responses asynchronously.

Data Flow and Processing:

Unlike models that require training with specific datasets, Gemini 1.5 Flash operates on information provided in real-time. In this project:

1. User Input: User messages are captured through the chat interface.
2. Processing and Sending: Messages are cleaned of special characters and formatted as plain text before being sent to the Gemini API.
3. API Response: The Gemini API processes the message and returns a response, which may include Markdown-formatted text.
4. Rendering: API responses are processed using the react-markdown library to render the text correctly in the chat interface.

Future Directions:

• Implement additional MSN Messenger features, such as file sending and emojis.
• Conduct formal user testing to obtain a more comprehensive evaluation of the user experience.
• Explore the integration of other language models to compare their performance.
• Implement a user authentication system.

Setup

Prerequisites

Ensure you have the following installed:

Node.js (v14.x, v16.x, or v18.x recommended)
npm (Node package manager)

Update the REACT_APP_API_KEY in your .env file to use the Gemini 1.5 Flash API:

REACT_APP_API_KEY=your_api_key_here

Installation

Clone the repository:

git clone https://github.com/belenyb/msn-react-clone.git
cd msn-react-clone

Install dependencies:

npm install

Running the App

npm start

Dependencies

The package.json file lists the necessary dependencies for the project:

• @google/generative-ai: For interacting with Gemini 1.5 Flash.
• @testing-library/jest-dom, @testing-library/react, @testing-library/user-event: For testing components.
• react, react-dom: Core React libraries.
• react-draggable: For creating draggable elements (like the chat window).
• react-markdown: For rendering Markdown formatted text.
• react-scripts: For creating and managing React projects.
• web-vitals: For measuring web performance metrics.

Gemini integration

To create an interactive chat experience, the Gemini API is used to handle multi-round conversations. The API allows for progressive user interactions and is suitable for chatbots, interactive tutors, and customer support.

Vercel deployment

Live demo here 👉 https://msn-react-clone.vercel.app