Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edujbarrios/chatbot-mdx-component-for-react
A React component to serve as a chatbot integration system
https://github.com/edujbarrios/chatbot-mdx-component-for-react
chatbot component frontend ia mdx react
Last synced: 10 days ago
JSON representation
A React component to serve as a chatbot integration system
- Host: GitHub
- URL: https://github.com/edujbarrios/chatbot-mdx-component-for-react
- Owner: edujbarrios
- Created: 2024-12-25T20:15:41.000Z (11 days ago)
- Default Branch: main
- Last Pushed: 2024-12-25T20:30:26.000Z (11 days ago)
- Last Synced: 2024-12-25T21:20:56.745Z (11 days ago)
- Topics: chatbot, component, frontend, ia, mdx, react
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🤖 Chatbot MDX Component for React
A simple chatbot component for React that supports MDX and simulates AI responses. Includes a Frequently Asked Questions (FAQ) section.
## 🚀 Features
- 💬 Simulates AI responses to user questions.
- 📚 FAQ section with clickable questions.
- 🎨 Fully customizable styles.
## 📂 Project Structure
```
chatbot_project/
├── src/
│ ├── components/
│ │ └── Chatbot.jsx # Chatbot component
│ ├── pages/
│ ├── index.jsx # Sample React page
│ └── example.mdx # MDX example using the chatbot
└── README.md
```
## 🛠️ Installation
### 1. Clone the Repository
### 2. Install Dependencies
Ensure you have Node.js and npm installed.
```bash
npm install
```
### 3. Start the Development Server
```bash
npm start
```
### 4. Open in Browser
Visit `http://localhost:3000` to see the chatbot in action.
## ⚙️ Customization
- **Modify Styles**: Adjust the `styles` object in `Chatbot.jsx`.
- **Add FAQs**: Pass an array of questions to the `faqs` prop in the `example.mdx` or `index.jsx` pages.
## 🧪 Testing the Component
Run the development server and navigate to the homepage or `/example` to test the component.
```bash
npm run dev
```
## 💡 Why I Built This
- I wanted to create something simple to integrate into React and MDX projects.
- It’s a great way to enhance user engagement by providing immediate, simulated responses.
- The component is lightweight and easy to customize for different projects.
## 🔮 What I'm Planning Next
- I plan to integrate dynamic API calls for real AI responses.
- Multi-language support is on my roadmap.
- I’m also thinking about adding persistent chat history with recent questions asked by the users that visits a webpage
## 📧 Contact
For questions, add-on ideas or feedback, feel free to reach out! 😊