GPT Pilot ✈️ Build Full Stack Apps with a SINGLE PROMPT (Made for Devs)

Summary

This video script showcases the remarkable capabilities of GPT Pilot, an AI coding assistant that enables engineers to create sophisticated full-stack applications through seamless collaboration with AI. The video demonstrates the step-by-step process of building a complete authentication system, including user registration, login, password reset, and session management, using Node.js, Express, and MongoDB. It highlights the interactive dialogue between the engineer and AI, with the AI providing guidance, generating code, and assisting with debugging and testing. The result is a fully functional application, built in a fraction of the time it would have taken without AI assistance.

Takeaways

• 🤖 GPT Pilot is an AI-powered tool that allows engineers to create sophisticated full-stack applications by collaborating with AI.
• 🔌 GPT Pilot has a VSCode plugin that provides a seamless integration for engineers to work with the AI.
• 🏗️ GPT Pilot guides the user through the entire process of building a full-stack application, from planning to implementation and debugging.
• 👨‍💻 The AI and the engineer work together in an iterative process, with the AI writing code, asking clarifying questions, and the engineer providing input and verifying the results.
• 🛠️ GPT Pilot handles tasks like initializing projects, installing dependencies, writing code, and handling errors and debugging.
• 🔒 The demo application involved building a Node.js app with user registration, login, and session management using JWT tokens and MongoDB.
• 🤖 The AI was able to write complex code, handle errors, and fix bugs based on the engineer's feedback and input.
• 🚀 The AI can create a complete application with a front-end, back-end, and database integration, with code generation, testing, and documentation.
• 🔁 The AI-engineer collaboration allows for easy iteration and the ability to go back to any step in the development process if needed.
• 📚 GPT Pilot generates comprehensive documentation throughout the development process, making it easier to understand and maintain the application.

Q & A

What is GPT Pilot and what does it offer?

GPT Pilot is an AI coding assistant that allows engineers and engineering teams to work with AI to create sophisticated, full-stack applications. It offers a VSCode plugin that enables real-time collaboration between a human developer and an AI to build complex applications.

What application was built during this demonstration?

The demonstration involved building a full-stack Node.js application with authentication features such as user registration, login, and password reset. It also included session management and displayed the logged-in user's first name on the homepage.

What were the steps involved in building the application using GPT Pilot?

The steps involved providing a detailed description of the application requirements, setting up the local environment, following the AI's action plan for development, reviewing and debugging code, testing functionality, and verifying the application's working state at various stages.

How did the AI assist in the development process?

The AI generated the project plan, provided instructions for implementing tasks, wrote code snippets, assisted in debugging issues, and guided the overall development process. The human developer collaborated with the AI, providing inputs, verifying functionality, and testing the application along the way.

How did the AI handle errors or issues during the development process?

When errors or issues arose, the AI prompted the developer to start debugging and provided suggestions to resolve the problems. It also allowed the developer to restart the process from any previous step if needed.

What technologies were used in building the application?

The application used Node.js, Express.js, Mongoose, MongoDB, JWT tokens, bcrypt for password hashing, EJS for templating, and Bootstrap for styling.

How did the AI handle documentation for the application?

The AI generated documentation for the application during the development process, including a README file with relevant information about the application's structure and functionality.

What was the developer's role in the process, and how did they interact with the AI?

The developer's role was to collaborate with the AI, provide inputs and confirmations at various stages, verify functionality by testing the application manually and through the terminal, and debug issues when they arose. The developer interacted with the AI by confirming commands, providing inputs when prompted, and communicating any issues or errors.

What features did the final application include?

The final application included user registration with password strength requirements, login functionality with JWT tokens, session persistence, and the ability to display the logged-in user's first name on the homepage.

How did the AI handle the potential for extending the application's functionality?

The AI provided the option for the developer to add new features or make changes to the application after the initial development process was complete. The developer could also restart the process from any previous step if needed, allowing for iterative improvements and extensions to the application.

Outlines

00:00

🤖 Introducing GPT Pilot: A Powerful AI Coding Assistant

The video introduces GPT Pilot, a powerful AI coding assistant that allows engineers and teams to create sophisticated full-stack applications by collaborating with AI. The presenter demonstrates how GPT Pilot's VS Code plugin facilitates the process of building a full-stack application for user authentication, including registration, login, password reset, and session management. The AI guides the user through the development process, asking questions, generating code, and providing instructions to debug and test the application at each step.

