Introduction

Well, so I'm going to start with my live demo.

I don't want to share this. This is a spoiler.

Setting the Stage: Tools and Goals

So first of all, how many of you have interacted or directly worked with Lovable? OK.

And how many of you have built a workflow with a tool such as a Make or N810? Okay, so this is gonna be pretty new for most of you, so I'm gonna take it slow, okay?

What is Lovable and how it helps

So, first of all, the first tool that we are gonna use today is this one, Lovable. Lovable is a tool that helps you create a frontend, the thing that we see on application, by using natural language, by prompting to it. Here we have this chat in which you type the thing you want, and it gets built.

I have created GPT. There's this little assistance inside of the GPT to help me create my level instructions.

Demo concept: Weather-aware trip planner

The thing that I have on mind for today, I was thinking when I was preparing this presentation, okay, what could I show?

I came across an idea that is a trip planner, an application that helps you plan a trip to a city and also gives you updated data on each weather. So you get to plan a trip to Madrid, but also you get updated weather for the next days so you can know, based on the weather, which is the best plan to do. I thought it was a good idea.

Drafting the high-level prompt

So first of all, I'm going to set it to my GPT. I want to create an app that helps a user plan a trip to a city while it retrieves update data of the city's weather. So the plan adapts automatically based on the weather of the city. Something like that.

We give the prompt to this GPT and this GPT helps us create the best instruction for the other app.

Chaining AI tools effectively

This is kind of idea with the AI tools, is to combine multiple tools in the same workflow.

Designing robust prompts: context, tasks, and constraints

So here you see, we have the context, we have the task, we have some guidance for our application.

And then we'll have the fourth part of the prompt, which is the constraints. It's really important to give a context, a task, and not also give guidelines, but also constraints. And by that, I mean what can do and what cannot do. That's really important.

So now we copy-paste this prompt. We aren't going to be really precise here. I'm going to copy-paste.

Obviously, on a production context, you will be more careful about what are you doing. But now we want to be fast.

Building the Automation with n8n

And you will see that once we give this prompt, the app is going to start creating our frontend, our visual part. And while this is being done, because it's going to be done in the background, we are going to move to an item.

Triggers and webhooks basics

NA10 is one of these applications that lets you automate things, right? You have heard this term, the automation. It's everywhere.

Each NA10 workflow starts with a trigger.

We are going to use webhooks. How many of you know what a webhook is? A webhook is a way to communicate really easily between different parts or applications. It's not the technical explanation, but you can see it as a way to send and receive information through applications.

Sorry? Well, yeah, we're going to use the APIs, yes. But yeah, in this case, we're going to use a post method and, yeah, simple, simple.

Configuring the webhook endpoint

Yes. So we're going to establish this.

We're going to take this URL. And by using this URL, this is the URL, the address that we are going to use to send information. This is the address to send the information.

As you have come here to this event with an address,

This is the address that we are gonna give our application to send whatever the user chats to this workflow.

We aren't gonna use any authentication. This is not secure, I know, but we are just testing.

Adding the AI agent module

Okay, so now we have the first part of our automation.

Now we are gonna add the agent. The term agent nowadays is used in many confusing ways.

We're going to call this agent, assistant, you give it. But it's confusing because this is, for me, this is an assistant more than an agent. But whatever.

The interesting thing about the NI10 agents is this, is that

Model, memory, and tools in one place

It lets you select the AI model, give it a memory, and connect it to tools. everything in the same module, which is like really, really, really efficient, really useful because before you had to use different modules and you have to put different things together, it was more confused, difficult. Now this helps a lot.

Choosing the model and weather API

So as our AI model, we are going to choose OpenAI and we are going to use GPT-41 mini or like just for purposes, it doesn't matter. Let's go. Now we have our model connected to our agent.

And as a tool, we are going to give it the open weather tool to retrieve the weather information from this provider. Open weather. Why open weather?

Because it's one of the biggest weather information providers in the world. So I chose them.

I have created my API account. This is done beforehand.

Dynamic inputs and API settings

And I'm going to say that the city name It's automatically defined by the AI. This means that the AI, based on what the user has typed in, this is going to be automatically selected. So I don't have to be manually selecting the city and so on.

And then as the language, I'm going to say English. We are going to use the metric format, because we want the Celsius, not Kelvin, and so on.

And I'm going to give the user a five-day forecast. That's what this API lets us. If we pay more, they give us more days. So we just have five days. But for these purposes, it's the thing that we are going to use.

And here we have our first and unique tool for our AI agent, which is this open water map.

Returning data to the caller

Now what we need to do is to respond to the webhook. So whatever is the end result of this module is automatically being responded to this initial webhook and the information it's been sent back from where it came. This webhook where we need to set respond using respond to webhook node.

Great, and now we have our automation set up.

Connecting the Frontend to the Workflow

