How I built an AI Chatbot with Elixir + Phoenix LiveView

Bottomright is an AI chatbot that trains itself by crawling your website.
In this post, I'd like to share the thought process and some of the design decisions I made when building Bottomright.

Deciding the Tech Stack

When I started building Bottomright, I had two options in mind for the tech stack:

1. ReactJS Frontend + RESTful backend

The is probably a no-brainer, almost everybody is using it.
But you know, with React, you end up building two applications actually:

The frontend in ReactJS (UI)
The backend API

To better explain, let's take a step back and see what happens when you open a web page built with React:

Server returns a simple html with a link to JS (React app) and an empty container div.
Your browser runs the JS and that renders the UI in that container.

But there's also a third step, the content, this is all the data that is displayed in the UI. Where do you get that from? Well, your server, and this is where the API comes in picture and also those loading spinners.

The whole point of using JS is to make the content dynamic, i.e the content of the page can change in response to user interaction.

2. Elixir + Phoenix LiveView

Phoenix LiveView takes a different approach. In this case, the server returns the HTML with the content baked in (aka Server Side Rendering)

But what about dynamic content? Hehe, JS is not going anywhere! LiveView also uses JS, but a tiny amout of it. Here's what happens:

Server returns the HTML + Content and also a link to a tiny JS
This JS creates a websocket connection with backend which serves the dynamic content

Here, dynamic content are small HTML fragments (deltas) that the server sends and which get added to the HTML, for example show a compose text area when you click a reply button.

So what are the benefits of this approach?

Save Time: You build only one app that handles frontend and backend.
Speed: Since the HTML has all the content baked in, the first time render is faster + no spinners.
Business Logic: All your business logic resides on the server.

In addition, since there's a websocket alive between your front end and back end you get all the real-time functionality for free! Perfect to build a chatbot!

Embedding Chatbot in a Website

Now that I was leaning towards using LiveViews, there was one more thing I needed to know — how do I add my chatbot to someone else's website?

To add any external content to a website, <iframe> is the way to go, think of it as putting a website inside another website. However, we certainly don't want to ask someone to put a huge chunk of our code to their website.
Instead, we ask them to put a small script — a launcher in the <head> section:

<script bottomright-id="xxx" src="https://bottomright.ai/launcher.js"></script>

When the page loads, this script is executed and it creates and iframe and adds it to the page:

const iframe = document.createElement('iframe');
iframe.src = 'https://bottomright.ai/chatbot/xxx';
document.body.appendChild(iframe);
...

With this in place anyone can add our chatbot to any website with a single line of code!

Render LiveView inside iframe

Next step was to render our chatbot UI with LiveView inside the iframe. For this we need to serve two paths from our Phoenix project:

The launcher.js script: This can simply go in our static_paths
The /chatbot/xxx for our iframe's src: This will serve our LiveView, so in our router.ex:

live_session :chatbot do
  scope "/chatbot", MyAppWeb do
    pipe_through [:browser, :csrf, :liveview]

    live "/:id", ChatbotLiveView
  end
end

With this in place I just added the launch script tag to a different page my Phoenix app and I could see the dummy chatbot rendered in the iframe:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script bottomright-id="xxx" src="http://localhost:3000/launcher.js"></script>
  </head>
  <body>
    <p class="uppercase"><%= title() %></p>
    <%= [@inner_content](/inner_content) %>
  </body>
</html>

TL;DR

Here's a link to source code of the demo on GitHub

Say something nice to ceepee…

1

Hey ceepee,

Great post. I've been also building chatbots but with Next.js and Pinecone. Wonder what made the stack your preference?

rishi_raj_jain_

·
2 years ago
·
1

Helpful post. Keep sharing more articles.

pentaclay

·
2 years ago
·
1

If you don't mind I would like to help you with seo and reddit analysis. From this analysis you can see what topic and keywords people are interested in your market.

Here are the report analysis for bottomright : BOTTOM RIGHT ANALYSIS

From the analysis you could see that when the topic "machine learning chatbot" have a good rating for blog and reddit which it have more engagement from the audience. And from this topic you can see they specifically interested on machine learning algorithms for chatbot, machine learning chatbot development and enhancing chatbot with machine learning

Hopefully it is beneficial for you and you can also do the analysis for you self using this free tool decentool.com

aquidor223

·
2 years ago
·
1

Great job CeePee on building Bottomright! It's amazing to see how you developed an AI chatbot that can transform the way users interact with websites. Learning about the design decisions you made along the way was super interesting. Kudos to you for making something so impressive!

wingedpigg

·
2 years ago
·