05:00

🛠️ Setting Up the Project and Initial Development

The presenter starts by describing the project goals and requirements, including the use of Node.js, Express.js, and MongoDB. GPT Pilot then guides the setup of the local environment and initializes the project, creating the necessary files and directories. The AI generates code for user registration, including password hashing using bcrypt. The presenter tests the user registration functionality and continues with the iterative development process, collaborating with the AI to debug and test along the way.

10:00

🌐 Building the Front-end and Implementing Authentication

GPT Pilot creates the front-end pages using EJS and Bootstrap, including the registration, login, and homepage. The AI implements JWT-based authentication, password strength requirements, and session persistence. The presenter verifies the functionality at each step, working with the AI to debug and fix any issues that arise. The AI also generates documentation for the application.

15:02

🎉 Completing the Full-Stack Application

The presenter successfully logs in to the application through both the terminal and the UI, demonstrating the functional full-stack application built with GPT Pilot's assistance. The AI completes the project, reaching 100% generation and adding final touches to the documentation. The video concludes by highlighting the impressive capabilities of GPT Pilot in building sophisticated applications through collaboration with AI, and encourages viewers to explore further features and join the GPT Pilot Discord community.

Keywords

💡GPT Pilot

GPT Pilot is described as a sophisticated AI coding assistant designed specifically for engineers and engineering teams. It integrates with development environments such as VS Code to facilitate the creation of full-stack applications. The mention of GPT Pilot as a sponsor and its capability to work in tandem with engineers to produce complex software solutions underscores its significance in automating and enhancing the software development process. For example, the video demonstrates using GPT Pilot to build an application with user authentication features, showcasing its advanced AI-driven development capabilities.

💡VS Code Plugin

The VS Code Plugin for GPT Pilot is a tool that allows developers to access the functionalities of GPT Pilot directly within the Visual Studio Code (VS Code) Integrated Development Environment (IDE). This plugin simplifies the process of creating and managing software projects by providing an interface to interact with GPT Pilot's AI capabilities. The script mentions the installation and utilization of this plugin, illustrating how it enables seamless integration of AI into the development workflow.

💡Full Stack Application

A Full Stack Application refers to a software solution that includes both frontend (client-side) and backend (server-side) components. The video script outlines the creation of such an application, emphasizing the comprehensive nature of development tasks that GPT Pilot can assist with. Examples from the script include building authentication features, user registration, and session management, demonstrating the AI's ability to handle a wide range of development tasks across the full technology stack.

💡Authentication

Authentication in the context of the video is the process of verifying the identity of a user attempting to gain access to an application. The script details the development of authentication features such as login, registration, and password resetting. This showcases GPT Pilot's capability to implement security measures within an application, a critical component of modern software development.

💡JWT Tokens

JWT (JSON Web Tokens) Tokens are a method for securely transmitting information between parties as a JSON object. The video script mentions choosing JWT tokens as the method for handling the login and registration process. This choice highlights the importance of secure authentication mechanisms in application development and the AI's ability to incorporate such security protocols.

💡Node.js

Node.js is a runtime environment that allows for the execution of JavaScript code server-side. The video script discusses creating a Node.js application, indicating the technology's role in building the backend of the full-stack application. This exemplifies how GPT Pilot can assist with setting up and configuring server-side components using popular and modern technologies.

💡Mongoose

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. The script's mention of using Mongoose for database interactions signifies the incorporation of database management tasks in the application development process, showcasing GPT Pilot's ability to handle database schemas and data interactions efficiently.

💡bcrypt

bcrypt is a password-hashing function that enhances security by transforming passwords into a secure format before storing them in a database. The script references the use of bcrypt for hashing passwords in the user registration backend logic, illustrating GPT Pilot's support for implementing essential security practices in application development.

💡EJS

EJS (Embedded JavaScript) is a templating language used to generate HTML markup with plain JavaScript. The script mentions using EJS along with Bootstrap for the frontend development, highlighting the AI's capability to manage frontend technologies and integrate them with backend services to create dynamic web pages.

💡Debugging

