Intro to No-Code x AI

Now that you know what no-code and AI mean at a high level, it’s time to walk you through how they come together. Let's just say no-code x ai = magic 🪄

Intro Guides

•Jul 26, 2024

Max Haining

Founder of 100School.com

Table of Contents

Do not index

👋 Introduction

Now that you know what no-code and AI mean at a high level, it’s time to walk you through how they come together. Let's just say no-code x ai = magic 🪄

🧱 Learn the foundations (so you can fly!)

Thanks to no-code and AI, there are now quite a few ways you can build your ideas all without having to write any code.

But regardless of how you get from A to B (we’ll be showing you what we think is the best way, especially for non-techies👇), you still need to understand the fundamentals of what goes into building an application to get the best results.

Sure, no-code and AI have made it accessible enough for practically anyone to build an app. That doesn’t mean every app will be created equally. What do we mean by that? Well, you have a choice: to become a sous chef or a michelin star chef (or something in between). Everyone can cook, but the results won’t be the same. Why? Because each person’s grasp of cooking fundamentals are a little different. And the same applies to no-code and ai - your ability to build, will be shaped by your understanding of app making fundamentals.

That’s why this section (before we get into the weeds of no-code and ai) is all about giving you a solid foundational understanding of the ingredients that go into app making. Essentially learning how to think and approach creation - this will make your life way easier when you actually start building.

Let’s get into it!

In this section, we'll introduce you to 3 core concepts that underpin most, if not all software you use on a daily basis and so when you come to build your own, you’ll have a good lens through which to make decisions.

The triumvirate of "UI, Data & Logic" broadly encompasses the different parts within a software solution. Each one can be broken down further, but for now, think of it like this:

⚡️ UI, or User Interface or frontend: the UI is a set of screens you use to engage with the software. You’ll be used to interacting with buttons, forms, menus, images, links and more interface elements in the apps and websites you use on an everyday basis. As a no-coder, you will either drag and drop pre-built elements to design your UI or create your own.

⚡️ Data: When interacting with these elements on app screens or websites, you are doing so to manipulate data whether you know it or not. Whether you are using a spreadsheet, a social media site, an app or a website, all of the content you see is data, and crucially it is both generated and stored somewhere. As a no-coder, you will get to define how all this data interrelates, where it lives online and how it’s accessed.

⚡️ Logic: To get information out of a system, to edit existing information, to delete it perhaps or even insert new information, you will use a combination of (1) and (2) above but with some added special sauce — the Logic. As a no-coder, you're in control of the logic of your software, so you get to decide what happens to the data and when.

For a good introduction, watch the first 5 mins of the below video…

Now let’s get into the weeds of each part.

UI 💻

Each no-code tool has its own quirks when it comes to interface elements. This can be confusing but thankfully, if you learn a few key aspects of how UI elements work you should be able to pick up just about any no-code tool and hit the ground running.

As you design and build your no-code software you will want to show information to your users whether that be text, images, tables, animations and so on. If your purpose is just to display that information to your users for their general consumption, then you will typically choose to use UI elements that have no interactive qualities. For most web pages, 90% of them consist of text + images that don't do anything.

All the no-code tools will offer you text "blocks", image blocks, a way to display data in tabular form and some other choices. You’ll also need to decide whether to make use of UI elements in your design that can only hold "static content" or ones which allow "dynamic content" to flow into them. For example, you can see in Softr's interface below (right hand of the screen), they let you pick between static and dynamic blocks! Anyway, more on this later!

Scrolling & swiping 📱

One step up from just displaying information is to allow your users to swipe and scroll through it all. When designing a web page this level of interaction is typically handled for you by the web browser but when designing a web or mobile app using no-code tools this requires a little more consideration. To illustrate what I mean, take Carousels, also known as Sliders, which allow you to navigate through a set of 'slides' which are usually square or rectangular and image oriented.

A good example might be the Shorts section you see on YouTube's mobile app where you swipe horizontally to view more Shorts. The important thing to note is that many no-code tools allow you to create these types of simple yet useful UI interactions to increase user engagement with your product.

Clicking & tapping 🖱

Of course, arguably the most important aspect of creating an engaging and useful piece of software is to allow the user to click around it, to explore, to give immediate feedback (think of a "Like" feature, for example), to watch a video and so on. When you design out your no-code ideas, you will have access to UI elements like text links, buttons, icons, menus and more. The important thing to remember is that if you think a particular piece of information you’re displaying will require some sort of input from the user, in the form of a click, then make use of an interactive UI element in your design from the start if possible or at least know in advance that it is easy to add a clickable UI element without a major redesign.

There are many lessons to learn about designing "clickable" interfaces including the consideration of the user experience but for now, just remember that text links and buttons are going to become your best friends in no-code!

Data entry 👨‍💻

