🤖 polyfire-chat-nextjs-boilerplate

Jumpstart your chat experience with the Polyfire SDK, elegantly integrated into a Next.js project and beautifully styled using styled-components! Enjoy the robustness of TypeScript in your Next.js development.

📌 Table of Contents

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

🌟 Features

• Seamless integration with the Polyfire SDK to empower chat functionalities.
• Pre-defined themes for chat, header, and footer, easily adjustable.
• Built with the flexible and efficient Next.js framework.

🔧 Prerequisites

• Node.js
• npm/yarn

🚀 Installation

1️⃣. Clone the repository:

git clone https://github.com/kevin-btc/polyfire-chat-nextjs-boilerplate.git

2️⃣. Navigate to the project directory:

cd polyfire-chat-nextjs-boilerplate

3️⃣. Install dependencies:

npm install

🖥 Usage

1️⃣. Start the development server:

npm run dev

2️⃣. Open http://localhost:3000 to interact with your chatbot!

🎨 Color Picker for Development

In the development environment, a color picker tool is available to customize the chat UI's color scheme. This intuitive tool allows developers to experiment with different colors in real-time. Once you have chosen the desired colors, simply click the "Copy Config Color" button. This will copy the configuration to your clipboard. Then, replace the default color configuration in src/app/page.tsx with your new color scheme.

💬 Using polyfire-cli

For a guided setup, use the polyfire-cli:

1️⃣. Launch the CLI:

npx polyfire-js

2️⃣. Choose "chat". 3️⃣. Follow the prompts for an easy setup.

🔑 Scripts

• npm run dev: Start a local development server.
• npm run build: Prepare your project for production.
• npm run preview: View the production build.

📚 Dependencies

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

🥞 Stack

• Next.js
• TypeScript

✨ Contributing

Got ideas? 🤔 Found a bug? 🐞 Join our community! Visit issues to get started.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Enjoy using polyfire-chat-nextjs-boilerplate? Give us a ⭐ on GitHub!