Debugging refers to the process of identifying and removing errors or bugs from software. The video script includes instances where the developer works with GPT Pilot to debug issues encountered during the development process. This illustrates the interactive and iterative nature of working with an AI coding assistant, where the AI provides support in troubleshooting and refining the application.

Highlights

GPT pilot allows you to work with AI to create sophisticated, full stack applications.

The level of complexity and sophistication that you can build into a full stack application simply by working with AI with GPT pilot is incredible.

GPT pilot is made for engineers and engineering teams.

You can save your progress along the way if you build a complex enough application it could take a few hours to do in collaboration with the AI but a few hours is nothing compared to potentially weeks of work that it would have taken without this.

We're going to create a node.js app that enables users to register and log into the app on the front end create only three pages one that enables users to log in the other that enables users to register and the third one shows the data of the logged in User make sure that after registration or login the user is kept logged in in a session so that when you visit the homepage you could see the login user and we're going to be using MongoDB for the database.

Now it's asking me all the clarifying questions that it needs and it's giving me a project summary as you can see here.

Now it already stopped and it's waiting for an input from me so please set up your local environment so that the Technologies listed can be utilized, when you're done write done so I can either write done or I can simply click this done button.

Now it's creating the action plan for development and the nice thing is as you're developing you're going to run into bugs just like any developer would and you can work with the AI to debug things to test things along the way and to make sure that you're ironing out things as you go and this iterative process between an engineer and an AI is really what distinguishes GPT pilot.

Now it paused and it says can I execute the command npm init Dy and it gives you a timeout window that it can execute that within so can I execute this yes yes you can and the nice thing is as it's building we're actually going to see the code being written over here on the left side all the files being created and if it ever needs input on a specific line of code it actually pulls up that file highlights the line of code and asks you for that input so here we go.

GPT Pilot is asking me to verify that it's working so let's do that so we just click again start the app we have some depre warnings and these are all warnings so that should be fine server is running on Port 3002 mongodb connected okay so we're going to grab this curl request going to copy it switch over to terminal paste it in hit enter user successfully created let's try it again just to make sure we get an error warning now because this user is already created perfect user already exists okay now that's it we just click continue.

Now it's asking if it could do npm start sure, next it's going to ask me to test if the password strength requirements are correctly implemented and it's giving me the code to do that.

Now we're going to test the login functionality so let's click start app, grab that command I'm going to paste in the command they gave me and I'm actually going to use a user that I already know is registered so back up here for my previous commands copy that, all right and then I'm going to use the password of password 1 2 3 and hit enter, logged in successfully perfect and it responded with a token awesome all right, back here continue and now we are 2/3 done congratulations 66.67% of your project generation.

We're done congratulations you've reached 100% of your project generation, so now we have a full stack application, front end back end a way to log in a a way to store that login information in the database we have a JWT secret protocol set up completely done for us by AI by GPT pilot it is super impressive.

Now it's asking me if I want to add any features or changes and so for now I'm just going to click enter for no but of course you can continue to extend this application and as I mentioned before if I click this little back arrow right here I select an app off me you can select any of these major steps so I'm going to say coding and then you can also select a development step so you can start over from any of these steps, and these steps are referencing the different steps that we went through to build this application if you run into any problems jump in their Discord the two Founders are great they're super helpful they'll help you out I'll drop the Discord Link in the description below if you liked this video please consider giving a like And subscribe and I'll see you in the next one.

Transcripts

user password entered log in there we go

you are logged in so it fixed itself how

impressive is that GPT pilot allows you

to work with AI to create sophisticated

full stack applications I know I've

reviewed a few other AI coding

assistants but GPT pilot really stands

alone the level of complexity and

sophistication that you can build into a

full stack application simply by working

with AI with GPT pilot is incredible and

GPT pilot is made for engineers and

engineering teams so I'm going to show

you how to use it today they're the

sponsor of today's video and they have

an amazing VSS code plug-in that just

came out so let's use that let's go so

with vs code open I'm going to go over

to my extensions right here and I'm just

going to type in GPT pilot and there it

is GPT pilot Alpha so you're going to

click this and I already have it

installed so go ahead and click install

and once you have it installed you're

going to see this little tab right here

on the left side click that we click

open GPT pilot and since since I've

already done this it's a little

