DEV Community: Med Marrouchi

How do I use DevOps-style i18n

Med Marrouchi — Tue, 19 May 2026 08:20:54 +0000

Localization is one of those things every serious product eventually needs, but many teams still treat it as a separate, heavy process.

You extract strings from your app, send them somewhere, wait for translations, copy files back, fix formatting issues, review inconsistencies, and repeat the same process every time the product changes.

For developers, this often feels disconnected from the normal software delivery workflow.

That is exactly where doloc takes an interesting approach.

Instead of trying to become another large localization management platform with dashboards, complex workflows, and translator management, doloc focuses on a simpler idea:

What if localization could work like a DevOps task?

What is doloc?

doloc is an API-first localization tool for developers and engineering teams.

It takes your existing localization files, translates them using context-aware AI, and returns the result in the same structure and format, ready to review, commit, and ship.

The main idea is simple:

curl https://api.doloc.io \
  -H "Authorization: Bearer $API_TOKEN" \
  -F source="@source.en.json" \
  -F target="@target.fr.json" \
  -o target.fr.json

No complicated platform migration.
No heavy onboarding.
No new translation system to force into your stack.

You keep your files, your Git workflow, your CI/CD pipeline, and your existing development habits.

Why this matters for developers

Most modern engineering teams already have a workflow for everything:

code is versioned in Git
tests run in CI
builds are automated
deployments are scripted
reviews happen through pull requests

But localization often remains outside that loop.

doloc brings translations closer to the engineering workflow. You can run it locally, add it after your string extraction step, or integrate it into CI so translations stay updated as your application evolves.

This makes i18n feel less like a separate project management process and more like a natural part of software delivery.

Key advantages of doloc

1. API-first by design

doloc does not force developers to use a dashboard for every translation task.

You can call the API directly using curl, scripts, or CI jobs. That makes it easy to automate and easy to integrate into existing pipelines.

For teams that prefer infrastructure-as-code, Git workflows, and reproducible processes, this is a big advantage.

2. Works with real localization file formats

doloc supports common localization formats such as:

XLIFF 1.2
XLIFF 2.0
JSON
ARB
Android XML resources
Java Properties files

This makes it useful across different stacks, including Angular, React Intl / FormatJS, Flutter, Android, Java, and other JSON or XLIFF-based setups.

Instead of exporting content into a separate tool and importing it back later, you can work directly with the files your app already uses.

3. Fits naturally into CI/CD

Because doloc is API-based, it can be added to your development lifecycle in different ways.

You can run it:

locally before opening a pull request
during CI checks
after extracting new strings
as part of a scheduled localization job
before preparing a release

This is especially helpful for fast-moving products where UI copy changes frequently.

4. Keeps translation files in your repository

One of the strongest points of doloc is that your localization files stay in your repo.

That means translations can be reviewed like code.

You can check the git diff, open a pull request, review changes, and roll back if needed. For engineering teams, this is much cleaner than managing translations in a disconnected platform where the source of truth becomes unclear.

5. Context-aware translations

Basic machine translation can work for simple strings, but software localization needs consistency.

Buttons, error messages, empty states, onboarding screens, and product-specific wording need to follow the same tone.

doloc uses context from your existing translations to keep terminology and style more consistent across your app. This is especially useful when your project grows and contains many strings across multiple files.

6. Less platform overhead

Traditional localization platforms are powerful, but they are not always necessary.

Sometimes you do not need translator management, complex approval workflows, or a full dashboard. Sometimes you simply need to translate app strings quickly, review the output, and ship.

doloc is a good fit for that use case.

It gives developers a lightweight workflow without introducing a heavy process around localization.

7. Scales well with multiple languages

Another interesting point is the pricing model.

doloc pricing is based on unique source texts, not on the number of target languages or translation requests. So if your app has the same set of source keys and you want to translate them into several languages, you are not punished simply for expanding internationally.

For startups, open-source projects, and small teams, this can make localization easier to plan.

When should you consider doloc?

doloc is especially useful if:

you are building a multilingual app
your localization files are already in Git
you want to automate translation updates
you prefer API-based workflows
you do not want to manage a heavy localization platform
you want translations to fit into your PR and CI process
your team cares about developer experience

It may not replace a full translation management platform if you need a large translator team, approval workflows, or advanced project management features.

But for many developer-led teams, that is exactly the point.

doloc focuses on making localization simple, automated, and close to the code.

Final thoughts

Localization should not slow down product development.

For many teams, the ideal workflow is not another dashboard. It is a simple, reliable process that fits into the tools developers already use every day.

That is what makes doloc interesting.

It treats i18n as part of the development pipeline, not as a separate operational burden.

If you are building a multilingual product and want a developer-friendly way to keep translations up to date, doloc is definitely worth trying.

👉 Try doloc here

