DEV Community: Med Marrouchi

First Night at Web Summit 2024: The Energy is Electric!

Med Marrouchi — Mon, 11 Nov 2024 17:08:14 +0000

Stepping into the opening night of Web Summit 2024 in Lisbon feels like stepping into the beating heart of innovation. The venue is packed, buzzing with excitement as thousands of attendees gather from around the globe. The sheer energy in the air is palpable, and it’s clear this is the place to be for anyone passionate about technology, startups, and groundbreaking ideas.

For me, this night is just the beginning. I’m thrilled to announce that on Wednesday, I’ll be showcasing Hexabot, our open-source conversational AI builder. Hexabot has been a labor of love, and I can’t wait to share it with the world.

Stay tuned for more updates as the week unfolds. If you’re attending, swing by our booth on Wednesday—we’d love to meet you and hear your thoughts. Let’s make this Web Summit an unforgettable experience!

5 Interesting New Github Repos You Need to Explore

Med Marrouchi — Wed, 06 Nov 2024 09:28:59 +0000

If you're like me, always on the lookout for cool new projects to dive into on GitHub, you're in for a treat! I've rounded up five standout repositories that are making waves right now—whether you're into chatbot builders, next-gen CRM, document parsing, or visualizing cloud architecture, there's something here for everyone. Let's explore!

1. Hexabot

Hexabot is conversational AI builder that enables you to create and manage bots, chatbots and/or agents, across multiple channels with a visual editor. It includes a plugin system that makes it highly customizable and extendable. There is even an extension library from where you can download extensions like plugins, channels, etc to add additional features: https://hexabot.ai/extensions

Star on GitHub ⭐ - Hexabot

2. Extractous

Extractous offers a fast and efficient solution for extracting content and metadata from various document types such as PDF, Word, HTML, and many other formats. Built in Rust, Extractous delivers speed and efficiency while providing bindings for many programming languages. Whether you're working with documents in different formats or building your own document processing pipeline, Extractous is here to help.

Star on GitHub ⭐ - Extractous

3. Twenty

The CRM landscape is evolving, and Twenty is leading the charge into a new era of customer relationship management. Say goodbye to vendor lock-in and say hello to full freedom: host it yourself, fork it, contribute back—the choice is yours. Inspired by Notion, Twenty makes it intuitive to track customers, create opportunities, take notes, and manage tasks with a beautiful interface that's built for you.

Star on GitHub ⭐ - Twenty

4. Docling

Docling makes document parsing as easy as it should be. Whether you're dealing with PDFs, DOCX, PPTX, HTML, or even scanned images, Docling can transform them into Markdown or JSON with minimal hassle. It's perfect for anyone looking to integrate document parsing into a workflow, with powerful tools like OCR and advanced document understanding capabilities to handle tables and layouts.

If you're working with LlamaIndex or LangChain, Docling integrates seamlessly, making it a great choice for RAG or QA applications. Go ahead and star Docling if this sounds like something you need—it's a must-have tool for document wrangling.

Star on GitHub ⭐ - Docling

5. Diagrams

Diagrams lets you create system architecture diagrams using Python code. Imagine being able to describe cloud system architectures—AWS, Azure, GCP, Kubernetes—all through Python without ever touching a diagramming tool. This is Diagram-as-Code at its finest, providing a way to visualize, share, and track your architecture plans in version control.

From on-premises nodes to SaaS solutions, Diagrams supports them all, making it perfect for prototyping or documenting your existing setup. Interested? Give it a try and don't forget to star the project if you find it useful!

Star on GitHub ⭐ - Diagrams

These are some of the most interesting repositories that you should definitely check out if you haven't already. Be sure to give them a star if you find value in what they're doing—a simple star can help projects grow and gain the attention they deserve. Which one are you going to explore first?

How I used an OpenSource LLM in Wordpress

Med Marrouchi — Tue, 05 Nov 2024 09:09:15 +0000

Today, I'll guide you through integrating an open source LLM model into a WordPress website using Hexabot—a powerful, open source AI conversational builder that lets you create chatbots or AI agents. If you love open source projects, consider giving Hexabot a star on GitHub and exploring our documentation. Let’s get started!

Step 1: Install Hexabot CLI

First, you'll need to install the Hexabot CLI globally. You can do this easily using npm:

npm install -g hexabot-cli

Next, create a new Hexabot project by running the following command:

hexabot create wordpress-chatbot

This will generate a folder containing your chatbot project. Navigate to the new project directory:

cd wordpress-chatbot

Install the necessary dependencies by running:

npm install

Before proceeding, make sure you have Node.js and Docker installed, as Docker is required to run the project.

Step 2: Initialize Hexabot

After installing the dependencies, initialize the environment file "docker/.env":

hexabot init

This command will generate an environment configuration file. Once done, you can launch your project in development mode by running:

