Ever since ChatGPT v3 was released by OpenAI in November 2022, the field of AI has seen rapid development. It seemed that every week, there was a new AI / LLM / chatbot solution that was better than all of the ones that came before it - all of them promising to revolutionize the way we work. However, even though the different AI applications diverged in the details, for a long time they all seemed to agree on one thing - the way to interact with them was via a text box.
Request customer service? Text box. Generate an image? Text box. Summarize an article? Text box. And so on…
As Y Combinator points out in a recent video, it seemed for a moment that chatting with the computer was the only way an AI interface could be designed. Yes, imitating a human conversation (instead of a machine control panel as current user interfaces do) was a genuine innovation and a breath of fresh air in the UI design space - in much the same way touch interfaces stormed the stage around the year 2010. And for some applications, it was more than enough - LLM chatbots now threaten the stranglehold that Google Search (arguably the pioneer of the simple text box interface) has attained on information retrieval, for example.
And yet, it felt like something was missing. Surely this couldn’t be all there was to AI interfaces?
As it turns out, it wasn’t. A new UI paradigm took shape, spearheaded by AI agents - technology which promises greater applicability to business problems than chatbots, but which needs more user input to set up and operate than the intuitive but simplistic text box interface.
Let’s introduce AI agents first, for the benefit of those few lucky readers whose social media feeds aren’t full of articles discussing them already. Why do they seem to be a big deal, and why do they need a special UI interface?
These autonomous automations (“autonomations”?) can go behind the scenes and directly interact with websites and users - even make phone calls - in order to carry out a task for you or to find the information you need. All of that based on a few high level instructions.
For example, as explained by IBM, if you asked an AI agent “Which week in the next year would likely have the best weather for a surfing trip in Greece?”, the AI agent might:
Hopefully you can see why the world has been enraptured by the AI agents technology. It promises to unlock a whole new world of possibilities. After all, who wouldn’t appreciate having a personal assistant that could make phone calls and do research for them? Who wouldn’t want their own apprentice at work to whom all mundane tasks could be offloaded? Who wouldn’t like to have a personal salesperson that could write a cold email to touch base with a prospective customer?
AI agents offer value wherever an application currently requires its users to perform a rigid sequence of actions to answer common queries like “What is our annual recurring revenue (ARR)?”, “What was the biggest deal closed last month?” or “Which piece of content drove the most traffic to our site?”. However, most major pieces of software (CRM systems, HR information systems, accounting systems, sales and marketing systems, etc.) currently do not let their users automate much at all. In the current paradigm, users either possess intimate knowledge of the intricacies of the application’s UI… or they are invited to take expensive training so that they may gain such knowledge.
Clearly, several major industries are ripe for disruption if AI agents can deliver on their promise of allowing newbies to retrieve information from these business-critical applications with a natural language prompt - and many agentic startups have already emerged to try and capture this opportunity. At the same time, the big players do not want to be left behind, and have been busy announcing ambitious AI initiatives of their own (e.g. Salesforce Einstein GPT, Workday Illuminate, QuickBooks Intuit Assist, or Hubspot Breeze).
No matter the company size, the same set of challenges arises for anyone who thinks about introducing AI agents to their application. It is not a coincidence that these questions might sound familiar to anyone who ever had to manage a team of humans:
In other words, how can we make sure that the AI agent does what the user needs it to do? How can we let the user verify that the AI agent did its work correctly? How can we give our users more control and more flexibility?
A new class of user interfaces is needed in order to interact with AI agents.
According to Rafael Schaad in a discussion with Y Combinator, today’s predominant user interface language of “nouns” - i.e. buttons, forms, and dropdowns - is not very well suited for the overseeing of agentic processes. While the process is running, there is nothing for us to control. And when the process is being specified, we are missing a language to specify actions and their connections.
Meanwhile, a chat interface is insufficient for this task as well because it works like a line - in one dimension, proceeding strictly sequentially from a beginning to an end (usually when the conversation’s context window is exhausted), and immutable. It doesn’t allow us to branch out from one line of thought. It doesn’t allow us to chart our path, and its many possibilities, ahead of time. It doesn’t allow us to look back at what happened earlier in the conversation and get more context about why it happened.
As it turns out, there is a way to do it. We just need to expand to more dimensions. All this time, in order to move forward we just needed to look back at what was created before, and give a fresh new twist to a trusty technology of the past - the flowchart.
Crucially, flowcharts are two-dimensional. They allow us to map a process from beginning to end, with all of its twists and turns, separate subtasks, conditional branches and loops. They allow us to chart the flow of the whole interaction instead of offering just a single instantaneous point of contact in the here-and-now (as chatbots do). The twist is that flowcharts can now be interactive instead of static as they used to be in the past.
Most importantly, flowcharts allow us to specify how something should happen - not only what should happen. They allow us to talk in “verbs” - e.g. “get information for me”, “autocomplete”, “autosuggest”, etc. In effect, flowcharts allow us to collaborate with the computer, instead of commanding it.
Previously, the only people who needed to know flowcharts were business analysts and software engineers, but with the rise of AI applications, flowcharts have emerged as an exceptionally suitable way to model AI processes. They are becoming relevant for everyone - from salespeople and HR managers to accountants and marketing specialists.
This is demonstrated by the growing number of AI applications that use flowcharts as the core of their user interface, enabling users to set up diverse AI agent experiences: Appmixer, n8n, Lindy, VectorShift, Langflow, Postman AI Agent Builder, FlowiseAI, Botpress, FlowGent AI, Flowpoint, or Relay.app, to name just a few.
It used to be the case that most applications didn’t need a flowchart builder - it was a relatively niche feature that was required primarily for modeling business processes, laying out network diagrams or preparing call flows. However, with the shift of how applications will look in the AI agent era, it is clear that flowcharts will become much more relevant for many more applications from a wider variety of industries. According to Y Combinator, 10 years from now, flowchart interfaces may become the standard way to interact, control and monitor AI agents.
If you are looking to contribute to the scramble and take your application to the next level with AI, you should consider using JointJS for the front-end of your agentic interface. It is a mature open-source diagramming library which provides the building blocks to create flowcharts that match the look-and-feel of your application in no time. When paired with JointJS+ (the paid extension of JointJS), it allows you to create powerful application interfaces that include zooming and panning, property viewing and editing and advanced element interactions.
To prove that we are not bluffing about the capabilities of JointJS, we created an example AI Agent Application with a flowchart interface.
Open the AI Agent Builder app in a new tab and try it out! You start by choosing a trigger for your flow, then continue by adding different actions and control components in the interactive diagram area in the center. You can tweak existing actions by selecting them and modifying their configuration in the property editor and viewer on the right.
Flowcharts are, in many ways, an evolution of the AI chatbot interface, improved specifically to handle the needs of applications that define and monitor AI agents. They allow your users to specify complex AI workflows that allow them to automate tasks that currently require rigid sequences of manual actions, and then to monitor the AI’s performance.
Empowering your users to solve their problems faster with the help of AI? That sounds like a win-win to us.
If you are thinking about creating your own AI agent interface, JointJS is here to smooth this path for you - we would like to extend to you an invitation to a no-commitment 30-day trial of JointJS. It will allow you to experience the advanced JointJS+ features for yourself, get started quickly using 170+ demo applications and feature examples, and explore how its features can be seamlessly integrated with your application.
Happy building!
.avif)
.jpg)
.avif)
.avif)
.png)