Install Hexabot CLI and Create Your First AI Workflow

Med Marrouchi — Mon, 18 May 2026 17:57:12 +0000

Install Hexabot CLI and Create Your First AI Workflow Project

Getting started with a new automation platform should not take hours.

In this tutorial, I’ll show you how to install the Hexabot CLI, create a new project from the starter template, and run it locally.

This is the fastest way to start experimenting with Hexabot and build your first AI workflow project.

Watch the full video here:

What is Hexabot?

Hexabot is an AI workflow automation platform designed for building workflows, actions, agents, and conversational channels in one runtime.

You can use it to create automations that connect conversations to real actions, integrate with external services, and build AI-powered assistants that are more controlled, observable, and extensible.

Instead of starting from a large monorepo or manually wiring everything yourself, the Hexabot CLI helps you generate a clean project workspace and start building faster.

Prerequisites

Before installing Hexabot, make sure you have:

Node.js installed
npm or another package manager
A terminal
Docker, if you want to run Docker-based services locally

If you do not have Node.js installed yet, I recommend using NVM so you can easily manage Node.js versions.

Node.js with NVM guide:
https://docs.hexabot.ai/developer-guide/setup-node.js-with-nvm

You can quickly check your local setup with:

node --version
npm --version

1. Install the Hexabot CLI

Install the Hexabot CLI globally:

npm install -g @hexabot-ai/cli

Once installed, check that the CLI is available:

hexabot --help

You can also use the CLI without installing it globally:

npx @hexabot-ai/cli --help

2. Create a New Hexabot Project

Now create your first project:

hexabot create my-project

The CLI will scaffold a new Hexabot project and guide you through the initial setup.

You may be asked to provide initial admin account details such as:

First name
Last name
Email
Password

These credentials will be used to access your local Hexabot admin interface.

3. Move Into the Project Folder

Once the project is created, move into the new workspace:

cd my-project

At this point, you have a generated Hexabot project ready to run locally.

4. Start the Local Development Server

Run the project with:

hexabot dev

This starts your local Hexabot development environment.

Once the app is running, you can open the admin interface in your browser:

http://localhost:3000

You may also find the local API and API documentation at:

http://localhost:3000/api
http://localhost:3000/docs

Useful CLI Commands

Here are a few commands you will probably use often:

hexabot create <project-name>

Create a new Hexabot project.

hexabot dev

Run the project locally in development mode.

hexabot check

Check your local project setup.

hexabot migrate

Run database migrations when needed.

For the full CLI reference, check the official documentation:

https://docs.hexabot.ai/developer-guide/cli-command-reference

Common Issues

`hexabot: command not found`

This usually means the CLI was not installed globally or your npm global path is not available in your terminal.

You can try:

npx @hexabot-ai/cli --help

Or reinstall the CLI:

npm install -g @hexabot-ai/cli

Wrong Node.js version

Use NVM to install and switch Node.js versions:

nvm install 20
nvm use 20

Then check:

node --version

Port already in use

If the app cannot start because a port is already being used, stop the process using that port or update your local configuration.

What to Do Next

Once your project is running, the next step is to create your first workflow.

You can start here:

https://docs.hexabot.ai/quickstart/create-your-1st-workflow

You can also explore the installation guide:

https://docs.hexabot.ai/quickstart/installation

Useful Links

Hexabot Website:
https://hexabot.ai

Documentation:
https://docs.hexabot.ai

Installation Guide:
https://docs.hexabot.ai/quickstart/installation

Setup Node.js with NVM:
https://docs.hexabot.ai/developer-guide/setup-node.js-with-nvm

CLI Command Reference:
https://docs.hexabot.ai/developer-guide/cli-command-reference

Create Your First Workflow:
https://docs.hexabot.ai/quickstart/create-your-1st-workflow

GitHub Repository:
https://github.com/hexabot-ai/hexabot

Community Forum:
https://community.hexabot.ai

YouTube Channel:
https://www.youtube.com/@hexabot-videos

Final Thoughts

The Hexabot CLI is the easiest way to start building with Hexabot.

In just a few commands, you can install the CLI, generate a new project, run it locally, and start creating AI workflows.

If you find Hexabot useful, consider giving the repository a star on GitHub:

Star the Hexabot Github Repository ⭐

It helps support the project and makes it easier for more developers to discover it.

Automating LinkedIn Posts from Telegram with Hexabot

Med Marrouchi — Fri, 15 May 2026 17:06:11 +0000

In this article, I want to share a practical Hexabot demo: publishing a LinkedIn post directly from Telegram.

The idea is simple:

You send a message to a Telegram bot.
Hexabot receives it.
An AI workflow prepares the LinkedIn post.
The content is published to LinkedIn automatically.

This is a small example, but it demonstrates something important: AI workflows do not have to live only inside dashboards or internal tools. They can start from a conversation, connect to external services, use AI, and trigger real business actions.

