Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/polyfact/polyfire-chat-next-ts-boilerplate
Customizable chatbot template powered by Polyfact SDK. Craft a unique Assistant experience, tailored and relevant like never before.
https://github.com/polyfact/polyfire-chat-next-ts-boilerplate
Last synced: 11 days ago
JSON representation
Customizable chatbot template powered by Polyfact SDK. Craft a unique Assistant experience, tailored and relevant like never before.
- Host: GitHub
- URL: https://github.com/polyfact/polyfire-chat-next-ts-boilerplate
- Owner: polyfact
- Created: 2023-09-01T09:11:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-21T11:10:56.000Z (12 months ago)
- Last Synced: 2024-07-15T07:18:11.745Z (4 months ago)
- Language: TypeScript
- Size: 570 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🤖 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](#-features)
- [🔧 Prerequisites](#-prerequisites)
- [🚀 Installation](#-installation)
- [🖥 Usage](#-usage)
- [🎨 Color Picker for Development](#-color-picker-for-development)
- [💬 Using polyfire-cli](#-using-polyfire-cli)
- [🔑 Scripts](#-scripts)
- [📚 Dependencies](#-dependencies)
- [🥞 Stack](#-stack)
- [✨ Contributing](#-contributing)
- [📜 License](#-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:
```bash
git clone https://github.com/kevin-btc/polyfire-chat-nextjs-boilerplate.git
```
2️⃣. Navigate to the project directory:
```bash
cd polyfire-chat-nextjs-boilerplate
```
3️⃣. Install dependencies:
```bash
npm install
```
## 🖥 Usage
1️⃣. Start the development server:
```bash
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:
```bash
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](https://github.com/polyfire-ai/polyfire-chat-nextjs-boilerplate/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!