While I was talking, our assistant has created this weather trip to plan your preferred trip with real-time weather insights, get smart itineraries, love doing changing conditions. Now, using Global, it's really easy.

Great.

How can we connect this application to this N18 workflow?

As I said, we need an address. In this case, we need this production address.

Sending user input from Lovable via webhook

We copy it, and we say to lovable, you will, well, we can just, you will send the info that the user writes down into the search for a city button to the following URL by using a webhook.

Voice-to-text helper: Super Whisper

By the way, this tool that I have just, it's called Super Whisper. It lets you do a speech to text whenever you want into your Mac. So it's really, really interesting.

Editing the component and attaching the URL

Now I have to copy and paste my URL. I click edit, and now I select this input. So lovable know that the thing that I want to edit is this input.

And now I give the prompt. As you see, it's really, really, really simple. We don't need to use much code.

Now it's saying me that the messages cancel.

Live demo hiccup and workaround

Let me try this. Wait. It's not working.

Great. Things happen when we are live. Let's try.

If not, we will do a demo. Okay, it's been canceled. Great, so let's improvise.

So, let's simulate that. When a user types anything here, for instance, I want to plan a trip to Barcelona.

It's gonna be a three-day trip. I want to visit the most famous buildings in the city.

Okay, let's use this information just for instance. Great. And now let's do a simulation of this workflow.

Using Postman to simulate requests

How are we gonna do it? No problem. I have alternatives.

So this application, it's called Postman. It's used by developers to test this kind of things. So I have it on my tools already.

So what I need to do is I need to send my prompt like this. I want to plan as if I were the user.

And now I'm going to use this webhook URL. as the address. So I'm gonna be sending to this address this information, right?

And if the workflow is being set up correctly, I'm gonna have a response.

Debugging and Finishing the Flow

It's not gonna work, obviously, because we need a few things more to change. The first thing, this is kind of the first structure of the workflow. Okay, but to finish it up, we need some adjustments.

The first thing, when you go to executions, this is really important.

Give me a moment. Okay, let's do this.

Activate the workflow

You need to activate the workflow. till the workflow is not activated, it won't work. That's simple.

So first you activate the workflow and now your production URL will start to work.

Inspecting executions and errors

Now when we send the send message, we don't have an error, but we don't receive any information. So we need to do more adjustments.

Here, whenever NA10 receives an execution, it's going to be shown here. And this is really, really useful. This is something that we will be visiting constantly.

So as you see, we have had an error. No problem, no prompt in the AI agent node. So we know that the problem is not in this webhook, but in the AI agent node.

Okay, so let's move to that node. So here... we see that this prompt, you know, the user message is in red.

So something is happening here that it's not going well. Let's see what is happening.

And, spoiler, what's happening is that we aren't given to the agent the information that it needs.

Magic button: Debug in editor

Really something, a really good, good tip to use NA10 is this button. This button is magic.

What it does is that it lets you use an execution as, let's see it. You click here, debug in editor. So now we have pinned that execution to our editor.

So when we go to the AI agent module, we have all this information here that we have send it, but without sending it, because it was a past execution. So we don't need to constantly execute, execute, execute, execute, but we can rely on past executions.

Binding inputs and crafting the system prompt

Now we have to change this to define below. And as you can see, here we have, hello, this is the prompt that we want. So we want to if this thing, that is the prompt that the user has sent, as the prompt itself.

Great. Now this is being correctly done.

But another thing that is missing is the prompt for this agent, right? When we work with AI, we need a prompt. So we need to add a system message. And we can say something like this.

You are an expert in planning trips to any city of the world. You will receive the information about how the user wants a specific trip and you will answer to it based on your general knowledge and the tool that you will use always to check the weather of the city. You will always answer the user based on favorable weather conditions.

So now we are telling the agent in natural language what its purpose, right? And you will answer, you will always, you put it, yeah, check the weather of the city, always answer the user, great.

Validating the end-to-end response

So now if we try again and we send it, now it's taking longer. That's a good sign. Great, and now we have our answer.

The weather in Barcelona for your three-day trip is generally favorable for... It's giving us the temperatures expected in Barcelona for the next five days.

So we have an answer. This ideally should be shown here, but okay, it hasn't worked.

Wrapping Up

No problem. But you see the flow, right?

Recap of the architecture

You build something on another point. You send it to your flow using webhooks. Then you give it to your AI agent and you give it properly, of course.

Then that AI agent will use an AI model and any given tool And by any given tool, I say this, I mean your Airtable, Asana, Microsoft, Google, huge tools, and we'll answer based on them.

Final workflow and next steps

So possibilities are infinite.

Here you see the completed workflow. And that's it.

That's how you build a workflow from scratch. That's how you also manage errors. And these are the most basic things of workflow.

Another thing that you also need to add is an error handler. You know, like a thing to make errors being handled, but that's for another talk.

So yeah, that's it. Thank you.