Introduction

Okay, hi everyone. My name is Savvas. I am co-founder and engineer for Gracely.

Project Overview and Setup Choices

Today we will build a landing page and we will deploy it on internet with Vercel, Next.js. We have several options. I need your help.

Do you prefer code or cursor? Cursor. Cursor it is. Okay, perfect. So we'll use cursor today.

Defining the Startup Idea

The startup idea is amazing. It's a landing page for medical, made AI flow.

Target Users and Problem Statement

The goal of the startup that we will build in the next series of AI meetup will be... Yeah, we will analyze data from from people and we will assist them to diagnose what they have.

It will be oriented for small hospitals and we will build it with Kertsor.

Establishing Coding Principles and LLM Rules

Before we begin I would like to... I don't know programming let's say and I want to know the principles of clean coding so I just search writing code principles and I can see several good practices here and I don't want to think I will copy it and the most important thing is to say to the cursor to have good principles and create rules so the first thing we will do we will create some rules

Hey there, I want to create some rules for Cursor. I want you to be context aware and I don't want to eat a lot of context, so create the rules and let's start then.

Okay, perfect. We'll wait a couple of minutes. It will make a plan.

Model Selection Preferences

We prefer to use Cloud 4.0. I think it's the best LLM right now for coding.

So let's see the rules. Core principles, naming, okay. It's small, I like it.

Bootstrapping the Next.js Project

Okay, right now I have created an empty file with the content of the landing page.

and as I said we will use Next.js and TypeScript we will start with basic rules and as we proceed with building the app we can add more rules about commit about code about reviews about testing and everything so right now I will clean the

Let's create a chat for now.

Creating the App and Running Locally

I want to create a landing page with Next.js and TypeScript. I want you to start the Next.js and I want you to see that it's running.

I will try to make it as simple as possible. I will try not to write a line of code at the end.

I hope we will see a website soon. If you have any questions, you can ask right now as we wait for the... Okay, perfect.

Tech Stack Confirmation

I like it. Tailwind, Mediaflow, Next.js, perfect.

Okay. It will run. Okay.

TypeScript. Yeah. Okay.

Run everything. Please.

No. Okay.

It's running. I think I use a cloud code, so I have some time to figure out the things. But it's the same thing.

Cursor Settings and Context Tips

If you have the rules, the other significant thing, it's on this cursor settings. If you want to be more specific, you can go here, indexes, and add any doc that you want. That's the tip.

We will not use this right now. So let's go back to the LLM and see what it's doing.

Okay. Okay. I think, no, nothing.

It created the work the media flow. Okay. Okay.

Okay. Let's see.

It created the app inside another folder.

We will leave it as it is for now. Okay, let's see.

First Run and Baseline App

Right now it's running. We can see it, I think. It's a startup page of NetJS.

So it's like five minutes.

From Zero to Landing Page

I have an idea.

I want to start up right now. I don't know anything about code. I run three commands and I am almost there.

So, okay, perfect. Let's let it finish.

Clearing Context and Planning the Page

very nice okay right now it's very good to start a new chat every time to have a clear context of what you want to do so if what you are doing is very different just create a new chat and continue so right now i have a landing page content here file okay i can use this one okay so i want you to create a plan for a landing page

SEO and Accessibility Requirements

I want it to be SEO-oriented and I want it to have good practices for accessibility.

Okay, perfect.

Using Plan Mode and Iterating

Right now, I think there is plan mode here. It's very nice to use the tools that are there, so let's go for planning. We'll give it a second think. It will create a good enough plan because we don't have a lot of rules right now.

Yes, do you want to do? Okay, some questions here. I like it.

Okay. If you have any questions at any time, you can ask. Okay. Perfect.

It's creating a plan right now. Let's... Okay. Layout.

If you are a programmer, you can understand some things. That's the plan. So, I like the plan.

Okay. Perfect. Okay. Okay.

Key Plan Elements: A11y, Navigation, Components

Area labels. Navigation. Components.

I like it. Do you like it? Do you want to make adjustments?

Theme and Color Palette

Theme. Theme? I have a color palette here. Sorry, I didn't mention it. So, it's there.

Okay. Awesome.

Theme?

Execution: Generating Screens and CI/CD

Okay, let's build it. Perfect.

Now, it will create some screens and if we are lucky, we can commit the changes and I have already set the Next.js environment to take from the GitHub the latest commit and deploy the app on the internet.

So let's give it a minute.

If you have any questions, you can start asking. No?

Q&A: Process, Rules, and Reliability

How often do you change something in the plan?

Managing Complexity and Context

It depends how complex the app is, how big the context is, because if you have a very big code base, 1you have to create rules in order to make the LLM navigate to the code base without eating too much context. So you have to create a library for the LLM to access the specific code to save context, to pay as little money as possible, and to be faster.

Confidence-Gated Changes

Also, there are several rules that you can apply. You can use the confident method, let's say. You can say to the LLM, okay, I don't want you to make any changes. If you are not 95% sure, that's correct.

And what is this doing? Then a lamb is fighting itself. It's like, okay, I am not very sure. I will think it again.

And even at the end that he's sure, you can push it more and say, okay, I want you to be 100% sure. So at the end, you can have a pretty good result, even without mistakes.

If you have rules about functions, how you route things, it's amazing what it can do the trick is to pay attention not what is it what it's doing right now it's a very simple example so i don't mind okay i can see it creates component for each section that I gave him.

I don't know if we can see something here. It's made a flow. If you see the title, it's in progress.