hexabot dev

You will also need to enable Ollama, an open source LLM tool, which is integrated by default to run the AI model.

Step 3: Setting Up Ollama

Ollama is an important part of our setup, as it handles the open source LLM model that powers your chatbot. Once you’ve started the services, it’s time to configure Ollama.

To pull the required LLM model (for example, Ollama 3.2), SSH into the container:

docker exec -ti ollama bash

Then pull the model:

ollama pull ollama-3.2

Once the model is pulled, you’re ready to configure the chatbot in the Hexabot admin panel.

Step 4: Accessing the Admin Panel

With the services up and running, open your browser and head to http://localhost:8080. This will open the Hexabot admin panel.

Navigate to the Visual Editor. Here, you can drag and drop blocks into the canvas to create the conversation flow for your chatbot. Add the Ollama block plugin to enable the AI model response. Configure the plugin settings, such as defining a context like:

"You are an AI assistant working for Etudes, an architecture firm."

Make sure you also pull the appropriate model as instructed in the previous step.

Step 5: Integrate Hexabot with Your WordPress Website

Now, let’s connect this chatbot to your WordPress website. First, navigate to your WordPress project and start your site using Docker Compose:

cd path/to/wordpress

docker-compose up

Access your WordPress site, then go to the Plugins section and search for the Hexabot plugin. Install and activate it.

Step 6: Configure the Chat Widget

Once the Hexabot plugin is activated, go to the Settings to configure the chat widget. You’ll need to set the API URL to:

http://localhost:4000

Ensure the correct token is set, and select the web channel to complete the configuration.

Step 7: Customize the Widget

After adding the widget to your site, you can further customize it by changing its settings. For example, you can adjust the widget title, colors, and other elements to match the branding of your WordPress website. Refresh your website, and you should see the widget live and ready to engage with users.

Try interacting with your chatbot: say "Hello" and watch as Ollama powers the responses, providing the AI experience you configured earlier. You can further tweak the settings to provide a personalized touch.

Conclusion

Congratulations! You've successfully integrated an open source LLM with your WordPress website using Hexabot. This setup allows you to build a powerful and interactive chatbot, perfect for engaging users directly on your WordPress platform.

If you found this guide helpful, please consider starring our Hexabot GitHub repository and getting involved in our community. Hexabot is built by the community, for the community, and we would love for you to join our journey! You can also connect with us on Discord, and check out our YouTube channel for more tutorials and tips.

Thanks for reading, and happy coding!

Top 8 OpenSource Tools for AI Startups

Med Marrouchi — Mon, 28 Oct 2024 07:37:28 +0000

Are you building the next AI unicorn? 🦄

Whether you're in the early stages of an AI startup or scaling up, having the right set of open-source tools can make a world of difference. I've put together a list of some top-notch open-source tools that have been invaluable to me, and I think they'll be incredibly helpful for your AI journey too:

Hexabot

If you're building AI-powered chatbots, you need something flexible, powerful, and open. Hexabot is an open-source chatbot solution designed to be highly extensible. It supports multi-channel chat, powerful NLP capabilities, and a great plugin system. Perfect for rapid prototyping or launching your chatbot product.

Star on GitHub ⭐ - Hexabot

StableStudio

StableStudio is Stability AI's official open-source version of DreamStudio, providing a user-friendly interface for generative AI. This web-based application enables users to create and edit generated images, and we're eager to see how the community contributes to its evolution!

Star on GitHub ⭐ - StableStudio

ChatGPT4all

Generative AI is hot, and ChatGPT4all is an exciting open-source option. It allows you to run your own language model without needing proprietary APIs, enabling a private and customizable experience.

Star on GitHub ⭐ - ChatGPT4all

Ollama

Ollama is an emerging tool that helps you bring open LLMs into production with ease. It simplifies serving and running models in a production environment, whether on the cloud or locally. It's the bridge between prototyping LLMs and making them work for your customers.

Star on GitHub ⭐ - Ollama

MLflow

Managing experiments, versioning, and deployments can quickly get chaotic. MLflow is an open-source platform that helps with tracking experiments, managing models, and deploying them. It’s a must-have tool if you're serious about ML engineering.

Star on GitHub ⭐ - MLflow

TensorFlow

This one hardly needs an introduction. TensorFlow by Google is a staple for many AI projects. It’s an end-to-end open-source platform for machine learning, capable of handling everything from initial prototyping to full deployment in production.

Star on GitHub ⭐ - Tensorflow

PyTorch

For those who prefer a more flexible, Pythonic interface, PyTorch is often the way to go. Its dynamic computation graphs and ease of use have made it a favorite for researchers and AI startups alike. Plus, the thriving PyTorch community means plenty of support and open-source examples.

Star on GitHub ⭐ - PyTorch

Keras

