Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/patrik-fredon/ai-chat

Step into the future with AI Chat, a neon-lit, cyberpunk-themed messaging app that revolutionizes your conversations. Featuring advanced AI memory that recalls your last 5 messages, it ensures richer, more meaningful interactions. The app's visually stunning interface includes animated backgrounds, neon glow effects.
https://github.com/patrik-fredon/ai-chat

ai chat-ai chatbox interference llm-chat-interface llm-framework llm-inference

Last synced: 7 months ago
JSON representation

Step into the future with AI Chat, a neon-lit, cyberpunk-themed messaging app that revolutionizes your conversations. Featuring advanced AI memory that recalls your last 5 messages, it ensures richer, more meaningful interactions. The app's visually stunning interface includes animated backgrounds, neon glow effects.

Awesome Lists containing this project

README 

          
# AI Chat



Welcome to AI Chat—a neon-drenched, cyberpunk-inspired messaging experience that takes chatting to a whole new stratosphere! If you've ever wanted your conversations to glow brighter than a supernova while feeling like you're in a sci-fi thriller, you're in the right place.



*(Warning: May induce sudden desires to hack mainframes or don futuristic attire.)*



## Table of Contents



- [Features](#features)

- [Getting Started](#getting-started)

  - [Prerequisites](#prerequisites)

  - [Installation](#installation)

- [Usage](#usage)

- [Customization](#customization)

- [Troubleshooting](#troubleshooting)

- [Future Enhancements](#future-enhancements)

- [Contributing](#contributing)

- [License](#license)

- [Acknowledgments](#acknowledgments)



## Features



🌟 **Message Memory**: The AI remembers the last 5 messages for richer, more contextual conversations. No more goldfish-level memory lapses!



🎨 **Epic GUI Overhaul**:



- **Animated Cyberpunk Backgrounds**: Pulsating particles and animated backdrops that transport you to a futuristic metropolis.

- **Neon Glow Effects**: Text and buttons that shine brighter than your future.

- **Custom Cursors and Hover Animations**: Because every click should feel like magic.



💬 **Interactive Chat Bubbles**:

- Smooth animations using Framer Motion.

- Distinct styles for user and assistant messages with neon gradients.



🚀 **Responsive Design**: Looks impeccable on any device—from widescreen monitors to that old smartphone you keep in your drawer.



🎭 **Typing Indicators**: Know when the AI is crafting its next brilliant response.



🌗 **Dark and Light Modes**: Switch themes to match your mood (or the alignment of the stars).



## Getting Started



### Prerequisites



Make sure you have the following installed:

- Node.js (v14 or higher)

- npm (v6 or higher)

- A tolerance for neon colors (not medically required but highly recommended)



### Installation



1. **Clone the Repository**



   ```

   git clone https://github.com/yourusername/ai-chat.git

   ```



2. **Navigate to the Project Directory**



   ```

   cd ai-chat

   ```



3. **Install Dependencies**



   ```

   npm install

   ```

   This will install all necessary packages, including React, axios, Framer Motion, tsParticles, and more.



4. **Start the Development Server**



   ```

   npm start

   ```



5. **Open the App**



   Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see the magic happen.



## Usage



### Select an AI Model



Choose from the dropdown menu of available models. If you're feeling nostalgic, stick with tinyllama-1.1b. We won't judge.



### Send a Message



Type your message into the input field at the bottom. Feeling adventurous? Press Enter or click the glowing SEND button.



### Experience the Glow



Watch as your messages and the AI's responses illuminate the screen with animated flair. Try not to get too mesmerized.



### Enjoy Interactivity



Hover over buttons and elements to see interactive animations. It's like the app knows you like attention.



## Customization



### Particle Background



Want to tweak the animated background? Modify the particle settings in the Particles component within `App.tsx`:



```



```



### Themes and Styling



Customize colors, fonts, and more by modifying the Tailwind CSS configuration in `tailwind.config.js`:



```

module.exports = {

  theme: {

    extend: {

      colors: {

        neonPink: '#fe019a',

        neonBlue: '#00ffff',

        // Add your custom colors here

      },

      // ...other configurations

    },

  },

};

```



## Troubleshooting



### tsParticles Version Mismatch



If you encounter an error like:



```

The tsParticles version is different from the loaded plugins version. Engine version: X.X.X. Plugins version: Y.Y.Y.

```



**Solution**:



1. **Ensure All tsParticles Packages Are the Same Version**



   Install matching versions:



   ```



   npm install tsparticles@latest

   npm install react-tsparticles@latest

   ```



2. **Clean Install**



   Delete `node_modules` and lock files:



   ```

   rm -rf node_modules

   rm package-lock.json

   ```



   Then reinstall:



   ```

   npm install

   ```



### Other Issues



- **Blank Screen**: Check the console for errors and ensure all dependencies are installed.

- **Animations Not Working**: Make sure you have the latest versions of framer-motion and react-tsparticles.



## Future Enhancements



Just when you thought this app couldn't get any cooler, here's what's on the horizon:

- **Emojis and Reactions**: Because sometimes a 👍 says more than words.

- **Sound Effects**: Subtle audio cues for sending and receiving messages.

- **Multilingual Support**: Chat in Klingon? We're on it.

- **Message Encryption**: For those top-secret conversations about buying more neon lights.



## Contributing



We welcome contributions with open glowing arms! Here's how you can contribute:



1. **Fork the Repository**



   Click on the Fork button at the top right corner of the repository page.



2. **Clone Your Fork**



   ```

   git clone https://github.com/yourusername/ai-chat.git

   ```



3. **Create a New Branch**



   ```

   git checkout -b feature/your-feature-name

   ```



4. **Make Your Changes**



   Add those awesome features or fix pesky bugs.



5. **Commit Your Changes**



   ```

   git commit -m "Add your informative commit message here"

   ```



6. **Push to Your Fork**



   ```

   git push origin feature/your-feature-name

   ```



7. **Submit a Pull Request**



   Go to the original repository and open a Pull Request. We'll review it faster than you can say "neon nirvana."



## License



This project is licensed under the MIT License—because sharing is caring.



## Acknowledgments



- **React**: For providing the framework to build this futuristic app.

- **Framer Motion**: For making our animations smoother than a synthwave track.

- **tsParticles**: For the mesmerizing particle backgrounds.

- **Tailwind CSS**: For allowing us to style without breaking a sweat.

- **ClipLoader**: For giving users something cool to look at while they wait.

- **You**: Yes, you! For downloading, using, and hopefully contributing to this project.



No actual neon was harmed in the making of this app. Side effects may include uncontrollable appreciation for cyberpunk aesthetics and an urge to code late into the night.



Enjoy your journey through the neon-lit corridors of AI Chat!



For any questions or issues, feel free to open an issue or reach out directly. We're always here to help—unless we're busy basking in the glow of our own app, of course.