With the growing popularity of AI chatbots, we see a growing number of questions on how to use, for example, an AI chatbot in Fonto Editor. To not have each partner and customer re-invent the wheel, we decided to provide an open-source reference configuration for AI chatbot integration for Fonto Editor. Due to the wide variety of use cases, it is not part of the Fonto Editor platform, but rather a package you can integrate and tweak to fit your needs. 

This is a technical introduction on how to get this running in Fonto. We will zoom into several functional AI usecases in Fonto in the coming period. We are very interested in seeing what you do with the Fonto platform and AI, contact us to further discuss and open up a discussion on how to improve the Fonto SDK. 

Scope

This blog will take you through the main parts needed for a simple AI chatbot integration. The parts discussed in this blog are part of the reference configuration available on GitHub. As with any Fonto configuration, you will need to tailor it to your specific needs to achieve the best end-user experience.  

This blog post and the reference configuration are limited to integrating with text-based AI chatbots. They will not cover generating and inserting images and other types of media or structured content such as lists and tables. We may extend support for those more advanced features in later blog posts. 

Setting up the UI 

You can use the components provided by FDS to build an UI for your AI integration. The reference configuration integrates the AI chatbot in a dedicated sidebar. The sidebar has the advantage of being able to be open next to a document an author is editing, while also having enough space to display the conversation with the AI chatbot. 

In its initial state, the sidebar will show a little onboarding text to explain the author what they can do to get them started. Below that are some configurable chips with ready-to-use prompts, and there is a text input which allows users to write their own prompt or expand on the ready-to-use ones. 

Once a prompt has been sent over to the AI and AI has answered, it is shown as a card underneath the prompt form. The card shows the original prompt, and either a message from the AI, a bit of content generated by the AI, or both. 

From the card, the author can choose to retry the prompt, insert the generated content or delete the prompt and answer card.

Setting up a manager

The reference configuration uses a manager to manage the state of the UI and to keep track of the “conversation” with the AI. 

You’ll need to create a manager to manage the state of the UI and the “conversation” with the AI chatbot. It has to keep track of the prompts sent by the user and the responses that came back from the AI chatbot, and it has to notify the UI if any changes happen to the collection of prompts. 

The manager in the reference configuration keeps track of the sent prompts and their responses in two data structures. One is for rendering the UI, which has all the retries of a single prompt grouped together. The other one is a list in chronological order, which is given back to the AI to serve as context for the conversation. 

Setting up a connector 

To make Fonto Editor communicate with an AI chatbot running as an external service, you’ll need to set up a connector. Connectors in Fonto Editor are used to request data from external systems, in this case the AI chatbot. Internally, connectors use our CMS client implementation. This means that the requests are executed in the same way as, for example, Fonto product request. 

The connector in our reference configuration only implements one method. This method sends a request to the ai-assistant/generate endpoint when called. The connector expects the ai-assistant/generate endpoint to be available on the base URL configured for your Fonto Editor instance. Your backend is responsible for proxying the request to the actual AI chatbot backend. 

Conclusion 

With this reference configuration, you can build your own AI chatbot integration. The configuration explained here is only a start, you can tweak and extend it to fit your author’s needs.