If you need simplicity, Keras is a great high-level API built on top of TensorFlow. It lets you quickly prototype neural networks without worrying about low-level implementations. Keras is perfect for getting those first models up and running—an essential part of the startup hustle.

Star on GitHub ⭐ - Keras

These tools have proven themselves time and time again, not only in the projects I've worked on but also within the broader AI community. Whether you are building advanced NLP systems, tackling MLOps, or developing a full-fledged chatbot platform, these open-source tools can accelerate your development, save you time, and help you avoid reinventing the wheel.

Have you used any of these tools? Which ones have made the biggest impact in your startup journey? I'd love to hear about your experience!

Why Vivaldi Might Be the Browser You've Been Waiting For

Med Marrouchi — Sat, 12 Oct 2024 22:52:19 +0000

Why Vivaldi Might Be the Browser You've Been Waiting For

In a web dominated by mainstream browsers, Vivaldi stands out as a refreshing alternative, offering a unique approach to browsing that prioritizes customization, privacy, and user empowerment. If you’ve ever felt that your current browser falls short of catering to your specific needs, Vivaldi might just be the solution you didn’t know you needed.

1. Ultimate Customization

At its core, Vivaldi is designed for power users who demand flexibility and control over their browsing environment. Unlike other browsers that offer limited customization, Vivaldi allows you to fine-tune every aspect of your browsing experience, from interface colors and tab management to keyboard shortcuts and even mouse gestures. Whether you’re someone who likes to keep things minimal or prefer a feature-rich setup, Vivaldi adapts to your preferences effortlessly.

Two-Level Tab Stacking

Tab chaos can quickly become a nightmare, but Vivaldi’s innovative two-level tab stacks help you group and navigate your tabs in an intuitive way. With visual tab previews and the ability to stack unlimited tabs, you can organize your workspace more efficiently and save time as you switch between tasks.

2. Privacy Built-In, Not Bolted On

In today’s internet landscape, privacy is a key concern. With Vivaldi, privacy isn't just a feature—it’s part of their philosophy. The browser blocks trackers and prevents ads from invading your browsing space without relying on third-party plugins. Most importantly, Vivaldi doesn’t track your behavior, giving you the freedom to browse without worrying about surveillance or profiling. And with end-to-end encryption on synced data, even your passwords and browsing history are protected from prying eyes.

3. All-in-One Tools

Forget the endless parade of extensions. Vivaldi comes with built-in tools that reduce your reliance on third-party apps, all while keeping your data secure. With features like:

Private email client (yes, built into your browser),

Calendar,

Feed reader,

Quick note taker, and

Full-page screen capture,

Vivaldi packs a punch, ensuring that you have everything you need in one place, saving you time and effort.

4. Seamless Syncing Across Devices

Another standout feature is Vivaldi’s seamless syncing capabilities. Whether you’re using Vivaldi on your desktop, tablet, or mobile, you can securely sync your browsing history, bookmarks, and even open tabs with end-to-end encryption. Your data is stored on servers in Iceland, protected by some of the world’s strictest privacy laws, so you can trust that your information stays where it belongs—under your control.

5. Designed for Mobile

Vivaldi’s mobile version isn’t just an afterthought. It’s equipped with the same powerful features you’d expect on desktop, including an ad blocker, tracking protection, and the ability to sync with your desktop effortlessly. Vivaldi also brings its customization magic to mobile, allowing you to tailor your experience even on the go.

6. Why Choose Vivaldi?

With Big Tech increasingly encroaching on our privacy and pushing their own agendas, Vivaldi offers an escape—a way to take back control of your browsing experience without compromising on speed, security, or customization. It’s not just a browser; it’s a statement against the way the web is increasingly commodified, reminding us that the internet can be a place where privacy and personalization coexist.

Get away from Big Tech, and have fun doing it—that’s Vivaldi in a nutshell.

Download Vivaldi today and start experiencing the web on your terms: https://vivaldi.com/

6 Best Open-Source AI Chatbot Builders 🔥

Med Marrouchi — Sat, 12 Oct 2024 08:31:31 +0000

Open-source chatbots are not just tools for automated responses—they represent a thriving community of developers who contribute to building versatile, transparent, and customizable conversational agents. Whether you’re looking to embed a chatbot on a website, create a corporate assistant, or explore the potential of AI-based chat, open-source solutions provide the flexibility and power to make your vision a reality.

Here’s a look at six of the best open-source chatbots available today, from visual no-code builders to frameworks that let you build chatbots tailored to your specific needs.

1. Hexabot ⭐️

Hexabot is an advanced open-source chatbot builder that focuses on AI-powered, multilingual, and highly customizable chatbots. With its open plugin system, Hexabot makes it easy to extend the functionality by adding new channels, blocks, or integrations. Developers will love the rich feature set: a visual editor for chat flows, an analytics dashboard, and multilingual capabilities are just a few highlights.