The last bit of the UI puzzle, for now anyway, is Data Entry. Filling out forms is not the most exciting feature of no-code building, but it’s still one of the most useful and common aspects of designing modern software.

If you’re looking to capture more detailed information from your users, you want them to be able to contact you easily, or maybe your product is designed to allow users to keep regular records of something and over time gives them insights into their data, forms will almost always come into it.

Despite the necessity of forms and data capture in your software, no-code tools vary wildly in their ability to support your form building (information capturing) efforts. You may come up against some of the following issues:

😨 Difficulty adding an element to capture images from users

😨 Saving the submitted form content easily and in a well formatted way

😨 Validating (A.K.A making sure users are submitting the right stuff) the form data and preventing poor/incorrect data from being submitted

😨 Giving users feedback (in the UI) on a failed attempt to submit a form

On our programs, we’ll help you to overcome some of the issues inherent with designing and processing forms but just be aware that this has always been a thorny area of software design regardless of whether you code or no-code your solution.

Another thing to consider with data entry is how you, as the no-coder, will process data related to your product. Examples may include: email marketing lists; a list of users; blog posts, a set of images, geographical coordinates for a list of locations, a database of books... the possibilities are endless.

Why data is the lifeblood of your no-code apps 🩸

It flows in both directions both from the user into your product and from your product to the user. As we saw above, forms are often used to collect data from users, but that data needs to be processed, manipulated, and ultimately stored so that it can be used later either by the user or by you as the application builder.

The most common forms of data are text, images, audio, and video. Because there are only those four types really to think about you'd expect your design to be quite straightforward, but it can take many different forms.

Obviously from those four, text is probably the easiest to consider, collect and store. Images are probably the second easiest although there are issues around image optimisation which a lot of people aren't aware of. Audio is next and recording audio has got a lot easier over the years. Even video has got easier to record and you can build in those audio and video features into your no-code apps.

Form data ℹ️

Before we get ahead of ourselves talking about audio and video though let's just think about the simplest form of data, which would be text.

Most form data that's collected is text-based and on any form there will be a specific field to capture specific information. Typically each of those fields on the form will relate to a specific field in a database (which would just be like a column in an excel spreadsheet).

We just want to make you aware that there are different ways of processing and storing them.

So what happens when that form actually gets submitted? 🤔

What typically happens is that some method of processing goes on where the form data is being sent to a specific location and that location knows what to do with that data.

In some no-code tools, the form processor is built into the tool itself. In other tools they need extra support from other tools to actually do that form processing for them. We'll continue with this example later on, but for now let's just assume that the form processor has done its job by taking the text submitted via a form and the data is where it needs to be.

Data stores 👀

Data stores can take various guises from simple text files to Google Sheets and Excel through to full databases. Essentially, it’s somewhere data related to your no-code app is stored.

Just like Google Sheets has columns and rows, a database will have fields and records. Just think that every time a new form is submitted, a new record is created and stored in your database.

The key thing to know about data stores is that each individual record that gets stored will have a unique ID associated with it. That becomes really important because we need to know which record to target when we're trying to do something with it, whether it's just fetching that record to have a look at it, updating it, deleting it or whatever else.

In accronyn speak, this is what’s known as CRUD; A.K.A do you want to Create, Read, Update or Delete a record in your database. Watch the below video to dig into this a little more...

Additionally, it's important to know that each no-code tool will probably have some kind of limitations in terms of the number of records you can store. For example, Airtable which is a no-code database tool, has a limit of 50,000 records for any Base (this is the equivalent to one spreadsheet) you create.

Here’s one more example to hopefully bring it to life a little more

Let's say you want to build something like Airbnb. Users come to the site, they browse listings, create an account, set up their profile, book a destination, interact with the host etc...

Each of those steps involves information A.K.A data. Where do you think Airbnb stores the millions of listings on their site, the messages that go back and forth between guests and hosts, the accounts that people set up???

All this data has to be stored, managed and updated somewhere right?

That's where databases come into play. Any no-code app you build will need a database in some form (barring simple static websites).

Let me introduce you to the basics you need to know...

Firstly, building a database is like making a plan to sort your toys. It's essentially a structured system for storing, managing, and retrieving information.

So how should you organise your toys as if you were building a database?

📦 Use smaller boxes for different types of toys.

🔑 Tables or Collections are like smaller boxes for different types of toys. Each table contains records (rows) & fields (columns) to represent different types of data. Think cars, dolls, & legos.

🚗 Use stickers to show how your toy boxes are related.

🔑 Relational databases use keys (like stickers) to show how tables are related. Primary & foreign keys help link related data across tables for easy retrieval & updating.

🧩 Make sure each toy has a special place in the box.

🔑 Unique identifiers or primary keys ensure each record has a special place in the table (like toys in a box), preventing data duplication & confusion.

🎯 Test your toy organisation by playing and seeing if it's easy to find your toys.