different but the first thing you're

going to be greeted with is asking for

your gp4 API key once you do that click

create new app and the really nice thing

is you can save your progress along the

way if you build a complex enough

application it could take a few hours to

do in collaboration with the AI but a

few hours is nothing compared to

potentially weeks of work that it would

have taken without this and what we're

going to be building today is a full

stack application that allows for

authentication so logging in resetting

the password registering Everything full

stack so what is the project name off me

hit enter describe your app in as much

detail as possible so we're going to

create a node.js app that enables users

to register and log into the app on the

front end create only three pages one

that enables users to log in the other

that enables users to register and the

third one shows the data of the logged

in User make sure that after

registration or login the user is kept

logged in in a session so that when you

visit the homepage you could see the

login user and we're going to be using

for the database now you can build

anything here okay now that we have this

described go ahead and push send and

it's going to start asking me questions

so again this is an engineer working

with the AI together to create an

amazing application what authentication

method should we use for the login and

registration process if you don't care

you could just say I don't care choose

whatever you want but I'm going to say

JWT tokens should the user verification

process require email confirmation no do

we need password strength requirements

or complexity validation for the user

registration yes but you can decide what

that is should the homepage display any

specific user data besides the username

or email just the first name all right

now it's ask me all the clarifying

questions that it needs and it's giving

me a project summary as you can see here

I'm going to make this screen a little

bit bigger so now it is doing planning

and it's saying here are all the

technologies that you're going to be

using now it already stopped and it's

waiting for an input from me so please

set up your local environment so that

the Technologies listed can be utilized

when you're done write done so I can

either write done or I can simply click

this done button I'll click the done

button I already have installed

some of these things it can actually

install itself but I like to just take a

look and if I don't notice anything that

I clearly don't have I go forward and

click done and now it's creating the

action plan for development and the nice

thing is as you're developing you're

going to run into bu just like any

developer would and you can work with

the AI to debug things to test things

along the way and to make sure that

you're ironing out things as you go and

this iterative process between an

engineer and an AI is really what

distinguishes GPT pilot okay so let's

take a look at some of the descriptions

of what it's going to be building

Implement user registration backend

logic and we have the programmatic goal

we have the user review goal here's

another one create the registration page

so it's saying exactly what it's going

to be building now for the actual

development implementation task one

initialize a nodejs project with

express.js and set up a basic server so

here we go it says here to implement

task one you'll need to follow these

steps but that just means that it's

going to run it for me and you'll see

that in a minute so here you can see

it's planning all the commands that it's

going to have to write out okay here we

go so now it paused and it says can I

execute the command npm init Dy and it

gives you a timeout window that it can

execute that within so can I execute

this yes yes you can and the nice thing

is as it's building we're actually going

to see the code being written over here

on the left side all the files being

created and if it ever needs input on a

specific line of code it actually pulls

up that file highlights the line of code

and asks you for that input so here we

go can I execute the command npm install

Express yes you can okay so here's the

first good example so I'm going to move

that over a little bit and what we see

here is that it ask me for input please

open the file server.js and on line

three check it out so here we go input

required decide on a fallback port

number other than 3,000 if necessary so

it is highlighted for me I'll fall back

to 3002 and that's it you just save the

file and you continue and we keep going

just like this so can I execute the

command node

server.js yes server is running on Port

3002 great and now what we're going to

be doing is testing whether the server

is spun up correctly so it's saying okay

I'm going to spin up the server then

you're going to run this curl command to

just make sure it's up and running and

it's also telling me what to look for if

it did work properly okay so stopped

we're going to click start app now the

app is running on Port 3002 scroll up a

little bit we're going to grab this curl

command and it ask me to Ping Port 3000

but I believe it's 3002 so I'm just

going to change that hit enter and there

we go it's alive so we can either stop

the app or we can just continue and I

will continue now it's going to install

packages task two and so now you're

starting to get the feel of the kind of

pingpong back and forth between myself

and the AI building this application

okay so we got to another stopping point

can I execute the command npm install

Mongoose yes so all I really have to do

while it's sitting here building things

is just confirm and make sure it's

working so here we can see user.js just

got built out and now we have a pause

open the file. MV and online one check

out the required input okay let's see so

it just says replace with your mongod DB

connection string if you're not using

