If you’re following the excitement around GPT-3 and ChatGPT and you’re involved in building apps for work, as a hobby, or as a side hustle, you are likely wondering how application user interfaces will change. Read Ben’s Bites daily newsletter (free) and you’ll see at least a dozen new startups promising new generative AI-based applications with OpenAI’s GPT3 and soon Google, along with a bevy of competing large language models (LLM).  The majority of these new AI SaaS applications are web apps and it’s painfully obvious everyone is rushing their ideas out the door to see where they get traction. It’s understandable given all the excitement but the end result is so many look like old apps with AI features thrown in. 

There is an opportunity here to experiment with new and better ways of interaction that can be highly personalized to users using natural language interfaces. But how do you find that new “happy path”, that feeling in a UI that gently and intuitively bridges your users with massively powerful natural language backends? This is new territory for AI-enabled SaaS app builders and building user interfaces is slow-going without the right tools.

To deliver this new breed of apps quickly enough to satisfy your investors, you may want to add a no-code tool in your development stack that encourages rapid experimentation with new UI ideas. Ones that can rapidly bring to life new ways for AI to be leveraged.

Find the Happy Path Quickly

Whether you call these new, enhanced SaaS apps smart copilots or application assistants, you have one principal goal; figure out how to rapidly experiment with user interface designs in a way that excites users so they adopt them. 

You want to simplify, speed up, and hopefully make it nearly invisible to worry about HTML and CSS design issues. Just focus on the ease of use and appeal of the app.

Today’s non-AI SaaS apps have amazing UI/UX designs and implementations. They create an expectation in today’s users. An expectation that the current crop of AI SaaS apps fails to deliver on. And it doesn’t have to be that way.

So, how do we design better SaaS user interfaces with all that power from a natural language backend? What can we use in our development stack that can reduce the work needed to test user interface fit with customers and shorten that cycle of finding the path where everything goes right per the design and no other branching or handoff is needed, and a path that inspires and excites the user?

Accelerate the Discovery Process with a No-Code Front End Tool

Javascript (JS) frameworks like AngularJS, SvelteJS, VueJS, ReactJS, and NodeJS are powerful. They are bedrock tools for creating web applications on the Internet. A good coder (or team) can control every aspect of development, right down to the smallest icon, and the most trivial user interaction. It is by far the most flexible way to write apps. But there are downsides, and a big one is the time it takes to write, integrate, and test the source code. This is a perennial problem for apps developed completely with source code.

As a start-up, you have to work quickly to keep the funding sources (not to mention your development team) happy with your progress. Fully coded apps are flexible but can be slow. But, there’s another approach. You can write your entire app using no-code tools. Today’s no-code tools bring the power of the coder into the trembling hands of citizen developers – those who have never coded nor want to learn to.

No-code tools are not just for those who haven’t learned to code. If you can code, you can push no-code tools even further. In some tools (broadly referred to as low-code tools), you can approach the flexibility cherished by coders. 

 Within the no-code landscape of tools, there is this distinction between tools that offer no Javascript (no-code, proper) and those which allow some Javascript (low-code). In this article, we take the view of newcomers and use the term no-code, the term in widest circulation, to encompass all of these tools, whether they allow Javascript or not.

Still, coders are skeptical of no-code. Why would a coder EVER want to exchange the flexibility and power they have with coded a coded solution for a no-code solution? Well, the answer is speed of development: you get your app up quickly and you get to the visual components very quickly. 

No-code tools are burgeoning, capable, and fast. With them, you can cycle rapidly through a series of ideas and along the way maximize the new AI capabilities in your new web app.

But here’s the deal, in an environment where money is available for people who have good app ideas, you need a front-end super-tool to test ideas and quickly throw out the unsatisfactory ones.

A no-code development environment that has its own HTML/CSS/JS superpowers of rapidly assembling and testing highly interactive user interfaces can make a huge impact.

A Hidden Opportunity

When you incorporate a natural language (NL) component into your app and use that to help the user be more productive, then you make it more likely that the user stays on your app.  The more time your users spend combing through Google for support answers about your app, the less time they spend using your app.  Your goal as a SaaS builder is to keep users creative and inspired, locally, inside your app.    

Set Goals – Iterate Quickly – Get Feedback

Remember, the goal here is to iterate quickly through an unknown area of user interface development challenges. Feel your way to that perfect combination of features, ongoing subscription value, and development speed – the holy grail of SaaS apps. There are multiple no-code vendors so I asked a senior developer, Fraser Gorrie, who typically works with JS, to explain why he now prefers to use Bildr.com, a no-code tool, for all new client projects. I interviewed him last year in this article: Why nocode/Visual computing is important to a senior developer who has coded for 30+ years so I asked him to pass along his insights into using Bildr from a senior developer perspective. Here are his key points on why Bildr works so well for him:

• Bildr gives you not one but several ways to do things. This includes visual things (like components, widgets, and elements) and functional things (like events, actions, and flows). You can pick the thing that best suits your style/approach to developing no-code apps.

• Bildr gives you complete control (and I mean complete control) over the styling of your app. You can use inline CSS, create reusable blocks of CSS, or adopt a CSS framework, or any combination. You can even use external stylesheets (copied in as Headers). There is nothing in CSS that you can’t use. That is unbelievably important in client work.
  
• Bildr exposes every event type allowed by browsers that I have ever needed. This completeness in event coverage allows users to interact with elements on the page via mouse, key, scroll, and page load events. This is very unusual.
  
• Bildr allows you to bring in (as Headers or inline actions) 3rd-party JS and then allows you to interact with the objects these JS create in the browser inside flows of your app. This allows you to incorporate libraries like D3.js, JS carousels, JS animations, complex components, etc.

• Bildr exposes an incredibly detailed object model. I call it the BOM (Bildr Object Model). Using the BOM, you can call functions inside a “Run Javascript” action that do most if not all of the same things that the pre-packaged Bildr actions do when used from Bildr’s Studio UI. This allows you to write complex logic succinctly with conditional JS expressions that would otherwise take a lot of actions and flows if you used the Studio UI. This is an intermediate use of Bildr, but well worth learning/experimenting with as it provides some simplification when building complex flow chains.
  
• The Bildr Studio app is itself written with Bildr Studio and as such, you can access (using JS) aspects of the Studio to make changes if you are so inclined. This is an advanced technique, but even so, this has resulted in one advanced user creating a marketplace that now integrates with the Bildr Studio UI!

• Bildr has tight integration with Microsoft Azure for database work. This allows for data-aware things like data listeners to be set up. These listeners inform your app when data changes and keep your users up-to-date with stored data changes. However, you can choose to NOT use the internal database, and opt instead to use external data sources using the built-in API calls to the remote database of your choice. Many users have gone this route. I have used AirTable, XANO, and Supabase (all 3rd-party REST API connected to remote databases) have been used as the apps data source 

• Actions in Bildr are parameterized. Fill in the parameters that any action needs and it will execute them when that action is called during the user’s session (say during a user event or page-load event). But these parameters don’t have to use only static values. Bildr offers an amazing hierarchy of dynamic values to choose from, including custom variables, other element values, CSS attributes, as well as database values tied to a key and app-level variables including pieces of the current URL. Further, it allows for values to be selected from nested variables. This customizable, dynamic action capability is a must-have-can’t-live-without feature for creating truly dynamic apps.

• Bildr offers a live preview mode. That preview is always milliseconds away from showing whatever changes you are making to your app from within the Bildr Studio. There are a few exceptions to this (Header changes, font changes, route changes, etc.) that require you to reload the preview page.

• Bildr offers excellent integration with external APIs (via REST). They have 2 generic API actions: one that can call remote servers directly from the browser running your app (i.e. direct API call), and another that is channeled first through Bildr’s server before going on to the remote server (i.e. indirect API call). The indirect API call allows Bildr, with your direction, to insert sensitive passwords, tokens, and other secrets into the API call before it goes to the intended remote REST API. This is a secure and recommended way to handle sensitive data transfer needed by some 3rd-party vendors and at the same time, keep that data safe from unscrupulous users.

• In addition to generic API capabilities, Bildr also offers optimized vendor-specific API actions that ease the connection to some vendors’ (e.g. AirTable, Stripe, and others) servers.

Linus Lee, in “Linus Lee Is Living With AI”, eloquently introduces the growing need to allow humans to interact naturally, yet efficiently with generative AI applications.

… I think these kinds of interfaces are going to be extremely important for AI to get more general adoption. Prompting models are still a kind of dark art, and for generative models to live up to their potential, humans are going to need much more precise and predictable control over their output. These interfaces are a glimpse into a future where we’ll be able to control outputs from these models more directly and more precisely.

How do you begin? Bildr.com’s no-code tools offer an array of options for designing an interactive user interface that can quickly create and test ideas to find new ideal happy paths for your AI-powered SaaS application.

GPT-3 and ChatGPT (and many emerging foundation language models) beckon the builder spirit to create that next interesting application. Now is the time to start building smart and charming chatbots as malleable, personality-driven virtual assistants that aid users with complex tasks, answer a wide range of questions, and provide instant information in a conversational manner.

——-