This case is about developing a suite of tools for marketers and maximizing value for them. It all started with a startup called Neuroflash and their idea for a productive MarTech web application. At the core of the app, there’s a content generator that helps create engaging texts and graphics.
Our cooperation with Neuroflash began with developing data visualization using custom graphs. Then, we extended their team to build the frontend layer of the application, and our collaboration progressed further.
We’ve reached an interesting point where a need emerged to implement a WYSIWYG editor integrated with generative AI.
During our collaboration, a business need arose to give users the opportunity to generate and edit content through an easy-to-use interface in a visual form, allowing them to see the changes in real-time.
We wanted to increase the usability of the app for marketers and add a new, modern feature supporting text formatting, expanding it with additional AI functions through a clear, progressive interface.
Besides AI text generation, we implemented several additional AI features to significantly expand the app’s utility. For example:
It’s worth mentioning that this is an ongoing project. The feature is already available to users, but we are gradually improving it. We started with a simple editor for creating and editing text with markdown support and have progressed a lot since then.
At the beginning of this project, we researched JavaScript libraries that could be used to develop this solution and compared them in terms of scalability, safety, and performance.
Initially, the editor was written in Slate.js, which met the basic needs of the first version. As requirements increased, the editor library was updated to support more custom solutions.
During the implementation phase, we encountered a few challenges.
Every library has its limits, and these became more apparent during further customization. This required more delving into the documentation and searching within it.
Sometimes, it was about the smallest things. For example, a placeholder for a title and a paragraph wasn’t supported in our library, so we needed to learn how to create our own custom solutions (which was not always doable within an acceptable time frame) or redefine the concept with business decision-makers.
We always make an effort to keep our libraries up-to-date for several reasons.
Firstly, it is important for safety reasons to prevent security vulnerabilities. Secondly, using the current library version allows us to easily bring improvements to our project, such as bug fixes, functionality, and performance enhancements. Thirdly, we want to avoid having to make significant changes later when we are forced to upgrade for any reason.
So, once in a while, we need to spend time updating the libraries and making corresponding changes in the code. Recently, there was a major update that required us to implement many changes in the end product to adapt to it.
Another challenge we encountered in this project was modernizing and making the appearance of the entire application more consistent.
At some point, we realized that the frontend layer of our app differed from similar modern solutions, so a new business need emerged to work on the UI.
This work included changes intended to harmonize with global trends. For example, we added a toolbar at the top of the editor with extra formatting options and styled it in a modern way.
The biggest and most important challenge is keeping the app up-to-date with present-day functionality trends compared to similar tools.
From the beginning, we have put a lot of work into intuitiveness and functionality, creating a wide range of options and possibilities for the end user and delivering a transparent editor.
This also requires observing the market and staying up to speed on trends, news, and technology.
As a frontend development team, we worked with a separate backend team that deals directly with the AI and provides us with an API for communication.
When there are any problems on the OpenAI side, they are visible on our side too, which mostly affects the feature’s availability.
Especially in the case of graphics generation, we needed to implement local versions of the model instead of fully depending on third-party APIs, which allowed us to control the availability better.
Moreover, a difficulty that our users sometimes encounter is the restriction of certain prompts or keywords considered prohibited for various reasons. In this case, all we can do is clearly inform the user that the content can’t be generated because of this prompt or keyword.
Adding an editor with a wide range of additional features shifts the audience for the Neuroflash app. Previously, it was primarily targeted at data-driven marketers analyzing their content. Now, it appeals to a much broader range of practitioners.
We aimed to create a tool that marketers can use for various needs related to content generation. Our goal was to cover the entire process, from idea generation to full creation, including optimization and personalization.
Additionally, the app offers tools to predict the effectiveness of examined content – how well it would perform with a specific audience.
One feature dedicated to creating consistent content with a particular message is Brand Hub. This allows users to establish a brand identity within the app based on provided company information. The Brand Voice created is then used to ensure consistency in every piece of content.
To sum up, here are five key considerations for developers when creating a solution based on AI APIs:
Good luck with your project! If you encounter any issues, remember that you can always contact us.
