polyfact / polyfire-chat-react-vite-js-boilerplate

🤖 polyfire-chat-react-boilerplate

Elevate your chat experience with the Polyfire SDK, seamlessly integrated into a React project and stylishly crafted using styled-components! Embrace the power and safety of TypeScript in your React development.

📌 Table of Contents

• 🌟 Features
• 🔧 Prerequisites
• 🚀 Installation
• 🖥 Usage
• 🎨 Color Picker for Development
• 💬 Using polyfire-cli
• 🔑 Scripts
• 📚 Dependencies
• 🥞 Stack
• ✨ Contributing
• 📜 License

🌟 Features

• Smooth integration with the Polyfire SDK for enhanced chat functionalities.
• Ready-to-use themes for chat, header, and footer, customizable to fit your needs.
• Developed with the versatile and powerful React framework.

🔧 Prerequisites

• Node.js
• npm/yarn

🚀 Installation

1️⃣. Clone the repository:

git clone https://github.com/polyfire-ai/polyfire-chat-react-boilerplate.git

2️⃣. Navigate to the project directory:

cd polyfire-chat-react-boilerplate

3️⃣. Install dependencies:

npm install

🖥 Usage

1️⃣. Launch the development server:

npm start

2️⃣. Visit http://localhost:3000 to see your chatbot in action!

🎨 Color Picker for Development

In the development environment, a color picker tool is included for personalizing the chat UI's color palette. This tool enables developers to experiment with various colors in real-time. After selecting your preferred colors, click the "Copy Config Color" button to copy the configuration. Then, update the default color configuration in src/app/page.jsx with your new selection.

💬 Using polyfire-cli

Opt for the polyfire-cli for a streamlined setup:

1️⃣. Activate the CLI:

npx polyfire-js

2️⃣. Choose "chat". 3️⃣. Follow the step-by-step instructions for a hassle-free configuration.

🔑 Scripts

• npm start: Run the development server.
• npm run build: Get ready for production.
• npm run preview: Peek into the production-ready build.

📚 Dependencies

• Core: react, react-dom
• Chat: @polyfire/chat, polyfire
• Icons: phosphor-react
• Dialog: @radix-ui/react-dialog
• Types: typescript

🥞 Stack

• React
• TypeScript

✨ Contributing

Ideas? 🤔 Bugs? 🐞 Be a part of our journey! Check out issues to contribute.

📜 License

This project adheres to the MIT License. Refer to the LICENSE file for more information.

---

If polyfire-chat-react-boilerplate brightens your day, don't forget to give us a ⭐ on GitHub!