the default local but we are so we just

delete that comment save and continue

and yes you can do npm start okay so we

have our first error so it says can't

find module. MV and that's because we

don't have it installed so can I start

debugging this issue yes so here we go

the error message indicates that M

package is not there can I install it

now it's asking me to install it yes you

can npm start again and that seems like

it worked we have two warnings which is

what we're seeing here but that's okay

now we've reached a point where it's

asking me to make sure everything's

working again so start app okay these

are all warnings that's okay and mongod

DB connected so it looks like it's

working so we're just going to click

continue now it's going to be

implementing user registration backend

logic with password hashing using bcrypt

all right we got another one npm install

bcrypt yes okay now it's gotten to the

point where it actually wants me to test

user functionality so I'm going to try

to register a new user for the app so

we'll go ahead and click start app and

then we're going to run this request to

just make sure that the user

registration works now I could also do

this through the browser no problem all

right so I pasted in the code let's see

if it works user created successfully

amazing okay so now that we know it

works we're going to come back here and

we're just going to click continue and

it's going to keep building it's that

simple and it looks like we're about a

third of the way done so here we go now

it's creating a bunch of new pages it's

also adding to the readme which is

really cool so it's actually creating a

readme as well okay so now it needs to

install ejs and bootstrap go ahead and

now it's going to start doing the front

end I think so now it is asking me if I

want to do something can I execute the

command make directory yes I need human

intervention copy the bootstrap CSS and

JS files into the public SL CSS and

public sljs directories respectively

okay so it does seem like I need to do

this part manually so let's go download

those libraries so I go to get

bootstrap.css it told me to and here it

is so let's unzip it and there we go CSS

and Js those are the two things I need

so I am simply going to replace what I

have in there there we go I'll delete

these and now it should be good to go

let's just make sure yep there's

everything all right that was very easy

next let's start the app just to make

sure it works we have some warnings but

otherwise it seems like it works so

continue can I execute the command node

server.js yes okay so we have a little

error got incorrect CLI response it's a

deprecation warning so this is a warning

we shouldn't have got the error but

let's see go ahead and debug it and it

might just say hey this is actually a

warning no big deal yeah the deprecation

warnings are not critical and should not

prevent the server from starting okay so

it might try to fix it anyways no

debugging appears to be necessary Okay

so we've gotten to another point where

GPT Pilot is asking me to verify that

it's working so let's do that so we just

click again start the app we have some

depre warnings and these are all

warnings so that should be fine server

is running on Port 3002 mongodb

connected okay so we're going to grab

this curl request going to copy it

switch over to terminal paste it in hit

enter user successfully created let's

try it again just to make sure we get an

error warning now because this user is

already created perfect user already

exists okay now that's it we just click

continue implementing task five

Implement password strength requirements

as a middleware in the registration

route so now it's writing out the plan

to put in stronger password requirements

and now it's actually coding it okay

there it made the changes okay now it's

asking if it could do npm start sure

next it's going to ask me to test if the

password strength requirements are

correctly implemented and it's giving me

the code to do that so here it says

password week and it's going to ask me

to spin up the server again and try it

again manually so there it is so I just

click start app again I can scroll up

grab this Command right here switch over

to to my terminal paste it in hit enter

and there we go password does not meet

strength requirements perfect okay so I

click continue we keep going now it's

writing the JWT secret code okay so it

wrote a bunch of code now it's asking me

to install a few things go ahead okay

and I can tell that it is asking me to

verify something so anytime you see code

highlighted like this it's asking to

verify so let's look at it add a secure

JWT secret key so I'm just going to add

super secure it doesn't really matter

for this test I'll save it open this

back up and continue now we have another

one session secret key and it'll be

super duper secure and continue all

right now we're going to test the login

functionality so let's click start app

grab that command I'm going to paste in

the command they gave me and I'm

actually going to use a user that I

already know is registered so back up

here for my previous commands copy that

all right and then I'm going to use the

password of password 1 2 3 and hit enter

logged in successfully perfect and it

responded with a token awesome all right

back here continue and now we are 2/3

done congratulations 66.67% of your

project generation and before continuing

it's actually creating documentation

which I absolutely love very cool and

here's the documentation on the left

side bunch of information about how this

is built now Implement task 7 create

