FREE Project IDX AI Coding Agent + Google Gemini Flash 2.0!🤖 Beats Cursor, Windsurf, Bolt.new IDE
In this video
- 00:00Introduction to Google Project IDX and AI Tools Overview
- 00:40Features of Project IDX: Browser-Based IDE by Google
- 01:14What You Can Build with Project IDX
- 01:29Key Features of Project IDX: Templates, Emulators, and Extensions
- 02:07Interactive Chat Features in Project IDX
- 02:44Using Templates for Web, Mobile, and Backend Apps
- 03:20Creating a CRM with Next.js in Project IDX
- 03:59Setting Up and Previewing Projects in Project IDX
- 04:52Adding Extensions and Models to Project IDX
- 05:17Integrating Google Gemini API and Other Tools
- 05:58Using Gemini Flash for Code Comments and Suggestions
- 06:27Interactive Chat and Terminal Commands with Project IDX
- 07:01Debugging Errors and Enhancing CRM Functionality
- 07:42Troubleshooting Errors and Adding Graphs to Projects
- 09:07Exporting Projects from Project IDX to External IDEs
- 09:30Comparing Google Gemini Flash with Other AI Models
- 09:57Conclusion: Overview of Google IDX Features and Tools
- 10:50Join Stride Community and AI Academy Resources
- 11:05Stride AI Consulting and Services Overview
Links from the video
Transcript
2,273 wordsWhat's going on guys Josh Bok here now on this channel we've covered many different AI models and different AI tools and we've covered Gemini real time we've covered Gemini 2.0 flash we've covered notebook LM and I've personally said on this channel that Google is definitely not a company that you want to underestimate when it comes to the AI race and we've seen that lately with a tremendous amount of new updates and different models and all these cool things that they're putting
Out that is really really awesome now Gemini 2.0 flash is really cool and it is a really good llm but another tool by Google that we actually haven't talked about on this channel yet is Project idx this is Google's in the browser IDE that is an alternative to some of the other ID that we've covered on this channel such as Aid bolt. DIY bolt. new cursor Pari wind surf VSS code you name it and not only is this a full-blown IDE
In your browser that allows you to do things like add extensions edit files use any single framewor you want like nextjs flutter you name it but it also has all the same capabilities of cursor wind surf with AI editing features for 100% free I'm going to show you how you can use it and build really cool stuff in today's video Let's dive right into it all right guys guys so for those of you who don't know about project idx all links
I cover in today's video will be linked down below as you can see a few key features of familiar environments such as um you know VSS code Gemini in idx Project Creation with it built- in templates GitHub import Android and web emulators which is really cool especially if you're building apps um for the uh like flutter or whatever the case may be um deploy directly from your workspace workspace sh Shing experimental full VM workspace and then of course extensions okay there's
A lot of other cool little features too we're going to dive into those right now and another cool thing I want to cover is this is a feature right here that is somewhat more recent which is interactive chat so as you'll see in just a second when we dive into project idx we're able to do the standard chat interface on the right H side like you would be able to do with any AI pair programming tool but now with interactive chat
We're able to do a lot more such as multifile editing running terminal commands and much more so when you first go to Project idx you will see we have the homepage the blog the docs so you can check out the docs if you want okay so you will see your workspaces here as well as shared with you workspaces and you can import from a repo here you can do the Android Studio so try building native Android apps entirely in your browser
With an emulator and all that cool stuff and then then we also have different templates right here that you can choose from so say you wanted to use angular next j s flutter Gemini API Astro go python node Express we can go to see all templates here so we can see web apps right here we can see backend apps right here go python flash Jango we have mobile apps like react native flutter Ai and ml with Lang Chang Firebase gen kit
Um mising and then databases like post grass mongod DB Firebase Prisma MySQL so a bunch of different options which is really nice now for today's video let's go ahead and click nextjs app and we're going to create an awesome CRM right here you can name it anything of course you can select JavaScript or typescript we're going to go with typescript you could select use a source directory use es lint use app router use Tailwind so we're going to use all those
And go ahead and click create now it is going to set up the workspace initialize the environment build the environment and then finalize everything and we should be good to go all right and boom now we have our environment set up you can see here the terminal automatically ran npm install right here which is nice and you can see that we have a web preview of our app right here on the right hand side which is really nice as well over
Here if we click here we could share preview link copy preview URL manage workspace access make preview view public a bunch of different options there all right we can do the standard things that you would be able to do in your IDE like search search and replace over here initialize repo publish to get run and debug right here we got extensions right here so let's say you wanted to use an extension like continue. DAV for example you could go here add
This or you could go ahead and use Klein if you didn't see my recent Klein video you can check that out you could install Klein and use that and this would allow you to use other models in cas case you wanted to like quad Sonic 3.5 um in you know Google's idx instead of just using Google Gemini all right and here we have some project idx options right here you can see go ahead and add Google Gemini API to our app
We can grant access like so sign in right now you can see we have the Google Gemini API you want to add other stuff like Firebase or any other of these Google apps you can do so very easily for Integrations now I'm going to ahead and close this preview and you will see that we have up here in the top right a little Gemini icon right here if we click this we can see explain selected code add comments for selected code
Do anything with selected code so those are a few default options generate unit tests with the current file experimental and then chat with Gemini and start inline chat so just for example let's go ahead and do add comments for selected code you're going to have to uh select code first and then we you can use this all right so now we have Gemini and I ex popping up so we can select enable suggestions as you type so this is the autocomplete
And then enable codebase indexing we can just go ahead and click continue all right so Gemini wants to update a file we can go ahead and click update and it should start adding these comments and boom we can see this is the default homepage for the application instructions for getting started all the different comments that you would want now you have an option right here you can use the New Classic chat right here so this is if you wanted to just
Simply check that with you know the Gemini model within a typical chat interface you can see how do I Fetch injs and it's explaining it to us right here thinking explaining to us giving us some additional resources right here which we could check out or we could use the interactive chat which is the new chat which allows you to make changes to the code base run terminal commands and more with your approval so here I'm saying make a beautiful CRM application
I'm using nextjs App router and we're going to go ahead and click Send all right so Gemini wants to create a file we can go ahead create file here wants to create another file let's go ahead and allow that for the sidebar all right we got the header here we can create that we got a modal let's create that okay so it created all these files let's go ahead and check this out so far one issue I'm noticing is that all
The different files it's adding TSX at the top right here so I'm just going to go ahead and delete this okay so I'm getting this error right here so I'm going to just copy and paste this over into over into our chat oh it's simple we just need use use client very easy putting another error I'm going to paste this in I don't know why it keeps doing this TSX stuff right here I'm going to delete that okay now we do
Have it loading right here we are getting an error though I'm going to copy and paste this in okay and now it doesn't look like we're getting this error which is good okay so the second one actually screwed it up here so I'm actually just going to go control Z to undo that and then we should have it are you tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of Elite sales
Agents booking qualified appointments for you around the clock no more wasted time on training no more frustration with performance and no more draining your budget on inconsistent and expensive call centers introducing stride agents AI powered appointment centers that work 247 never get tired and book appointments while you sleep trained on thousands of successful conversations our AI agents outperform human teams at just oneth of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter
Of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire sales process with Cutting Edge AI technology it's time to accelerate your stride with AI agents all right so now I'm saying make it have more functionality the sidebar menu options should link to separate pages as well let's go ahead and send this okay so we're adding a couple Pages we're updating the layout. TSX okay we're getting a failed to compile right now so I'm
Going to copy and paste this over into Gemini all right so now Gemini is going to run a terminal command right here to install hero icons okay that problem is resolved now but now we got another one so I'm going to copy and paste this over okay now it's loading up but we're getting a couple more errors all right so I finally fixed that issue it was actually just one of the names and the icons wasn't correct to the documentation and
Gemini just kept trying to put that same name now here it is of course it isn't the best but I did also add some graphs right here of course we could tell it to fix the text we got monthly sales new customers Etc just a couple graphs from rechar here now let's say you wanted to take your project outside of uh idx what you could simply do is just highlight your whole entire project and then click zip and download and you
Could download this whole entire project as a zip so maybe you want to prototype something really quickly in idx you can do that and then zip it download it and use it in your IDE like cursor wind surf or whatever the case may be or even Klein with VSS code and you really go in that way or of course you could just use like something like continue. DAV or Klein within here if you do want to have access to other models
I do personally prefer other models than Gemini flash I think Gemini flash is really good but I still like using models like Clawson at 3.5 you know maybe gpg 40 or 01 or coding when it comes to complex projects other than that guys that's pretty much it for this video I just wanted to Showcase Google idx and I think this is really cool it's a really cool free tool that you can use today and like I said don't underestimate Google even
Though they made some fumbles in the past initially now we're seeing a lot of cool advancements from them and a lot of big things so I'm excited to see where this whole Space goes in 2025 if you're new to the channel we upload videos all the time on AI Marketing sales business growth so if you like that type of content you got some value here make sure to like the video comment down below and subscribe to stay up to date with
The uploads also too guys if you haven't already joined our free Facebook group and Discord Channel strid community.com I'll leave a link down below for that and then also too guys you're definitely going to want to join our stride AI Academy I'm going to be uploading some course content resources templates Etc very soon into this community so make sure to join and stay tuned for that also too guys if you run a business and you need help with your systems your
Sales your marketing or implementing ai ai agents like AI appointment cers Ai call center into your business and book a call down below at executiv st.com apply and we can see if it's a fit or not other than that guys I will see you in the next video keep hustling keep grinding and of course guys accelerate your stride take care