AI ChatApp

A modern AI-driven chat application built using React that leverages the Gemini API for natural language processing.
The app provides dynamic conversations and real-time responses, enhancing user interaction through an intuitive interface.

Features

• Interactive chat interface for seamless communication.
• Utilizes the Gemini API for intelligent responses.
• Dynamic pages that adjust based on user input.
• Responsive design for optimal user experience across devices.

Technologies Used

• React – Frontend framework for building user interfaces.
• Gemini API – AI-powered API for processing natural language.
• CSS/HTML – For styling and layout.

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (v12+)
• npm (Node package manager, usually installed with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/ai-chatapp.git
   cd ai-chatapp

2. Install dependencies:

   npm install

3. Set up your environment variables:

   Create a .env file in the root of the project and add your Gemini API key:

   REACT_APP_GEMINI_API_KEY=your_gemini_api_key

Usage

1. Run the application:

   npm start

2. Open your browser and navigate to http://localhost:3000 to start chatting with the AI.

Example Output

User: Hello, how are you?
AI: I'm just a computer program, but I'm here to help you! How can I assist you today?

Project Structure

ai-chatapp/
│
├── public/              # Public assets and index.html
├── src/                 # Main application source code
│   ├── components/      # Reusable components
│   ├── pages/           # Dynamic pages
│   ├── App.js           # Main app component
│   └── index.js         # Entry point
├── .env                 # Environment variables
├── package.json         # Node.js dependencies and scripts
└── README.md            # Documentation

Code Overview

Here’s a simple example of how to use the Gemini API in your chat application:

import React, { useState } from 'react';
import axios from 'axios';
const ChatComponent = () => {
const [message, setMessage] = useState('');
const [responses, setResponses] = useState([]);
const sendMessage = async () => {
const res = await axios.post('https://api.gemini.com/v1/chat', {
message: message,
});
setResponses([...responses, { user: message, ai: res.data.response }]);
setMessage('');
};
return (


{responses.map((res, index) => (

User: {res.user}

AI: {res.ai}

))}

<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
Send

);
};

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request for improvements.

Contact

Created by Suraj jena