🔑 Test & optimise your database (like toy organization) to ensure data is efficiently organised & accessible. Regular testing & refining help maintain its effectiveness.

See! Not so scary after all.

Logic 👩‍🍳

So following on from the UI and the Data core concepts, the third core concept is Logic. This is where all of the processing goes on and nearly all of the intelligence in your solution exists. It’s basically the brain of your app.

In the previous section we talked about how form data that’s been submitted needs to be processed and then stored. It's the logic layer of a no-code solution that does this processing.

At this point we tend to think about things in terms of triggers and actions. So think of it a little bit like "if this, then that" (there's even a no-code tool with that accroymn called IFTTT). So if a form is submitted, then grab the data and put it over there. That's the simplest version of a logical statement that we can do: if X then Y.

Logic also does a lot of other things as well though. For example, we can design different paths for our data to flow down depending on what data is present. Watch the below video to see what we mean...

So logic is really an encapsulation of all the possibilities that could happen within your solution.

Now, because we have the ability to apply logic to our data, we also have the ability to chain actions together. So, we don't have to just do an "if X then Y" decision, we could say "if X then Y and if Y equals Z, then do A, B and C”.

We could draw a very complex picture of what we might want to happen based on the data and what we want our solution to do. You can see this in action below (in Zapier's automation interface)...But it also doesn't just have to be user behaviour that triggers events. It can also be something that happens internally. Let's say that your system goes to charge a customer for their subscription fee and their card doesn't work. The trigger is the payment card failure which then might generate an email to go to the user in order to ask them to update their card details. Maybe the admin of the system also gets told that there's been an issue via an SMS message. So there can be lots of different ways to trigger certain pieces of logic and lots of actions that can come as a result of those.

So what we just touched on there was automation. How can we actually make things happen behind the scenes automatically? We want to make our lives easier and to make the user experience with your product better too.

One more example of logic to bring it to life more

Logic is like the glue that sticks the front end (what the user sees and interacts with) and the backend (the information flowing through your app).

Logic helps you create dynamic, responsive, and user-friendly apps by enabling your app to make decisions and react to different scenarios based on certain conditions being met.

Think of it as teaching your app to make choices 🤔.

🚦 If a user is logged in, show their profile. If not, show the login page.

🌡️ If the temperature is below 32°F, display a ❄️ icon. If it's above 90°F, display a ☀️ icon.

Let's break down the essentials of conditional logic 👇

Conditional logic is like a traffic light controlling the flow of your app 🚦

🟢 TRUE: When a condition is met, the app follows the designated action.

🔴 FALSE: When a condition isn't met, the app follows an alternative action or does nothing.

💡 Conditions are like questions guiding your app's behavior.

🔑 You can set up conditions in your app using expressions, such as "User is logged in" or "Temperature > 90°F". The app then evaluates these expressions and decides what to do based on whether the result is true or false.

🔗 Connect the dots with operators.

🔑 Use operators like "AND", "OR", and "NOT" to combine conditions and create more complex decision-making scenarios.

🎨 Add layers of personalization with dynamic content.

🔑 Conditional logic helps you create tailored user experiences by displaying content or triggering actions based on user inputs, preferences, or behavior.

🧪 Test, test, and test again for a smooth experience.

🔑 It's always a good idea to test whether your logic holds up to the different scenarios and conditions it faces. This is key to making sure your app behaves as expected!

The intersection of the 3 core concepts 💯

What we're ultimately aiming for here is the intersection of these three core concepts. We have an effective UI, which is displaying information to the user beautifully; it's also capturing data from the user well; and we have a logic layer which is taking that information, manipulating it and putting it where it needs to be.

Some tools are all in one, so you’re be able to do these three things all in the same tool versus in other cases, where you may need to combine different tools together, to have the same effect. There are pros and cons to each approach and it really depends on what's being built!

Ultimately, we're really looking for those three things to work in tandem. Without one of those working well, the whole thing can breakdown. That's why it's important to have a really clear and accurate intersection between the three!

💎 A new way of building.

Whilst the three high level concepts of how apps are built won’t change, the way we build is changing - for the better. Before we dive into what that actually means, let’s just retrace our steps on how we got here (because we have to admit, we’re still in the pinch me phase of “wait, you can build apps like this??”):

Just look…

The way we build software has been progressing towards faster, more powerful and intuitive ways for the past 200 years. This democratisation has lowered the barriers to building tech.

Here’s a brief history (and what each stage looked like):

1. Pre-coding

Before actual coding came into the picture, we used basic mechanical devices and foundational algorithms to process data. This was the era of punch cards and early mechanical computers where tasks were manual, and any "programming" was done by physically manipulating these machines.

2. Coding

The introduction of programming languages: From Fortran to Python, developers crafted digital experiences by meticulously writing lines of code. It's where modern computing truly began, allowing for vast digital landscapes and opening doors for tech giants to emerge.

3. No-code

Simplifying software creation: Platforms like Wix, Shopify and Bubble emerged, ensuring that you didn't need to be a coder to bring digital ideas to life. With a drag-and-drop interface, you can create without ever seeing or writing code.

Now that you're caught up with the journey so far, let us steer you towards the next chapter in software development that's unfolding before our eyes:

4. No-code x AI

We’ll dig into what this actually is below but here’s a quick headline teaser: this new way of building software without code blends the speed of conversational building (e.g. using plain English prompts), the precision of visual development (e.g drag and drop) and the customisability of auto-generated code.

That’s pretty wordy right? Let’s breakdown:

What it means?

How it’s different?

Why it’s better?

Visual

There’s a reason this new way of building combines both “No-Code x AI”. No-code is, as we already know, the visual layer of building.

It gives you pre-made, intuitive building blocks that can be mixed, combined, and snapped together to create new structures. While constrained to the blocks available, the possibilities for the designs of these structures are virtually limitless.

This is the drag, drop, point and click part of building where you can have granular control on how your app looks, feels and functions. So pretty important right 😅

Conversational

Then you have the “conversational” (a.k.a prompt based, natural language etc…) layer that sits alongside your visual canvas. This is where AI has added a new dimension to no-code building - before, it was just you. With no-code AND AI you have a co-pilot that can help you build.

Let’s just clarify something here. When we’re talking about AI, we’re talking about generative AI, which is essentially a type of AI that can create or generate new content, ideas, or solutions based on human input. This could be anything from writing a poem, composing music, designing an image, or even coming up with a strategy for a game.

In our case, we’re talking about how generative AI can help us build apps. Just like a co-builder, or to use a coding analogy, a “pair programmer”.

It could design a new page on your website, suggest improvements to your app layout, or even come up with entirely new functionalities based on what it learned from your previous designs (you’ll see more usecases below).

And there are different ways (formats) you can communicate with your co-pilot inside no-code tools…

Text

Voice

Image

Ok but what parts of the building process can the co-pilot help with?

Designing your database schema (e.g. database design and relationships)

Develop sections / blocks of your app (e.g. lists, elements)

Create custom themes for your app (e.g design, colouring etc…)

Write formulas to build new functionality into your app (scripts, calculations, logic etc…)

Make dummy data that you can use to test your app (test data etc..)

Get guided instructions for how to build specific functionality

Generate content for sections of your app (write headings, content blocks, paragraphs etc…)

Write code to develop custom functionality into your application

ℹ️ Remember, this all depends on the no-code tool you’re using - each no-code tool lets you leverage generative AI differently (some more comprehensively than others).

Code generating

Whilst this technically falls under “conversational” building, it warrants it’s own section because the implications are pretty big. The AI baked into some of these no-code tools can write custom code for you. Yep, that’s all.

Leverage AI outside the tool environment aswell

Although we’re talking about an integrated building experience - leveraging no-code and AI all in one tool - that doesn’t mean you can’t use the many AI tools outside of the specific no-code tool you’re using to help you build. You can think of this as the fourth layer to app development you can now lean on…Chat-GPT and other AI tools.

How can they help:

Step by step walkthroughs of how to do X in Y tool

Formula generation

Code generation

Dummy data generation for testing

Troubleshooting

In the case you generate code with an external tool, most no-code tools will have a “custom code block” that you can use to inject this code back into the app you’re building.

🔥 What this looks like in practice

This may sound great, but you may be wondering what does this actually look like from an end to end building process.

The answer?

It will look different for everyone, depending on how you build, what you’re building, which tools you’re using etc…

But from our experience this is what building the new way looks like at a high level…

Firstly, a lot hinges on what you’re building to determine what steps you take. For example, if it’s a simple landing page, you may only need to “conversationally” build. Or if you’re building a full blown Airbnb-esque marketplace, you’ll most likely cycle through all the steps 👇. Anyway, treat it as a high level approach!

1. Planning / thinking

This is normally the step before you start building, especially for more complex applications. The best way to frame this step is the “think” step. If you do the upfront work of actually thinking about:

What the look and feel of the app will be

What the user journey will be

What core features you will be building

How the 3 core concepts (that we covered above) will intersect

You’ll save a ton of time when it comes to actually building.

And then you can turn this thinking into more concrete planning, in the form of:

Low or high fidelity wireframes

Workflow maps

Database schema

At this stage, you can make use of a diagramming tool like Whimsical that can take your prompts and kickstart the visual you have in mind. Beyond “text to design”, you can also use a tool like Visily to go from “sketch to design” or “screenshot to design” See below as a taste 👇

2. Conversational prompting ♻️

♻️

Once you have prompted, you may need to visually develop the last 30% of that feature, workflow or screen your developing - that’s why once you have prompted you may want to go to step 3. You’ll be flicking between both of these steps as you build.

You’ll either be prompting from scratch or prompting as you build. We’ll dig into what we mean by those two modes below. Regardless of “when” you prompt in the build process, you’ll find that you use a combination of both.

1️⃣ Prompting from scratch

This is when your first “build step” is a prompt. You literally kick off building by writing a prompt that summarises what you want to build. This could be for an automation you had in mind or an app idea you have. As you’re prompting from scratch, it makes more sense to ask for broader results (over more granula aspects of a build that can only be customised / configured once the app has begun to take some shape). So you can almost think of prompting from scratch as a good way to develop the scaffolding of your app (that you then customise later on). That’s why asking your co-pilot to get started on big “chunks” of your app can be useful like:

Designing your database schema (e.g. “generate a database for clients, their past projects, reviews and profile images“)

Building a full page (e.g. “Profile page for a fitness app”, “Dashboard page for a banking app”, “Product details page for a shoe store app”)

Creating a template for your workflow (see the examples below in Zapier and Make)

2️⃣ Prompting to co-build (on top of what you have already built)

This is prompting your no-code tool to build on top of what you’ve already built. Great for when you want to…

Develop specific sections / blocks of your app (e.g. lists, elements)

Generate content for sections of your app (write headings, content blocks, paragraphs etc…)

Write formulas to build new functionality into your app (scripts, calculations, logic etc…)

3. Visual development ♻️

♻️

Once you have manipulated/visually development more of your app in a specific way, you may want to go back to step 2 and ask your co-pilot to help you build a new thing or on top of something you’ve already built for your app.

Once you’ve prompted your way to a new page, section, workflow or something else, you may want to then customise or tweak it on your own terms. Whether that’s the look, feel or functionality of some part of your app, that’s where this visual layer comes in handy. A paint brush lets you build more closely towards your “exact vision” than just words alone can.

4. Auto-code generation (if needed)

This will only be needed for advanced usecases or applications that you’re building, but it’s there if you need it. This could be useful for…

Writing complex formulas

Developing custom functionality into your application (that the no-code tool you’re using doesn’t support)

Creating custom interactions that go beyond the design capability of the tool(s) you’re using

5. Export your code (optional)

Now this step isn’t something you’re likely to need or be able to do in most no-code tools. But we put it here as a few no-code tools allow for this and may be an option you want to explore at somepoint.

We figure you may also be wondering, “but I thought there wasn’t any code involved”?

So code is still very much in the picture, despite no longer being inside the frame (that we see as no-coders). No-code tools and the applications they produce are still powered by tons of code - the ability to wield that power is just being made possible without having to see its underlying complexity.

See Flutterflow below…

⛺️ Let’s recap this new way of building: what is it?

Essentially, no-code is great. No-code X AI is really great - more powerful, flexible and fast. It’s like having a co-pilot by your side as you build that can help you set up your database, build sections or pages, design elements, write formulas, code and much more.

No-code development isn't just visual anymore. This new way of building software is conversational, visual and code generating all in one building experience.

1️⃣ Conversational

Prompt the no-code tool you’re using to help you build something.

2️⃣ Visual

Visually drag and drop to control the look, feel and funcationality of your app.

3️⃣ Code generating

Turn plain text prompts into complex code snippets effortlessly to customise your app even more.

To recap, the future of building software without writing any code blends the speed of conversational building (e.g. using plain English prompts), the precision of visual development and the customisability of auto-generated code.

Bottom line: Building software without *writing* any code has never been faster, easier or more powerful than it is today (and just remember, it's the worst it will ever be right now - the future is bright 👀).

🧰 A tour around the no-code x AI tool landscape

Whilst we’ve already covered the prominent no-code and AI tools in previous chapters, here is a list of the leading tools enabling anyone to leverage the power of no-code and AI together.

Firstly, most no-code tools have already taken the first step towards AI powered building by making it easy to generate content (in text or image) automatically in the blocks you are building.

For example, if you are building a hero section for your landing page, Softr is one tool that can auto generate copy and your hero image for you with AI (instead of having to manually create this yourself). See this in action…

This essentially can act as your content assistant as you build.

Separate to this, lots of no-code tools now let you build AI powered apps with seamless integrations with OpenAI. Whilst this unlocks a new usecase for what you can build with no-code tools, it doesn’t necessarily impact the build experience itself. You can see the different apps that have integrated AI with Glide…

Bubble is another tool that has made it easy for their community of builders to integrate AI into the apps they’re building. See Mack’s story here…

Bubble Showcase

Examples of apps built on Bubble. Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubble.io/showcase/byword

And even lower hanging fruit than this - some no-code tools have begun to turn their documentation handbooks into chatbots that users can interact with and ask questions to as they build (instead of sifting through massive docs!). Just like WeWeb are doing…

But none of these usecases fundamentally change how we build apps - or scratch the surface for the “new way of building” that we’ve introduced today.

So here are a collection of tools trailblazing the way on this front…

WeWeb

Flutterflow

Bardeen

Zapier

Power your automation with AI | Zapier

Combine the magic of AI with the power of Zapier to accelerate the work that matters most. Get access to AI beta features today.

https://zapier.com/ai

Framer

Glide

Glide • AI App Generator

Glide creates apps & websites based on Google Sheets, Excel, or Airtable. Pick a spreadsheet or Airtable base, customize your app, then share it with anyone. Start today for free!

https://www.glideapps.com/research/ai-generator

You can see they go beyond basic content generation and into more comprehensive use cases like we mentioned earlier…

Designing your database schema (e.g. database design and relationships)

Develop sections / blocks of your app (e.g. lists, elements)

Create custom themes for your app (e.g design, colouring etc…)

Write formulas to build new functionality into your app (scripts, calculations, logic etc…)

Make dummy data that you can use to test your app (test data etc..)

Write code to develop custom functionality into your application

🪄 Why we believe no-code and AI is the best way to build

With no-code, AI, code and different combinations of these, it’s safe to say there are a fair few ways one can build digital solutions. Each approach has it’s pros and cons and you may be wondering “why should I go all in on no-code and AI when I can build in these other ways?”

So lets break it down (and share why we believe no-code and AI is the best way to build software today).

1. AI

With an explosion of AI tools since Chat-GPT’s release, this approach allows you to go from idea to build with just prompting. You describe what you want in plain English and the tool will attempt to build it using AI.

These tools will get more powerful over time as they learn to develop better results based on the prompts given. But for now, they’re great for creating simple prototypes and basic landing pages versus powerful web apps.

Examples:

Tools: Literally Anything

Pros: Extremely quick, lowers the barrier to start, often intuitive.

Cons: Lack depths, flexibility to customise output, generic results

Learning Curve/Effort to Power/Flexibility Ratio: zero to low learning curve, with low flexibility.

2. No-Code

As we know, no-code tools provide a visual drag-and-drop interface to build functional software. This approach is great for building anything from simple websites to complex web apps, but can be limited depending on the power and flexibility of the tool(s) you’re using.

Examples:

Use Cases: Building web apps, mobile apps, automating workflows, creating databases.
Tools: Bubble, Adalo, Webflow, Zapier.

Pros: Makes software development accessible to non-programmers, fairly quick.

Cons: learning curve can be high for some tools, tool dependency, might not handle very complex tasks.

Learning Curve/Effort to Power/Flexibility Ratio: Low to moderate learning curve with moderate power/flexibility.

3. No-Code + AI

As we’ve seen, AI powered no-code tools uniquely blend the power of visual development with AI. This adds a new a new dimension of speed (with auto-generated building via prompts) and lowers the barrier to getting started (no longer the need to build from scratch) to the build process.

Examples:

Tools: Bardeen, Zapier, Flutterflow, WeWeb, Framer

Pros: Faster, more supported building, best of both worlds (customisation afforded by visual canvas + auto code generation with the speed of AI assisted building)

Cons: Still emerging, no-code tools are catching up to this vision, inconsistent results with AI

Learning Curve/Effort to Power/Flexibility Ratio: Low to moderate learning curve with high power and flexibility.

4. Code + AI

This approach to building combines traditional coding with AI for better recommendations, debugging, and automatic code generation.

Examples:

Use Cases: Building scalable software, AI-driven platforms, large-scale apps.
Tools: GitHub Copilot, Replit

Pros: Highly powerful, AI suggestions can speed up the coding process.

Cons: Requires strong coding skills, AI can sometimes make incorrect suggestions.

Learning Curve/Effort to Power/Flexibility Ratio: High learning curve but also high power/flexibility in what you can build.

5. Code

And ofcourse, we have the old school way which is essentially manual coding without AI assistance.

Examples:

Use Cases: Building any software from scratch.
Tools: Any traditional IDE or text editor like VS Code, PyCharm.

Pros: Total control over the software, flexibility.

Cons: Time-consuming, requires deep technical skills.

Learning Curve/Effort to Power/Flexibility Ratio: High learning curve with the highest power.

No approach is without it’s tradeoffs but we believe No-code X AI combines the best of code, no-code and AI into one building experience with the lowest tradeoffs (compared to the other approaches). So, your move!

👀 Our thoughts on where this new way of building will go

In case you’re not already excited by this new way of building, lets just paint a picture of where this may be all heading (because right now, we’re only just scratching the surface).

Simplified AI Integration: No-code platforms will make AI integration easier. Think of adding a chatbot or predictive analytics tool to your app with a simple 'drag, drop, and configure' interface.

More Powerful Natural Language Commands: Instead of fumbling with settings, users of no-code platforms will describe what they want. For instance, "I need a form that collects emails" will auto-generate a form element on a webpage.

Dynamic UI/UX Adaptation: Based on user interactions, AI can suggest tweaks to the design in real-time. For instance, if many users drop off at a specific form, the AI might suggest simplifying it or changing its placement.

Automated Workflows with AI Analytics: Platforms like Zapier will not only automate tasks but also recommend optimizations. For instance, if your newsletter has a high open rate on Wednesdays, your AI-enhanced no-code tool might suggest scheduling future mailings on that day.

Real-time Collaboration and Feedback: As you design a website or app on a no-code platform, AI will instantly give feedback based on best practices, much like how Grammarly works for text.

Interactive Prototyping: Imagine creating a prototype on Webflow. As you design, the AI analyzes user experience metrics and provides instant feedback, letting you test drive interactions without deploying.

Component Reusability Suggestions: Building a landing page and need a form? The AI scours your past projects and suggests components you can reuse, tailored to the current project's aesthetics and functionality.

Plug-and-play AI Modules: Want to add voice recognition or image analysis to your app? No-code platforms will offer modular AI components that can be added without diving into the nitty-gritty of machine learning models. We’re already seeing this with Magicflow.

Behavior-based Design Adjustments: AI will analyze user behavior on apps and sites built through no-code platforms. It'll then offer suggestions like "70% of users interact with this button. Consider making it more prominent."

Self-Optimizing Processes: Using tools like Zapier, AI will monitor the efficiency of your automated processes and suggest more optimal pathways. For example, if a certain API is slow or a task frequently fails, the system would recommend alternatives.

In essence, the future for no-coders is incredibly bright. With AI seamlessly woven into the no-code tools they're familiar with, there'll be an unprecedented democratization of tech, turning anyone with an idea into a powerful creator, without needing to understand the complexities of code or AI.

📖 Jargon you need to know

Most of these have already been covered in the previous chapters, but just to make sure you have a grip on the most important ones, here is a list you can clue up on as you start building with no-code and AI…

🔮 = AI related jargon

📚 Extra reading

Putting AI and automation to work for you: An open letter from Zapier

We started Zapier with a simple belief—we're just some humans who think computers should do more work. With the advent of AI, this conviction has only grown stronger.

https://zapier.com/blog/ai-open-letter/

weweb.io on Twitter

🤖 WeWeb Copilot is here! 🚀Our AI assistant has been in the works for weeks, and now it's officially live for everyone. Get ready to level up your productivity! 💪Check out some of its incredible capabilities below 👇— weweb.io (@weweb_io) July 12, 2023

https://twitter.com/weweb_io/status/1679143658816421888?s=20

Max Haining 💯 on Twitter

In case anyone needed a reminder, it's an incredibly exciting time to be a creator. Basically golden age vibes.Here's why 👇...Being the non-techie ideas guy was always a little paralysing.Forever dependent on someone else to build the *thing* for you.And it was never…— Max Haining 💯 (@HainingMax) June 9, 2023

https://twitter.com/HainingMax/status/1667309373121794049?s=20

Frontly on Twitter

Today, Frontly went live with our new AI-Generation feature to create internal business apps with a text prompt, editable with no-code and powered by Google Sheets.https://t.co/resP2LNRHo#nocode #generativeai #chatgpt #openai #ai— Frontly (@Frontlyapp) June 18, 2023

https://twitter.com/Frontlyapp/status/1670451704972849152?s=20

Sylvain MONTREUIL on LinkedIn: Why AI + NOCODE is a Game Changer?

Hey, there! 👋 Just wanted to share something that’s been on my mind recently. You know how tech startups usually require months (or even years) of hard work…

https://www.linkedin.com/posts/sylvainmontreuil_why-ai-nocode-is-a-game-changer-activity-7086759250223411200-0A6V?utm_source=share&utm_medium=member_desktop

Ratan chahar⚡ on Twitter

Automation is now as easy as texting a friend.This AI tool can easily create- Automation- Integrations- WorkflowsSimply by typing English.Here are three simple steps for using it.🧵 pic.twitter.com/USrGcA6XoY— Ratan chahar⚡ (@Ratanchahar_) July 28, 2023

https://twitter.com/Ratanchahar_/status/1684943442747756544?s=20

Engineer's New No-Code Programming Language Uses Visual Diagrams

Nicholaus Cranch is proposing a no-code solution that allows programming with visual diagrams. It could finally unlock the full potential of programming for multicore processors.

https://thenewstack.io/engineers-new-no-code-programming-language-uses-visual-diagrams/

www.linkedin.com

https://www.linkedin.com/posts/activity-7092511785257193472-0WMl?utm_source=share&utm_medium=member_android

Max H. on LinkedIn: The way we build apps is changing so fast that soon we'll reach the…

The way we build apps is changing so fast that soon we'll reach the "iPhone moment" of software creation. The iPhone democratised photography from something…

https://www.linkedin.com/posts/maxhaining_the-way-we-build-apps-is-changing-so-fast-activity-7096898280894136320-q14k?utm_source=share&utm_medium=member_desktop

Max H. on LinkedIn: This may be a bit wordy but no-code has changed, so I believe we need a…

This may be a bit wordy but no-code has changed, so I believe we need a new way of talking about it. Here's my TDLR of how AI changes no-code: The future of…

https://www.linkedin.com/posts/maxhaining_this-may-be-a-bit-wordy-but-no-code-has-changed-activity-7096875633447682048-s1IF?utm_source=share&utm_medium=member_desktop

No Code is New Programming

Developing perspective on no-code, the visual abstraction of software development.

https://jeremyqho.com/no-code-is-new-programming

Nocode Platforms Have NO Future

This is just a proof-of-concept or a DEMO of my vision how I see the future of software development. I have no doubt in my mind that ALL software will be created visually. Hopefully Bubble will be the one to lead us into that future. If not maybe one of us will build it! Anyhow if you're interested in such a future please share your email in a Google Form and let's connect to keep the conversation open: 👉 https://forms.gle/u7urAvEFNydWJVRq9 👉 Patreon: patreon.com/bestbubbledev Twitter: twitter.com/bestbubbledev LinkedIn: linkedin.com/in/giokakhiani/ Bubble: https://bubble.io?ref=ssxjwih4 OpenAI: https://openai.com/ ElevenLabs: https://beta.elevenlabs.io/

https://www.youtube.com/watch?v=09Pur0ixMa4

Malleable software in the age of LLMs

All computer users may soon have the ability to author small bits of code. What structural changes does this imply for the production and distribution of software?

https://www.geoffreylitt.com/2023/03/25/llm-end-user-programming.html?utm_source=bensbites&utm_medium=newsletter&utm_campaign=have-you-been-a-bard-boy

MagicFlow

Magicflow is a no-code drag-and-drop tool to build AI workflows that easily integrate into your app

https://www.magicflow.ai/

The easiest way to learn practical tech skills in 100 days.

Join other 40,231+ learners now!

Written by

Max Haining

Founder of 100School.com

Intro Guides

•Jul 26, 2024

Intro to AI

Use this free extended intro guide to help you get started with AI.

Intro Guides

•Jul 26, 2024

Intro to No-Code

Use this free extended intro guide to help you get started with No-Code.

Intro to No-Code x AI

👋 Introduction

🧱 Learn the foundations (so you can fly!)

UI 💻

Scrolling & swiping 📱

Clicking & tapping 🖱

Data entry 👨‍💻

Why data is the lifeblood of your no-code apps 🩸

Form data ℹ️

Data stores 👀

Logic 👩‍🍳

The intersection of the 3 core concepts 💯

💎 A new way of building.

1. Pre-coding

2. Coding

3. No-code

4. No-code x AI

Visual

Conversational

Code generating

Leverage AI outside the tool environment aswell

🔥 What this looks like in practice

1. Planning / thinking

2. Conversational prompting ♻️

3. Visual development ♻️

4. Auto-code generation (if needed)

5. Export your code (optional)

⛺️ Let’s recap this new way of building: what is it?

🧰 A tour around the no-code x AI tool landscape

WeWeb

Flutterflow

Bardeen

Zapier

Framer

Glide

🪄 Why we believe no-code and AI is the best way to build

1. AI

2. No-Code

3. No-Code + AI

4. Code + AI

5. Code

👀 Our thoughts on where this new way of building will go

📖 Jargon you need to know

📚 Extra reading

Join other 40,231+ learners now!

Related posts

Intro to AI

Intro to No-Code

How to start a subscription business with No-Code

How to build a CRM system from scratch with No-Code

How to create No-Code automation

Notion review: is this the organizational tool for you?

WordPress vs. Webflow: Which is better for your website?

Great Zapier alternatives for No-Code integration & automation

How to create a Slack bot without code

Your guide to the No-Code movement (+ how to get involved)

Webflow review: Is webflow the best No-Code website builder?

How to create explainer videos and visual documentation with No-Code

How to get started in No-Code

Top Five No Code App Builders

5 Of The Best Tools For No-Code Backend Development

Bubble Review: Is it the right website builder for you?

100DaysOfNoCode announces Triggre Education Partnership

How to Create Web Applications Without Code

Everything You Need to Know About Building a No-Code SaaS

How to build a landing page with AI

How to build a resource directory with No-Code

How to build a multilingual website using Weglot & Softr

How to create a talking head video using an AI Avatar

How to build a form with a Google Sheet automation

How to use Sudowrite for writing stories

How to create AI generated music

How to create a Google Sheets to Baserow automation

How to synthesize your voice with AI

How to automate a boring task with Zapier

How to create a video with AI using Runway

How to create an automated scraper with BrowseAI and Airtable

How to boost email productivity with Remail

How to create a News App using Toddle

How to do visual learning with Albus