Lovable Demo + Prompt Crafting

Introduction

Welcome to this talk.

Live demo overview: Using Lovable

We are going to see a live demo on how to use Lovable.

So I assume, as I have talked with some of you before, that many of you don't know what is Lovable.

Lovable is an application, an AI company.

I can't do two things at the same time.

What is Lovable?

No-code software creation with AI

Okay, so lovable basically is an AI application that lets you code software without knowing how to code.

I don't have any clue how to code, and we are going to build something live.

Choosing a demo idea

Okay, so I want someone to give us an idea of what we can build.

If not, I'm going to come up with something.

Anyone have an idea?

A soap business.

A soap business.

Yeah.

OK.

From audience suggestions to a concept

So I'm going to turn it to what we can do, and it's that the soup business is around making your personalized soup.

Let's make it around that.

OK.

So what many of you could do is go and soap.

Soap.

Soap.

Soap.

Soap to wash.

Soap to wash.

Soap to wash.

OK.

Clarifying: soap vs. soup

So we're going to do personalized soup.

Yeah, why not?

OK.

Defining the project

So the goal here is that many of you could enter here and, OK, we are going to say, build a web app that lets you personalize the soup.

Or soap.

Soap.

Okay, and we could give enter.

Okay, we could do this, and we are going to see the result, but I don't know how good it's going to be.

So we are going to enter in Cloud.

Selecting the AI model: Claude (Anthropic)

Cloud is the AI by Anthropic that I don't know how many of you have listened to it.

It's not really spread, but when we go to AI quality, it's one of the best.

It's the best for programming.

It's one of the best in ethicals.

the protocol from MCPs is built by Anthropic and is like the standard right now, even OpenAI has adopted.

And we could say it's founded by ex-OpenAI employees.

So I'm going to tell this model, we can choose between Opus or Sonnet.

I'm going to go with Sonnet.

And tell him to build a web app around, so personalized.

But I want him to ask me questions.

This could be really easy, but we are going to go a step back, a step more.

Prompting best practices

And it's, I'm going to search in Google, lovable prompt

best practices, okay.

So here we can see how exactly lovable is telling you to prompt the AI.

Basically prompting is what you tell the AI to do.

So I'm going to copy these two links and I'm going to give it to lovable.

I don't know how many of you know how to properly prompt, but basically is give as much context as you can

being useful and in the way AI understand exactly what you want.

Setting up the build in Lovable

So, here we have the AI building.

We want to build a web app so you can personalize the soap.

So, I want first of all you go into the links I provide you of Lovable because it's the tool we are going to use for

crafting this solution.

I no longer usually when I do longer text type, I just say AI to transcribe.

I want you to came up with the best prompt possible for building this app.

And we are going to tell him to ask questions.

1I want you to ask me as many questions as you need so you can understand what I want to build.

And here we don't have lovable property grid.

Okay.

Enabling thinking mode and research

So now what we are going to see is the AI going to think because I have activated, I don't know if you're seeing it properly.

I have activated this, that is for thinking more time.

It's basically as chatGPT has the thinking mode, it's exactly the same.

And we can see that it goes to the different links I have provided and start researching about lovable features.

Language settings for the session

Now we got, oh, I'm going to specify to reply in English, because this is a meetup in English.

And probably in the custom instructions, I have talk to me in Spanish.

Answer to me in English.

What?

I think I don't have them.

I use it on an app called Super Whisper and I think I don't have the mode in English, but it takes it quite well.

Q&A interlude

Okay, so in the meantime, I want to ask, give the time, I'm going to combine the questions and the demo because we are thinking mode.

So any questions so far?

Only one.

No?

Okay.

Reviewing the AI’s question list

So what we are seeing here, we can see all the thinking and it goes exactly to what the prompt should be.

Okay.

We have here a list of questions that I'm going to go really

because I don't want to build this app.

But the point I want you to get is that if you know to build an app, you take the AI, you are a senior programmer, ask me what you need to do.

But in this case, it's fictional, so it doesn't matter.

Answering product and business questions

What aspect of the shop can customer customize?

All of them.

The customer can select all the aspects they want.

Give five predetermined options and also a free-form input.

Also add ads on like soups,

Around the user flow, how should we work it?

I want directly the web app.

I don't want the commercial landing page.

About the business model features, every personalizement costs 300 euros, and I don't need for the moment users.