Hexabot is built for developers who need more control over customization while still being straightforward to use. The project is licensed under AGPLv3, encouraging community collaboration while ensuring fair use.

GitHub - Hexabot

2. Typebot 🌐

Serving the same purpose as TypeForm, Typebot is a lightweight open-source chatbot builder designed for simplicity. The drag-and-drop UI allows users to create automated chat flows without writing a single line of code. Typebot excels in scenarios where you need a chatbot to answer repetitive questions—like customer support or educational use cases.

If you’re a beginner looking to launch a chatbot without worrying about code, Typebot is a perfect fit.

GitHub - Typebot

3. Botpress: No-Code Visual Chatbot Builder 🖋️

Botpress is well-known for its powerful visual flow editor, where users can build conversational agents without diving into the complexities of programming. This is a chatbot solution that fits perfectly in environments that value a graphical, low-code approach to bot creation—ideal for both small businesses and large enterprises.

Botpress also provides NLU capabilities to ensure that chatbots can understand natural language, making it a great choice for non-technical users looking for an effective solution.

GitHub - Botpress

4. Rasa: The Developer’s Choice for Custom Chatbots 🛠️

Rasa is a open-source frameworks for building highly customized chatbots, particularly for enterprise-level solutions. Written in Python, it offers extensive tools for NLU, dialogue management, and integrations with a variety of services.

Rasa stands out as a great choice for developers building serious, sophisticated chatbots tailored to specific corporate requirements. Its flexibility and support for conversational AI pipelines give it a unique edge in custom projects.

GitHub - Rasa

5. Tock: Offline-First Chatbots for Embedded Devices 🛡️

Tock is an impressive open-source platform that targets not just cloud-based chat but also embedded devices. Designed with an offline-first approach, Tock makes it possible to run chatbots on devices that do not have stable Internet connectivity—ideal for use cases in IoT, vehicles, or other scenarios where embedded intelligence is crucial.

If you need a solution for creating chatbots on embedded devices with or without an Internet connection, Tock is a solid choice.

GitHub - Tock

6. BotMan: PHP-Powered Conversational Bots 💻

BotMan is an open-source chatbot framework specifically for PHP developers. It provides an easy-to-use syntax to create conversational agents that can be integrated with messaging services like Slack, Telegram, Facebook Messenger, and others.

For those in the PHP ecosystem, BotMan is an excellent tool for building chatbots, providing well-documented features and community-driven support.

GitHub - BotMan

Honorable Mentions: DeepPavlov & HuggingChat 🤖💖

DeepPavlov: An AI framework for creating highly advanced conversational agents and virtual assistants. It offers pre-built deep learning models and flexibility to develop sophisticated applications.
GitHub - DeepPavlov
HuggingChat: HuggingChat uses open-source GPT-based models for building conversational experiences that leverage natural language generation. Perfect if you want to bring LLM capabilities to your chatbot projects.
GitHub - HuggingChat

Conclusion

Open-source chatbots offer endless possibilities—from simple, no-code tools to frameworks that power sophisticated AI. Depending on your needs—whether it's no-code simplicity with Botpress, custom development with Rasa, embedded applications with Tock, or multilingual chatbots with Hexabot—you’ll find an open-source solution that fits your project perfectly.

Join these open-source communities and contribute to make conversational AI accessible to everyone. Which of these chatbot platforms have you tried, or are planning to use? Let me know in the comments!

Understanding the Shadow DOM and When to Use It

Med Marrouchi — Thu, 10 Oct 2024 18:10:29 +0000

Understanding the Shadow DOM and When to Use It

The Shadow DOM is a powerful feature in the modern web development toolkit that helps developers encapsulate elements and isolate styles. Essentially, the Shadow DOM allows you to create a "mini-DOM" inside an element that is completely isolated from the rest of the page. This means that the CSS and JavaScript inside this shadow DOM won't interfere with anything outside of it, and vice versa.

One of the key problems the Shadow DOM solves is CSS style leakage—where styles defined for one part of your application inadvertently affect other parts, leading to a lack of predictability and harder-to-maintain code. The Shadow DOM creates a style boundary, preventing this issue.

Here's an example use case where the Shadow DOM is particularly useful:

Imagine you have a chatbot widget—like the Hexabot widget—that you want to embed on multiple websites. Each of these websites has its own CSS, and some styles might interfere with how your widget should look and behave. For instance, a website might have global styles for <div> elements, and if your widget's elements are simply added to the DOM, those styles could change the look and feel of your widget.

To prevent the website's CSS from conflicting with your widget's CSS, you can leverage the Shadow DOM to encapsulate your widget. Here's a simple example to illustrate this:

Without Shadow DOM:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  const el = React.createElement;
  const domContainer = document.getElementById('hb-chat-widget');
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    domContainer,
  );