login page using EGS and bootstrap and

handle successful login by redirecting

to the homepage and here's some of the

code and we're on dev step 116 now and

another really nice thing is that you

can always go back if you have any

problems you can go back to any step in

this entire process all 116 steps you

can restart from there and go forward in

different directions if you choose so if

you don't like the way something came

out or if you run into any bugs simply

go back to a step and restart it from

there all right npm start again yes it's

just making sure that it's working and

look how much code has been written

already I mean there's so many different

files all right Dev step 121 to test if

the task was completed successfully the

user can follow these steps so now it's

asking me to do it and now I'm actually

going to use the web login to see if it

worked and when it's done it's going to

give me the little message to start the

app yep so go ahead and click Start I'm

going to grab the login URL right there

and here we are so let's make sure that

we can log in so I'm going to grab the

same user that I just logged in through

the terminal paste it in and then I'm

going to grab the password as well paste

it in login invalid email or password

okay okay okay so let's make sure we can

still log in with this found redirecting

to home all right so it does work

through the console but it's not working

through the interface okay so we're

going to debug this now so it says right

here if something is wrong tell me so

I'm going to tell it right away okay so

I'm going to say through the terminal it

works fine but when I try to log in

using the same credentials through the

UI I get this error and then I pasted it

in we're going to click submit and

hopefully it's going to be able to fix

it okay so given the information

provided by your colleague it appears

that the isue lies in integrating the

front-end login form with the backend

loog login Logic the fact that the login

Works through the terminal but not

through the UI suggests that there might

be a problem with the form submission

okay perfect so it's going to try to fix

it now let's see what it does all right

now it's asking for some user input

input required line 62 of users. JS so

we're already there let's go to line 62

there it is and it says add the required

input so add server logic to handle

incorrect email password and redirect

direct with an error message okay that's

fine and same thing here that's fine

okay so we're going to save and continue

type y to continue okay submit all right

now we're going to test it again start

app grab this URL right here okay let's

try it again all right user password

entered log in there we go you are

logged in so it fixed itself how

impressive is that very cool switch back

to the app and continue so it's asking

to do npm start again yes great can I

start debugging the issue so we have a

deprecation warning so it probably

doesn't need to do anything with that

but it's asking to anyway so go ahead

yeah so the deprecation warnings are

likely not a cause of critical failure

but may require attention in future

updates so it's still going to try to

fix it and do it a little bit better

remove the deprecated Mongoose warnings

now it's asking to run node Trace

deprecation yes you can now it says

manually verify that session persistence

works by logging in restarting the

server and verifying that the session

remains remains active Okay start now

here I'm logged in refresh the page I'm

still logged in I'm going to stop the

server I'm going to restart the server

go back refresh and I'm still logged in

perfect all right implementing task

number nine build the homepage to

display the logged in user's first name

using the data retriev from the JWT

payload okay here we go npm start again

yes testing everything is working great

moving on to the next step okay now it's

going to ask me to do something so again

log in then I'm going to be redirected

to the homepage verify that the page

displays my name and for a more

automated way to test the implementation

from the terminal using curl we can do

that but I'm going to do it the manual

way so I'm going to click Start I'm

going to go over here welcome test

refresh and I'm still logged in and it

still says welcome test so perfect all

right we're done congratulations you've

reached 100% of your project generation

so now we have a full stack application

front end back end a way to log in a a

way to store that login information in

the database we have a JWT secret

protocol set up completely done for us

by AI by GPT pilot it is super

impressive now I worked with it step by

step throughout the process to verify

that it worked I ran into some issues

and I fixed it with the help of AI and

finally now it's writing more

information in the readme file the app

is done now you can use it wonderful

look at all that beautiful code written

now it's asking me if I want to add any

features or changes and so for now I'm

just going to click enter for no but of

course you can continue to extend this

application and as I mentioned before if

I click this little back arrow right

here I select an app off me you can

select any of these major steps so I'm

going to say coding and then you can

also select a development step so you

can start over from any of these steps

and these steps are referencing the

different steps that we went through to

build this application if you run into

any problems jump in their Discord the

two Founders are great they're super

helpful they'll help you out I'll drop

the Discord Link in the description

below if you liked this video please

consider giving a like And subscribe and

I'll see you in the next one