as well as Stripe integration.

I'm doing this because if not, we will be here until tomorrow.

No need of inventory tracking.

I want to have really disruption branding and came up with the name, the logo, and also with the colors of the brand.

The target audience is going to be

Men between 30 and 40?

From Madrid.

Okay, must have, nice to have.

What is the minimum by all product?

For the moment, I just want the part of personalizing the soup.

Soap.

Soap.

No, you did it again.

Human.

Soap.

Soap.

Soap.

Human part.

I should be a robot.

Okay.

So now...

What we want the AI, that maybe I have missed, and it's going to tell me, okay, you missed this, and I'm going to ask you more question, is give me directly the prompt.

From questions to a final prompt

What I want you to come with is lovable, you can create database, you can connect with LLMs directly, so you can basically do whatever you want.

It's 100%,

I think it's public knowledge that you are not going to come up with a solution in the first moment.

You are going to iterate until I don't like this in that way, change this part, add this, and so on.

Okay, so now is with more questions, but I just want the prompt for now.

I don't know how I'm going in time.

Tell it to make it up.

Just tell it to, decide yourself the answer for it.

Decide yourself of every these questions and give me the final prompt for give it to lovable.

If any of you have, I gave you the chance of coming here with an actual business idea or such you need and create it in life, but no problem.

On chain-of-thought and thinking modes

We are seeing here how the chain of thought is working.

What the, like, well, years ago, one year ago, year and a half ago, what we was doing is forcing the AI to do the step-by-step thinking.

Now is the thinking mode what it does.

In fact, I remember, Diego, like one year ago, that we had a discussion when the OpenAI released the thinking mode at the beginning.

And it's like, OK, should I do the step-by-step thinking?

No.

Now we don't have this problem.

Yeah, 01 in that moment.

Generating and applying the prompt

Okay, so we have here the prompt.

I don't think that any of you without programming knowledge could came up with this so detailed prompt.

I'm going to copy it.

We have here the SOAP solution.

Remember, create me a SOAP app.

I want the square and I want the text of Javier.

Add to cart.

We have a personalized.

Iterating with a more detailed prompt

Now, we are going to go again here.

and ask with a bit more detailed prompt that is going to take a bit more time.

In the meantime, I could show you, if you want, a use case that I have loved.

Yeah, I'm going to show you.

Real-world use case: AI adoption at Zapping

Basically, in Zapping, we help companies in the AI adoption strategy.

Not only build them, but put them to work and see results.

So we have a company, we have, when we give the proposal, we tell them, they usually tell them, that's expensive.

And I tell, yeah, but the return on investment you are going to have is huge.

So basically this thing you can see here that I'm not going to go into what it's saying, but you can see it's quite good.

It's working really good.

And it has increased our conversion rate a lot.

I'm telling you a lot.

It's basically built only with a prompt like that.

And I have no clue about programming.

In this case, I didn't need to go through a technical to improve the solution.

And I have a friend.

I'm going to allow this.

It's going to connect cloud.

I have a friend that is working in Accenture, in the technical part, and I told him, OK, this, if you were asked how much it costs to build the development, and he told me around 10,000 euros.

I spend two evenings.

So for me, this is the power of AI.

And also, go ahead.

Do you need a more advanced version?

Yeah, I have here a paid version.

It's the most simple one.

It's the 20 euros.

I think it's 20, yeah.

Watching Lovable build the app

so what you can see here is basically the thinking model of an ai tool that has been thinking 20 seconds worked for 24 and now is connecting to another platform so you could all this from scratch but you will need more

Automatic database creation

Now it's creating the database.

That this is something quite new from lovable.

Like two months ago, you had to connect to Supabase and create your own database without AI.

Now it's created live.

Progress and next steps

So, so far we can see that this solution haven't even gone through connecting to cloud or to any database.

Any other questions while it keep thinking?

Deployment and portability

How did you deploy it?

Pardon?

How do you deploy this?

In this case, I don't deploy it myself.

Options: GitHub, own platform, or hire help

So you have two options.

First of all, you have options where, I don't know if it was here, but you can connect it to GitHub or take it to your own platform.

Also, you could hire someone for doing it.

In this case, I'm just taking it in lovable and connect it with a domain.

So you can take all the code?

Yeah.

And for example...

100%.

Exactly.