</script>

In this example, any global styles from the website might interfere with the widget's look.

With Shadow DOM:

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  // Create the shadow root and attach it to the widget container
  const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
  const shadowContainer = createElement("div");
  document
      .getElementById('hb-chat-widget')
      .attachShadow({ mode: 'open' })
      .append( 
        shadowContainer,
        createElement("link", {
          rel: "stylesheet",
          href: "<<WIDGET URL>>/style.css"
        });
      );

  // Render the widget inside the shadow root
  ReactDOM.render(
    React.createElement(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    shadowContainer,
  );
</script>

In this version, the widget is rendered inside a shadow root. This means that the styles defined for the website won't impact the widget, and vice versa. The CSS styles for your widget are kept isolated, ensuring a consistent look across any website the widget is embedded in.

When Should You Use the Shadow DOM?

The Shadow DOM is useful whenever you need to create self-contained components that won't be affected by or affect other parts of the application. Here are some scenarios where you should consider using it:

Widgets or Plugins: When developing reusable widgets that could be embedded in various environments, using the Shadow DOM will prevent external CSS conflicts.
Complex UI Components: If you're building custom elements like sliders, carousels, or other UI components where you want tight control over styling.
Isolation Needs: Any scenario where you need complete isolation of CSS and JavaScript to avoid unintentional interactions.

By encapsulating the styles and behavior of a component, the Shadow DOM can be a crucial tool for developers building modular, reusable, and robust web components.

The Hexabot live chat widget uses this method to ensure a seamless and consistent user experience across different websites, without any interference from external styles. If you're interested in seeing this in action, feel free to check out Hexabot and star the GitHub repository to support the project!

Star the Hexabot Github Repository ⭐

Gemini + Facebook Bot with Hexabot.ai

Med Marrouchi — Mon, 07 Oct 2024 17:52:36 +0000

In our latest video, we showcased the basics of Hexabot, diving into how to setup and build a basic chat flow. If you’ve been following along with our development journey, this is one video you don’t want to miss!

Here’s a breakdown of what we covered:

Natural Language Understanding (NLU) for Intent Detection

We demonstrated how Hexabot's NLU takes chatbot interactions to the next level. While simple keyword matching works in many cases, NLU allows the bot to truly understand user intent. For example, if the user says "good morning" or "hello," Hexabot can correctly detect the greeting intent and respond accordingly, regardless of the variation in phrases.

The NLU engine also allows you to train custom models by importing your own datasets. You can then configure the bot to identify and infer user intent, which is a game changer for more complex conversational flows.

Multilingual Support

With Hexabot’s robust multilingual support, you can easily create chatbots that speak multiple languages. The built-in localization manager makes it simple to define languages, translate messages, and ensure that your chatbot can communicate effectively with users around the world.

In our demo, we translated messages into French, enabling the chatbot to seamlessly switch between English and French, responding to users based on their preferred language. Imagine the possibilities for global customer engagement!

Google Gemini Integration for Generative AI

Next, we explored Hexabot’s integration with Google Gemini to unlock generative AI capabilities. This allows Hexabot to generate intelligent, context-aware responses based on user input, making conversations feel even more natural.

Installing the Gemini plugin is as simple as running a command in your terminal. Once set up, Hexabot can use the Gemini API to provide detailed responses, grounded in knowledge from predefined content. For example, we set up a scenario where Hexabot acts as a pizza shop assistant, offering real-time pizza suggestions like a pro!

Facebook Messenger Integration

To top it off, we demonstrated how to connect Hexabot to Facebook Messenger, enabling you to engage with users directly on your business page. By installing the Messenger channel plugin, Hexabot can communicate with your Facebook audience, providing real-time responses and handling customer queries effortlessly.

With easy-to-follow steps, you can configure your chatbot’s connection to Facebook, ensuring your chatbot is live and ready to assist customers on Messenger, whether it's for pizza orders or any other use case.

Want to Try Hexabot for Yourself?

If you're excited about the potential of Hexabot, now is the time to dive in! Whether you’re looking to build a multilingual chatbot, integrate powerful generative AI, or set up multi-channel support, Hexabot’s open-source framework is ready to handle it all.

Head over to our GitHub repo to get started and explore the full documentation.

Star the Hexabot Github Repository ⭐

Have any questions or suggestions for future videos? Drop a comment below or join the conversation with our amazing community. Don’t forget to subscribe to our channel for more deep dives into Hexabot's capabilities!

Until next time, happy coding! 👾

Setup SSL with Certbot + Nginx in a Dockerized App

Med Marrouchi — Sun, 06 Oct 2024 09:37:44 +0000

If you've ever struggled with setting up SSL in a Docker environment, you're not alone. SSL can be an intimidating hurdle for many, but it's crucial to secure your application, especially when it's exposed to the internet. In this post, I'll guide you through adding Nginx and Certbot for Let's Encrypt SSL generation in a Dockerized setup. This allows you to automatically renew certificates and keep your environment secure with minimal hassle.

Let's dive in!

Prerequisites

Docker and Docker Compose installed on your machine.
Basic understanding of Docker Compose and Nginx.
A domain name pointing to your server.

In this example, we are using Nginx as a reverse proxy and Certbot to manage SSL certificates. Below, you'll find the docker-compose.yml, shell script for auto-reloading Nginx, and necessary configuration files to set up everything.

Docker Compose Configuration

First, let me show you the Docker Compose configuration to set up Nginx and Certbot.

# docker-compose.yml

services:
  nginx:
    container_name: nginx
    image: nginx:latest
    restart: unless-stopped
    env_file: .env
    networks:
      - your-app-network # Update this with your application service network
    ports:
      - 80:80
      - 443:443
    depends_on:
      - your-app # Your application service
    volumes:
      - ./nginx/secure/:/etc/nginx/templates/
      - /etc/localtime:/etc/localtime:ro
      - ./nginx/certbot/conf:/etc/letsencrypt
      - ./nginx/certbot/www:/var/www/certbot
      - ./nginx/99-autoreload.sh:/docker-entrypoint.d/99-autoreload.sh  # Script to autoreload Nginx when certs are renewed

  certbot:
    image: certbot/certbot
    volumes:
      - ./nginx/certbot/conf:/etc/letsencrypt
      - ./nginx/certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"  # Renew certificates every 12 hours

This Docker Compose file defines two services:

Nginx: Acts as a reverse proxy and serves requests to your backend.
Certbot: Takes care of generating and renewing SSL certificates using Let's Encrypt.

The certbot service runs in an infinite loop, renewing certificates every 12 hours. Certificates are stored in a shared volume (./nginx/certbot/conf), allowing Nginx to access the latest certificate files.

Nginx Configuration

Nginx serves as the reverse proxy, handling both HTTP and HTTPS traffic. For the initial request, Certbot needs HTTP (port 80) to complete the domain verification process.

# default.conf.template

server {
    listen 80;
    server_name ${APP_DOMAIN};

    location / {
        return 301 https://$host$request_uri;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

server {
    listen 443 ssl;
    server_name ${APP_DOMAIN};
    server_tokens off;
    client_max_body_size 20M;

    ssl_certificate /etc/letsencrypt/live/${APP_DOMAIN}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${APP_DOMAIN}/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://my-app:3000; // Your app service name
    }
}

In the configuration file above, Nginx does the following:

Redirects HTTP requests to HTTPS to ensure secure communication.
Handles SSL termination and proxies requests to your backend service (e.g., my-app:3000).

Auto-Reloading Nginx Configuration

After the SSL certificates are renewed, Nginx should be reloaded to apply the updated certificates. To automate this process, add a simple auto-reload script:

# 99-autoreload.sh

#!/bin/sh
while :; do
    # Optional: Instead of sleep, detect config changes and only reload if necessary.
    sleep 6h
    nginx -t && nginx -s reload
done &

This script runs inside the Nginx container and reloads Nginx every 6 hours, or whenever the certificate is renewed.

Environment Variables

Create an .env file to store your domain name and email address for Certbot registration:

# .env file

APP_DOMAIN=your-domain.com
SSL_EMAIL=contact@your-domain.com

Initial SSL Certificate Generation

Before Nginx can serve HTTPS traffic, you need to generate the initial SSL certificate. Use the following bash script (init-letsencrypt.sh) to generate the SSL certificate:

#!/bin/bash

# Source the .env file
if [ -f .env ]; then
  export $(grep -v '^#' .env | xargs)
fi

if ! [ -x "$(command -v docker compose)" ]; then
    echo 'Error: docker compose is not installed.' >&2
    exit 1
fi

domains=(${APP_DOMAIN:-example.com})
rsa_key_size=4096
data_path="./nginx/certbot"
email="${SSL_EMAIL:-hello@example.com}" # Adding a valid address is strongly recommended
staging=0 # Set to 1 if you're testing your setup to avoid hitting request limits

if [ -d "$data_path" ]; then
    read -p "Existing data found for $domains. Continue and replace existing certificate? (y/N) " decision
    if [ "$decision" != "Y" ] && [ "$decision" != "y" ]; then
        exit
    fi
fi

if [ ! -e "$data_path/conf/options-ssl-nginx.conf" ] || [ ! -e "$data_path/conf/ssl-dhparams.pem" ]; then
    echo "### Downloading recommended TLS parameters ..."
    mkdir -p "$data_path/conf"
    curl -s https://raw.githubusercontent.com/certbot/certbot/master/certbot-nginx/certbot_nginx/_internal/tls_configs/options-ssl-nginx.conf >"$data_path/conf/options-ssl-nginx.conf"
    curl -s https://raw.githubusercontent.com/certbot/certbot/master/certbot/certbot/ssl-dhparams.pem >"$data_path/conf/ssl-dhparams.pem"
    echo
fi

echo "### Creating dummy certificate for $domains ..."
path="/etc/letsencrypt/live/$domains"
mkdir -p "$data_path/conf/live/$domains"
docker compose -f "docker-compose.yml" run --rm --entrypoint "\
  openssl req -x509 -nodes -newkey rsa:$rsa_key_size -days 1\
    -keyout '$path/privkey.pem' \
    -out '$path/fullchain.pem' \
    -subj '/CN=localhost'" certbot
echo

echo "### Starting nginx ..."
docker compose  -f "docker-compose.yml" up --force-recreate -d nginx
echo

echo "### Deleting dummy certificate for $domains ..."
docker compose  -f "docker-compose.yml" run --rm --entrypoint "\
  rm -Rf /etc/letsencrypt/live/$domains && \
  rm -Rf /etc/letsencrypt/archive/$domains && \
  rm -Rf /etc/letsencrypt/renewal/$domains.conf" certbot
echo

echo "### Requesting Let's Encrypt certificate for $domains ..."
#Join $domains to -d args
domain_args=""
for domain in "${domains[@]}"; do
    domain_args="$domain_args -d $domain"
done

# Select appropriate email arg
case "$email" in
"") email_arg="--register-unsafely-without-email" ;;
*) email_arg="--email $email" ;;
esac

