JointJS - A schema AI build for JS frameworks.

We wanted to implement a feature like SQL table schema viewing, where different boxes are connected to each other boxes with lines. This gives us a more readable, and visually appealing look and feel for creating the custom AI bot.

So, we found a library to make this work, it had pre-built components, but it was so pre-built, that it had everything and could not be customized for our app. We ran into the scheme through the whole source code of JointJS to implement what we want, and customization based on our app.

They used TypeScript (with React JS), and we used JavaScript (With NextJS). We want to generate this page at 'ourapp.com/createbot'. But we broke the code and lost 3 hours of our time at Hackathon. There were some breaking changes, outdated models, wrong version packages in the package.json file, etc. The creator had created this and never maintained it for like past one to two years or so.

The solution we came was, that we ran the JointJS framework in a different port, and we ran our NextJS client app in another different port, whenever the user came to the route 'ourapp.com/createbot', we redirected to the port of the JointJS framework. And then once that is done, we redirect them back to our app with a query parameter passing a JSON string file that contains the necessary information for creating a bot. Then we send a request to the server.

It was a headache, but it was a lot of fun to come up with the solution.