What we are building

This example connects three main pieces:

Telegram as the input channel
Hexabot as the AI workflow automation engine
LinkedIn as the publishing destination

The workflow starts when a user sends a message to a Telegram bot. Hexabot receives the message through the Telegram channel extension, processes it through a workflow, generates or formats the LinkedIn post using an AI model, then publishes it using the LinkedIn API.

You can find the full example here:

https://github.com/hexabot-ai/linkedin-post-from-telegram-example

Why this example matters

A lot of AI demos stop at generating text.

But in real operations, generating text is rarely the final step.

Usually, you need to:

receive input from a user or a system
understand the request
transform it into structured content
call an external API
track what happened
and keep the process reusable

That is where workflow automation becomes useful.

In this example, Telegram is not just a chat interface. It becomes the entry point for an automation process. LinkedIn is not just a manual publishing destination. It becomes an action executed by the workflow.

Hexabot sits in the middle as the orchestration layer.

How the workflow works

At a high level, the flow looks like this:

Telegram message
      ↓
Hexabot Telegram channel
      ↓
AI workflow
      ↓
LinkedIn publisher action
      ↓
LinkedIn post

A user sends a prompt such as:

Write me a LinkedIn post about this first test post that I sent from Telegram to my Hexabot LinkedIn integration.

Hexabot receives the message, runs the imported workflow, uses the configured AI model to prepare the content, then publishes the final post to LinkedIn.

Main setup steps

The repository includes a detailed README, but here is the overall process.

1. Create a Hexabot project

First, install the Hexabot CLI and create a new project:

npm install -g @hexabot-ai/cli
hexabot create hexabot-linkedin-bot
cd hexabot-linkedin-bot

Then start the project locally:

hexabot dev

The admin interface will be available at:

http://localhost:3000

2. Create a Telegram bot

To receive messages from Telegram, you need to create a bot using @BotFather.

In Telegram:

/start
/newbot

After choosing a name and username, Telegram gives you a bot token. This token will later be configured inside Hexabot as a credential.

3. Install the Telegram channel extension

The example uses the Hexabot Telegram channel extension:

npm install hexabot-channel-telegram

This extension allows Hexabot to receive messages from Telegram and use them as workflow inputs.

4. Expose your local API

Telegram needs a public webhook URL to send messages to your local Hexabot instance.

For local development, you can use a tunneling service such as:

ngrok
pinggy

Once your local API is exposed, update your .env file:

API_ORIGIN=https://your-public-url.example.com/api

5. Configure the Telegram source in Hexabot

Inside the Hexabot admin panel, go to the sources settings page:

http://localhost:3000/settings/sources

From there, configure the Telegram source:

enable the source
select the default workflow
add the Telegram bot token credential
add a webhook secret credential
enable automatic webhook setup if needed

This allows Telegram messages to be routed into the correct Hexabot workflow.

6. Configure LinkedIn access

To publish to LinkedIn, you need a LinkedIn developer application and an access token with the required permissions.

The README walks through the process of:

creating a LinkedIn app
enabling the required LinkedIn products
generating an OAuth access token
retrieving the LinkedIn sub identifier
using that identifier as the author reference for publishing

You will need two important values:

LinkedIn access token
LinkedIn member identifier

These values are used by the LinkedIn publisher step in the workflow.

7. Import the workflow

The repository includes a ready-made workflow file:

linkedin-post-form-telegram.yml

Import it from the Hexabot workflow editor:

http://localhost:3000/workflow-editor/

After importing it, configure:

the AI model provider
the model name
the AI API key credential
the LinkedIn access token
the default LinkedIn author identifier

Once saved, the workflow is ready to run.

What makes Hexabot useful here

This example is not only about publishing to LinkedIn.

It shows how Hexabot can be used as an AI automation layer where workflows can:

start from a conversation
connect to channels like Telegram
use AI models
call external APIs
execute real actions
stay self-hostable and extensible

For developers, this is especially useful because Hexabot workflows can be extended with custom actions, channels, and integrations.

That means you are not limited to Telegram and LinkedIn.

The same pattern could be adapted for:

posting to other social platforms
creating CRM notes
sending internal notifications
generating support replies
preparing marketing content
triggering approval workflows
building internal AI assistants

Final thoughts

This Telegram-to-LinkedIn example is intentionally simple, but it shows the power of connecting conversations with real automation.

Instead of opening multiple tools, copying text, formatting content, and publishing manually, you can start the whole process from a Telegram message and let Hexabot orchestrate the workflow.

You can explore the full example here:

https://github.com/hexabot-ai/linkedin-post-from-telegram-example

And if you find Hexabot useful, consider giving the main repository a star on GitHub:

Star the Hexabot Github Repository ⭐

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.