# Enable staging mode if needed
if [ $staging != "0" ]; then staging_arg="--staging"; fi

docker compose -f "docker-compose.yml" run --rm --entrypoint "\
  certbot certonly --webroot -w /var/www/certbot \
    $staging_arg \
    $email_arg \
    $domain_args \
    --rsa-key-size $rsa_key_size \
    --agree-tos \
    --force-renewal" certbot
echo

#echo "### Reloading nginx ..."
docker compose -f "docker-compose.yml" exec nginx nginx -s reload

Summary

In summary, the configuration provided above sets up Nginx as a reverse proxy for your Dockerized application, with Let's Encrypt SSL certificates automatically managed by Certbot. This setup ensures a secure connection to your application without the headache of manual SSL renewals.

Final Notes

To bring up your environment the first time, use:

chmod a+x init-letsencrypt.sh
./init-letsencrypt.sh

The following times you can bring up your environment with the usual docker compose command:

docker-compose up -d

Make sure your domain points to your server and that ports 80 and 443 are open to allow access to HTTP and HTTPS traffic.

If you run into any issues or have suggestions for improvements, let me know in the comments below! I'm happy to help troubleshoot or expand on specific topics.

Hexabot Setup & Visual Editor Tutorial: Build Your First AI Chatbot

Med Marrouchi — Fri, 04 Oct 2024 16:33:46 +0000