You don't have to be tied to Lovable.

Vendor lock-in and alternatives

So in this case, the database and the connection to cloud is through Lovable.

So that's why they did it, because now you're more retained to them.

But probably you have here also of Cursor.

Hands up if you have heard Cursor.

Of Cursor.

Yeah, sorry.

And also Replit.

Yeah.

GitHub Copilot.

Yeah.

Okay, so all these tools are powered or cloud decode or codecs from OpenAI.

These tools help you program, basically.

So I know many people that go to Replit, generate an app, later get into Coursor and start deploying and improving exactly to what they want.

This is like, for example, Coursor is like the more less technical AI tool in that part, but you can also download it.

It's not creating the files that 13 made anything.

It was 15 minutes, right?

Open Q&A

Okay, so we have five minutes more for questions.

In the meantime, we see the result.

Okay, thank you for the presentation.

Performance: AI-built vs human-built apps

Okay, do you have any information about the performance, about the precision between the one created, the one app created by Logogle and the one created by a person?

Are they in performance, in how long it takes to one against the other?

There are studies that measure exactly about that.

I don't know the numbers by mind.

But what I can tell you is, first of all, the AI is working 24-7 without a stop.

And the human... No, but I mean when the human develops an app, it is working 24-7.

Yeah, so repeat me your question again, please.

No, I mean, you have the solution created by the person.

Okay.

Programmed by the person.

Yeah.

And then you have the solution created by Logovore or any other AI agent.

Do you know how different is the performance?

One is created, same solution by machine versus human.

No, no.

The one, the app developed by a human against the app developed by

Okay, so the improvement is not... So if you take the first result of the AI, it's going to perform better if the human knows how to code, obviously.

But once the... I know people that are spending more than 2,000 euros or dollars per month on AI programming.

So if you just take this, probably one built by a human is going to work better.

But if you have...

the agent thinking seven hours that I know people that go to sleep and later next day to come to office and is still thinking is going to work better the AI.

Maybe one year ago it won't, but right now it's working.

Long-running AI workflows

In which scenario is the AI thinking for seven hours?

In which type of AI or what?

Like you just said, the example, is it lovable?

Is it in another...

I think they were using cursor.

In this specific case, I mean.

So I'm using $20 license while they are using pay as you go.

So they can tell, OK, I want you to think this time.

And what you can start seeing is that the AI is starting improving itself.

So it's not you that go, OK, this is not build good.

Change it.

What you get is an AI that do this feedback to the own AI.

Live result: Configuring a custom soap order

Okay, so now we have here the solution Javier wanted.

Please, let us know what you want.

Oh, it's fantastic, I love it.

Yeah, yeah, but what do you want?

What scent do you want?

Black pepper?

I want to sell soap.

Choose a scent.

He wants to choose what do you want.

Okay, you know what?

Or describe your custom.

Okay, let's say activated charcoal.

Okay, and what I don't know if you remember, but when I was building the prompt with Claude, I told, and make options also give a part for typing exactly what you want.

So now probably it's connecting to Gemini in this case for using AI understand what the user want.

Okay, color.

Oh, industrial silver.

That's fantastic.

Perfect.

Shape?

Let's say, minimalist circle.

Size?

Of course, luxury for sure.

Formula type?

Oh, let's say, detoxifying clay.

That's super funny.

Texture?

Oh, really soft.

Soft and silky.

Don't understand the laugh.

Me neither.

Okay, engraving and label.

What do you want in the label?

Oh... GBO, Javier?

Yeah, just for GBOers.

Okay, do you want more than one bar?

How much are you willing to pay?

Let's say three bars, come on.

Oh, only three bars?

Do you want a premium gift box or a handcrafted sub-disc?

Handcrafted, always.

Perfect.

We're in AI now, so it needs to be some balance, right?

Perfect.

Checkout flow and optional integrations

So now you could now here put your contact details, and I told him not to integrate Stripe, but later you could put your card details and pay.

Chipsaw.

Okay, any questions?

Conclusion and next steps

If you remember when I was building the prompt I told not to integrate with Stripe or other tools because it would come up with something really long to build.

If you want we can see how long it takes.

No, this is not my phone.

I invented it by the go.

But good as well.

I was almost going to type it.

Okay, your specifications, submit order.

Okay, now you would have the delivery if this would connect it with shipping and so on.

Finished reading?