Okay. We'll have to wait a little bit. If you have any questions, we can answer it.

Applying LLMs to Existing Codebases

Can you use this on an existing website that you have? on a production you mean okay existing of course the LLMs can search your code base and optimize find bugs errors do optimizations change the theme it depends it's about the prompts even make unit tests okay

Okay, we said C-oriented.

I can see here robots TXT, if you know.

Agent Looping and Control

How good does it handle loops, like coding looping, correcting looping, going back and forth? Right now, if you add the rule about the confidence, it's going like, okay, I will search more. I will search more.

look it's it's not perfect it needs attention it's like a baby that he's hyperactive and he's losing control and he's going somewhere else. So you have to be there to stop it, to close the context that it works and you can have amazing results.

Top Protective Rules

What are your top three rules you almost always give it to protect yourself from that?

The confidentiality is the first one. I have some rules about, we have on our project, like a library to access specific code only. And the next thing is that I said to him that if you don't know something, don't assume anything, just ask.

Building the UI and Debugging Issues

It finished. Perfect. I like it.

So we can copy this one. We can paste it. Okay.

Troubleshooting and Minimizing Copy-Paste

an easy solution can you find a similar problem in the codebase let's see if it is done one time we can find it in many places I think so let's check if is on another page or okay let's think okay okay so to avoid the copy pasting since since it's running on the background i think let's wait to fix the issues okay nice let's see how many problems you will find the goal is to in five minutes to finish let's see okay okay something is happening okay so

We can print screen, I think, full page. Okay. We will copy the page. Okay.

Fixing Broken UI and Simplifying

So, what is happening? The UI is broken. Can we fix it? We want a minimal and very attractive UI for the users.

okay let's give it some time it's almost ready so you can see that it created everything features wires buttons we didn't give a very good plan about the design so it did have whatever it wanted okay but I hope that it will fix the issues. Okay.

We can even give him a site that we like and tell him, okay, I want you to mimic the theme, the layout, everything. So that's if I didn't know anything, now I can do almost anything.

okay it wants some time images in every place okay okay then we will commit the changes actually cursor will commit the changes and then we will see it online okay it's doing some things

Components, Icons, and Styling Choices

I like the headers, sections, sizes, everything looks normal. Since we didn't tell the LLM to use some library with icons, it's creating its own SVGs, it's ok. You can make a plan later to use the library.

so first we plan then we execute then we debug almost and we will see the result i hope so let's see okay keep all nothing okay i don't see i don't see any change did you change the landing page Let's see.

Build, Commit, and Deploy Steps

You can see NPM. Package. Send it.

Okay. We can multitask. I want to check if it's running on the background.

It don't say anything. Okay. Okay.

A little bit better. No. Okay.

For now, I want you to delete every image.

I want to go online fast. Let's go.

I want you to commit every change and I want you to make sure that it can build the project.

Whatever you say, even if it's not correct. it will understand it.

So I don't mind. I will just send it.

Okay.

Suspected Tailwind Configuration Issues

I think we have the same issue in Next.js and it might be that tailwind is not correct. It's a problem for another day. So I will not spend time on this.

We will continue. We will commit the changes. We will see the not very good UI that we built.

Okay. Perfect. We'll break everything.

Building. Okay. I like it. Okay.

Let's see. It will build. Do you want to make a guess?

yes let's see if we see it online i don't know okay the same command to see okay okay we will push the changes let's go here okay

Restructuring Folders and Fixing Paths

something is happening error okay i think it's the structure here we can take everything from here okay i could roll here you know it's a demo every time okay let's move it on the parent folder okay replace perfect I want you to check the folder structure I want to have everything on the parent folder and remove the mediaflow files

I didn't focus, so I didn't write what I said. So I want you to fix the folder structure. I want everything from MedAI flow to be on the parent folder. Okay, so there is an issue with the folder.

Let's see. Ah, we failed. It doesn't matter. Let's see.

Okay, the server is closed. Okay, hello. I hope it fixes it.

Accessibility Considerations

Can accessibility be compliant in the initial prompt? These results that you see, can it be accessibility that is large, that is... I don't know. I don't know.

My whole guess is tailwind. Because we also had the same problem. Just so we know that no, there has to be a tailwind issue.

So we took it into our own hands.

Okay, the next question.

Agent Selection: Claude vs GPT

I can say that Claude is better. Claude, I think it's better, the Claude code. You have to try it.

Okay. Can I say something? Yes.

When we were also vibe coding in the hackathon, when we faced issues like that where the agent was unable to fix it, I think it really helps if we switch the agent to, let's say, GPT-5, for example. And that, a lot of times, I think actually fix the agent.

You change the agent? Because when you type a prompt, you can choose the agent. Yeah?

And we tried GPT-5. OK. or vice versa if something goes wrong.

Look, we found that Kertscher is very good at changing small things in general. So if it's very focused, it's doing amazing. If it's the whole code base, it's getting a little bit tricky.

Deployment Outcome

Something happened.

Ooh, perfect. Almost the perfect site.

Site Is Live

So right now it's online.

It's not perfect, but we can make it perfect tomorrow.

It doesn't matter.

Wrap-Up and Takeaways

So we built an app without knowing anything, let's say.

Rules for Better Code

We used some rules, which are very important to write good code.

From Idea to Deployment

And then we deploy it. So you can start building your apps, even if they are not so beautiful.

Final Questions

If you have any questions, I'm sorry. Yeah. If you have any questions, I can answer.