Hello chatbot enthusiasts! In this tutorial, we’ll guide you through the process of setting up and using Hexabot, the open-source AI chatbot builder. We’ll begin by cloning the GitHub repository, installing dependencies, and configuring environment variables for Hexabot. You’ll also learn how to launch the project using Docker, access the admin panel, and use the visual editor to create chatbot flows.

By the end of this video, you'll know how to build chatbot blocks with triggers and messages, test their responses, and connect multiple blocks for smooth conversations. This is just the start—more tutorials are on the way to dive into Hexabot’s powerful features!

If you haven’t seen the introduction video yet, make sure to watch it on our channel. Don’t forget to subscribe, join our Discord community, and share your thoughts in the comments. Happy chatbot building!

Star the Hexabot Github Repository ⭐

Github Repo: https://github.com/hexastack/hexabot
Documentation: https://docs.hexabot.ai
Discord: https://discord.com/invite/rNb9t2MFkG
Website: https://hexabot.ai

How I built an AI Chatbot in 5 minutes 😎

Med Marrouchi — Fri, 04 Oct 2024 11:43:19 +0000

Hey chatbot enthusiasts! If you're passionate about building chatbots, today we're diving into Hexabot, an open-source AI-powered chatbot builder. In this guide, we'll walk through the process of setting up Hexabot and building a simple chatbot.

Let's get started!

What is Hexabot?

Hexabot is an open-source AI chatbot builder that allows you to create and manage chatbots across various platforms. It's designed to be highly customizable, enabling you to add your own NLU models, create complex chatbot flows, and manage everything through a visual editor. It’s available on GitHub under the AGPLv3 license, and you can check out the introductory video on our YouTube channel.

Step 1: Cloning the Hexabot Repository

The first thing you'll need to do is clone the official Hexabot GitHub repository. Here’s how:

Copy the GitHub repository URL from here.
Open your terminal and run the following command to clone the repo:

git clone https://github.com/hexastack/hexabot.git

Once the cloning is complete, navigate into the project folder:

cd hexabot

Step 2: Installing Dependencies

After cloning the repo, install the required dependencies using npm:

npm install

This will install all the necessary npm packages for the project.

Step 3: Setting Up Environment Variables

To configure Hexabot, you’ll need to generate a .env file. Use the following command to initialize the environment variables:

npx hexabot init

This will generate a .env file under the docker/ folder. You can customize this file if needed to adjust things like database settings and API keys.

Step 4: Starting Hexabot

Hexabot offers two modes:

Production mode (npx hexabot start), which pulls Docker images from Docker Hub.
Development mode (npx hexabot dev), which builds the Docker images locally for development purposes.

For this guide, let's start with production mode:

npx hexabot start

This will pull the necessary Docker images for MongoDB, API, the widget, and the admin panel.

Step 5: Accessing the Admin Panel

Once the Docker containers are running, open your browser and go to:

http://localhost:8080

For the initial login, use the default credentials available in the README file (admin@admin.admin / adminadmin). After signing in, you’ll be taken to the visual editor.

Step 6: Building a Chatbot

Hexabot’s visual editor is where the magic happens. It's a canvas where you can drag and drop blocks to design your chatbot's flow. Let’s walk through a simple example:

Create a block: Double-click on the canvas to add a new block.
Define a trigger and response: For example, you can add "hi" as a trigger, and the chatbot will respond with "hi back."
Set as entry point: Don’t forget to toggle the block as the entry point if you want it to start the conversation.

Step 7: Testing Your Chatbot

You can use the Live Chat Tester to test the chatbot right in the admin panel:

Open the live chat tester.
Type "hi" and you should see the chatbot respond with the message you’ve set.
You can chain additional blocks to create more complex interactions, like asking for a user’s name or offering quick replies.

Step 8: Adding More Complex Logic

You can continue enhancing your chatbot by adding blocks for different user inputs. For example, you can:

Use Quick Reply blocks to offer choices to users.
Chain multiple blocks together for more advanced conversations.

For instance:

If the user says, "How are you?" the bot could respond, "All good, how about you?"
Continue building logic like these to create a rich conversational flow.

What’s Next?

This post covers the basics of setting up Hexabot and building your first chatbot. We will explore advanced features in future tutorials, like handling user intents, adding custom plugins, and using the NLU engine.

Stay Connected

Star the Hexabot Github Repository ⭐

I encourage you to join our community:

Subscribe to our YouTube channel for video tutorials.
Join our Discord for live discussions and community support: https://discord.gg/rNb9t2MFkG
Check the documentation on https://docs.hexabot.ai to get started with more advanced features.

Don’t hesitate to share your feedback in the comments below! I'd love to hear how you’re using Hexabot.

Introducing Hexabot: Your 100% Open-Source Chatbot Solution

Med Marrouchi — Thu, 03 Oct 2024 10:49:18 +0000

Hello folks! I’m lead engineer at Hexabot, and I'm excited to introduce you to Hexabot, our open-source platform for building AI-powered chatbots and agents.

What is Hexabot?
Hexabot is designed to provide a smooth, effortless experience in building and managing chatbots. Whether you’re looking to create engaging conversations, handle customer support, or automate internal processes, Hexabot makes it easy with its visual editor, which allows you to drag and drop blocks to create complex chat flows.

But Hexabot is more than just chat flows! It’s a framework that supports custom features by installing extensions (plugins, channels, ...), including text-to-action capabilities, and it’s hybrid—allowing you to integrate large language models (LLMs) like OpenAI’s ChatGPT or your own custom models and have the best of both worlds (Generative AI vs Deterministic AI).

Key Features:

Visual Editor: Drag and drop blocks to easily create chat flows.
AI-Powered: Hexabot comes with a built-in Natural Language Understanding (NLU) engine, enabling the detection of user intent and language.
Multi-Channel Support: Build chatbots that work seamlessly across multiple platforms, delivering a unified experience.
Multilingual Capability: Hexabot can handle multiple languages, allowing chatbots to communicate with users in their preferred language.
Extensions: Easily extend functionality by adding custom features or integrations. We welcome developers to contribute to the community by building reusable extensions!

Join the Community!

Star the Hexabot Github Repository ⭐

As an open-source project, Hexabot thrives on community involvement. You can explore the project, star us on GitHub, and contribute by developing new features or providing feedback. Check out our documentation at docs.hexabot.ai, or join our Discord server to engage with other developers and users.

Please check out our Youtube channel for more : https://www.youtube.com/@hexabot-videos

We’re excited to see what you’ll build with Hexabot! Feel free to leave any comments or feedback—it’s invaluable to our project’s growth.