Bro!!! This is exactly what I was looking for. Thank you so much for creating this video. As a full time frontend developer, I can see how useful it could be to me. And also for my side projects, this will help me get up and running quickly (that's the hard part you know, "The initial setup"). Thanks, and keep making such videos. We would love an in depth tutorial series of you making an app or saas type product using this flow. Cheers!
Well done. I appreciate your statement about not being a finished application, but rather providing a starting point. This aspect is the most frustrating for me in any stack. This is fantastic.
Always great them and say thank you and goodbye. No Ouija shit, I just want them to remember I always been nice to them just in case. 😬. I'm Barely kidding 😂
Someone asked why LLM hallucinates and is so convinced the info they give then is correct, I replied it's because we taught them gaslighting with reinforcement learning
Yeah the KISS inverted now, just got to remember your versions and prevent updates, not to miss anything fundamentally prevent spaghetti code when in a lazy state. AI should be improving in background aswell along with versions.
And how long would that typically take someone? Bro I did so much shit with chatGPT it’s ridiculous. Some people just don’t know how to leverage tools efficiently but chatGPT alone can replace humans. I’m currently working on a program that can update its own code and continue improving itself to get better at making code. I basically built a weaker version of copilot in less than 24 hours, let that sink in, chatGPT can manage my files by interacting with an interface that it built… The future depends on how companies decide to proceed. They could easily fire half of their dev staff right now.
@@aaagaming2023 Subjective nonsense. For example I have a giant Elm file in one of my projects, it's organized very well and is super easy to edit and refactor with a decent editor (Vim w/ a code folding plugin). Breaking this into 20 files would add a ton of bloat and misdirection... and this is for a real app, not some marketing page.
AI is still a baby. I remember just year ago i was learning context api with AI and it was struggling. Now we are already building components and much more. I am super stoked to see whats going to be next year September. Nice content Ras !
Hey @rasmic, I just wanted to say thank you for continuing to make content. I like the short format and how clear you are, which makes you different from other content creators. Hope to see you grow!
Yes, it will not replace developers, it will just increase productivity by writing boring, repetitive blocks of code. Similarly, when engineering adopted CAD software, engineers didn't spend 90% of their time drawing lines on paper. This didn't decrease the number of engineers needed, it just increased the opportunity to create really complex designs.
Ras - your perspective on this is absolutely spot on. I’ve watched a ton of content about the latest in AI development tools and far too many people are coming at it from the perspective of a traditional developer. When speaking to people coming from no code or people that aren’t technical at all, most of the content fails to strike the right note with this latter audience. I think he did a great job speaking to the non-technical audience here.
Awesome. Small note: It might not replace developers (I am one too) but what I am seeing in the market is that the open listings for freelancers are drying up quickly and companies are re-evaluating new hires. When the current flock of developers can 2x, 5x, or even 10x- supported by the organization- new developers are not needed as much anymore. Which can cause burnout, stress and dev. fatigue for current developers. You might be able to go 5x, but your organisation is going to start expecting it soon enough. Keep up the awesome work!
I'm only 3mins into this video and I already liked and subscribed. As a no-coder/low-coder this is exactly the content and guidance I'm looking for. I'll be very keen to see a further fuller tutorial also.
These are useful for repetative tasks like making these static pages and stuff, helps speed up the process and focus on other important tasks in the codebase
this was super helpul. i've been wanting to find tools like this to get started quickly with frontend stuff. would love to see a full tutorial including backend too!
You are absolutely on the money! I’ve been using cursor for a couple of weeks, before that I was just using GPT4. Today, cursor was getting confused with crewai project templates using poetry, along with other python files I had in the project. I finally had to step in and fix it. I was using Claude sonnet 3.5 with cursor, I wonder if using OpenAI I would’ve been better.
I must say: I love your workflow. I have been trying to build a full stack app using different AI models, though it has been helpful so far but not perfect as I have to keep going back and forth with debugging but I’m definitely going to try this out! Thanks for sharing!
One thing I do to avoid copy/paste, I just ask claude to generate a bash script for the generated files with thier contents, then I execute it in the project dir
Buddy this is amazing! I watched you in a podcast with Greg Isenberg and as a product designer who wants to learn about code and leverage the AI this blows my mind. If possible, I would love to see this framework you are using but in a case where you want to build an iOS app in Swift. Keep on great work ❤🔥
do you suggest to pay for a Claude pro account and use Opus or just stick to the free one with Sonnet 3.5? I ask because already pay for Cursor, v0 and GPT 😂
Thanks for asking this question as I had the same when I watched this video and thanks for answering as well..I guess I got the recipe to build great products!
thanks! for sure would love a video on more complex web apps. for some inspiration, maybe show the process of creating components in v0, organizing in Claude or ChatGPT, adding the components to Cursor, adding a database, connecting some workflows, showing how two different user types with two different interfaces can share that database, deploying the app somewhere and then making edits/debugging from there.
Never used cursor AI before but will look into it. Did you see Claude Dev already. Looks similar to Cursor AI. Besides that we have pretty much the same flow. Also glad to see someone trying to place AI correctly. AI will replace us eventually, but for now it is a very strong copilot everyone should have
Really interesting video. I was looking for something like this. I hope you find the time to make a more complete guide on how to build a complete web app!
wow, thank you so much this is amazing!!!!!! Thank you for putting int he time to show this workflow you have. It would be amazing to see how you go from scratch too a fully shipped application.
Timestamps (Powered by Merlin AI) 00:03 - AI tools are not replacing developers, but can be a helpful co-pilot in development. 01:29 - Utilizing V0, Claude AI, and Cursor AI for efficient web app development 02:49 - Building a notion style landing page using V0, Claude AI & Cursor AI. 04:44 - Enhancing web app components for speed and aesthetics 06:38 - Using theme provider for light and dark mode 08:34 - Generating folder structure and creating files using Composer in web app development 10:18 - Fixing the header alignment issue on the landing page 12:20 - AI can help speed up UI development process
Thanks for this - i believe this workflow will all come together when either of vercel or replit brings this all together with agents to provide a end to end experience. also we need to think of databases , security, scalability and deployment of these as we move beyond POCs
After writing the whole code in chat bot ask the AI this "can you write it in a bashcript so that i can easily copy it to my desktop" It will significantly reduce the work load to get the files and code in your PC.
Well done! As Cursor is also using Claude, why do you need to use the extra step of asking Claude (native website) for generating code and past into Cursor? Just curious. Thanks.
Dope video man! Super valuable. Found you from Greg's channel. Quick question - what screen recording app are you using? How are you doing the zoom ins and outs - is that part of the recording software, or are you keyframing it in post production software i.e. Premiere Pro?
The problem is all examples people demonstrating on TH-cam is very general purpose, very simple kind of apps/websites. The real use cases or edge cases are the ones we need to see. Maintaining a real life project, adding new features, building a complex type of SaaS etc. A pipeline that works in real life.
Well done for taking the hype out of the current buzz. I've found that ai claude and GPT will get you so far, then You come up against a problem and no matter how many times you prompt it, it just won't be able to solve that problem. And then, if you're not a developer, you're gonna struggle to try and get past that hurdle.
are you doing this whole thing on arc? between v0 and claude how are you able to swipe screens like that? between the IDE and the browser arc awesome video looks like the ux/ui i’m looking for thank you
Not sure why you're using the Claude chat interface...you can use Cursor Composer + Claude for the file organization step and keep everything in the IDE and get the same result!
Great workflow! I managed to create an MVP from scratch. I have a question that I’d appreciate your input on, if you’ve already encountered this or have an idea on how to address it. The flow you presented was V0 -> Claude -> Cursor, but have you explored how to iterate back to V0 at a later stage? I had my basic design ready, with components separated, and I started working with Cursor, enhancing the project with Claude and other AIs. Eventually, I wanted to go back to V0 to make some modifications, enhancements, and add a new section to the landing page, among other updates, and continue using its capabilities on my web app. However, I was unable to do so because V0 works with a standalone single file, whereas my project now consists of multiple components. I tried several methods to unify the code, but I was never able to render my (now updated) project in V0. Do you know how to address this?
Just an FYI you can do that all inside of cursor using Claude 3.5. you dont need to jump around 3 different apps. Also in my experience do one section at a time and use very descriptive prompts.
A better tip for claude: Give me the tree structure, then ask me if it it's ok. When i tell you to go for it , give me sh file to create the whole structure + the code for each file. Make sure that all files has the full codes. (Then create sh file and run it)
Hey @rasmic really nice minimalistic tutorial. Would really like to see how you do a more full functioning app. Also, what app are you using for a browser that looks like Slack and the tabs are on the left?
hey Mic thank you for the video it was really helpful, can you pleae tell me how do you have v0, claude and cursor all in the left column of your computer?
just so you know if you install the code from v0 via terminal it will download all the different components automatically and into its different directories
Great demo. Loved it. Hope you keep doing more. I was intrigued by your dev environment. Thanks for listing "Arc" in the show notes, I'll try it out. I had a couple suggestions that may be of help: 1) add Grammarly to your browser and it will automatically spell check you in real-time, no more wondering if your spelling or grammar is correct, 2) I don't think "obfuscate" applies in the context you used it here (th-cam.com/video/grc0YSEdUQY/w-d-xo.htmlsi=tlL6irYes3kBLKR2&t=733). Keep up the great work!
Bro.. I watched your podcast with greg! Was a nice watch. Have you published the small doc you were showing in that pod! Would be great for quick access.
I’m new to this. How did you fix the header at the end? Great tutorial, thanks! Also how well do you find this code to be robust to various screens/devices?
I'd love watching you build something from start to finish with no steps skipped :)
hey, but he did just that. Well he skipped the part of copy-pasting, but anyway.
Dude. First, you’re a great teacher. Second, please do a full video where you build a “proper” (full multi-page) app. Thanks!
Designer here trying to catch the wave - i like your style sir, and would love a full walkthrough series!
Thanks, will do my g
Designer here too, I am already coding my ideas hahaha
@@stanford19 What a party of designers - let's go!
Bro!!! This is exactly what I was looking for. Thank you so much for creating this video. As a full time frontend developer, I can see how useful it could be to me. And also for my side projects, this will help me get up and running quickly (that's the hard part you know, "The initial setup"). Thanks, and keep making such videos. We would love an in depth tutorial series of you making an app or saas type product using this flow. Cheers!
Well done. I appreciate your statement about not being a finished application, but rather providing a starting point. This aspect is the most frustrating for me in any stack. This is fantastic.
like if ur nice to your ai when prompting
Always great them and say thank you and goodbye. No Ouija shit, I just want them to remember I always been nice to them just in case. 😬.
I'm Barely kidding 😂
You never know man… they might end up being disgruntled employees… 😂😂 I’m very polite to them 😅
@@iAmDonH smart man
I'm nice to everything. 🕊
Someone asked why LLM hallucinates and is so convinced the info they give then is correct, I replied it's because we taught them gaslighting with reinforcement learning
the "remember app router" prompt too real.
it be forgetting sometimes lol
bro I been trying to tell chatgpt this shii for soo loong everytime when the app router was new lmaoo
😂😂😂
Awesome. You turned a simple HTML page into 20 different TS files.
😂😂
Yeah the KISS inverted now, just got to remember your versions and prevent updates, not to miss anything fundamentally prevent spaghetti code when in a lazy state. AI should be improving in background aswell along with versions.
And how long would that typically take someone? Bro I did so much shit with chatGPT it’s ridiculous.
Some people just don’t know how to leverage tools efficiently but chatGPT alone can replace humans.
I’m currently working on a program that can update its own code and continue improving itself to get better at making code.
I basically built a weaker version of copilot in less than 24 hours, let that sink in, chatGPT can manage my files by interacting with an interface that it built…
The future depends on how companies decide to proceed. They could easily fire half of their dev staff right now.
He turned a one file generation into appropriate folder structure according to best practice.
@@aaagaming2023 Subjective nonsense. For example I have a giant Elm file in one of my projects, it's organized very well and is super easy to edit and refactor with a decent editor (Vim w/ a code folding plugin). Breaking this into 20 files would add a ton of bloat and misdirection... and this is for a real app, not some marketing page.
Articulate, knowledgeable and direct. We like this.
thanks u g
bro that was not direct wtf lmao
@@Bartofii95 which bit do you think should have been shorter?
I like your realist style. Keep it up, looking forward to more videos
thank g
Bruh you’re making building ideas AND AI interaction so accessible for people! Thanks for sharing, keep doing great work 🔥
AI is still a baby. I remember just year ago i was learning context api with AI and it was struggling. Now we are already building components and much more. I am super stoked to see whats going to be next year September. Nice content Ras !
thanks for the comment my g
Hey @rasmic, I just wanted to say thank you for continuing to make content. I like the short format and how clear you are, which makes you different from other content creators. Hope to see you grow!
This is definitely the best approach Ive seen presented on how to code with this stack. Sincerely, thank you!
I really like the balance of not saying AI will replace all devs and not saying it's useless. Thanks for sharing!
Yes, it will not replace developers, it will just increase productivity by writing boring, repetitive blocks of code. Similarly, when engineering adopted CAD software, engineers didn't spend 90% of their time drawing lines on paper. This didn't decrease the number of engineers needed, it just increased the opportunity to create really complex designs.
Ras - your perspective on this is absolutely spot on. I’ve watched a ton of content about the latest in AI development tools and far too many people are coming at it from the perspective of a traditional developer. When speaking to people coming from no code or people that aren’t technical at all, most of the content fails to strike the right note with this latter audience. I think he did a great job speaking to the non-technical audience here.
Awesome. Small note: It might not replace developers (I am one too) but what I am seeing in the market is that the open listings for freelancers are drying up quickly and companies are re-evaluating new hires. When the current flock of developers can 2x, 5x, or even 10x- supported by the organization- new developers are not needed as much anymore. Which can cause burnout, stress and dev. fatigue for current developers. You might be able to go 5x, but your organisation is going to start expecting it soon enough. Keep up the awesome work!
I'm only 3mins into this video and I already liked and subscribed. As a no-coder/low-coder this is exactly the content and guidance I'm looking for. I'll be very keen to see a further fuller tutorial also.
These are useful for repetative tasks like making these static pages and stuff, helps speed up the process and focus on other important tasks in the codebase
facts
this was super helpul. i've been wanting to find tools like this to get started quickly with frontend stuff. would love to see a full tutorial including backend too!
You are absolutely on the money! I’ve been using cursor for a couple of weeks, before that I was just using GPT4. Today, cursor was getting confused with crewai project templates using poetry, along with other python files I had in the project. I finally had to step in and fix it. I was using Claude sonnet 3.5 with cursor, I wonder if using OpenAI I would’ve been better.
I must say: I love your workflow. I have been trying to build a full stack app using different AI models, though it has been helpful so far but not perfect as I have to keep going back and forth with debugging but I’m definitely going to try this out!
Thanks for sharing!
One thing I do to avoid copy/paste, I just ask claude to generate a bash script for the generated files with thier contents, then I execute it in the project dir
"Always be nice to your AI"
You are absolutely correct.
Thank you brother, I honestly can't believe I'm watching this for free. I'm a complete newbie in cursor and v0, but I can follow this quite easily.
Please teach us how to build a fullstack app using this framework. You’re my favorite teacher already
Bro you are about to blow up. thanks for creating this content
Buddy this is amazing! I watched you in a podcast with Greg Isenberg and as a product designer who wants to learn about code and leverage the AI this blows my mind.
If possible, I would love to see this framework you are using but in a case where you want to build an iOS app in Swift.
Keep on great work ❤🔥
I like the change in tone after the header problem
I’m curious why not just paste the v0 right into cursor since it uses Claude?
This might just be me but i find Claude itself is a lot smarter than cursor + Claude. So i just default to Claude for some things
do you suggest to pay for a Claude pro account and use Opus or just stick to the free one with Sonnet 3.5?
I ask because already pay for Cursor, v0 and GPT 😂
Thanks for asking this question as I had the same when I watched this video and thanks for answering as well..I guess I got the recipe to build great products!
Great video. Your last part of the video about the developer mindset is spot on! Subbed!
Just stumbled on your video and I must congratulate you! Well explained and appreciate the time you've spent in showing your workflow. Instant sub!
thanks! for sure would love a video on more complex web apps. for some inspiration, maybe show the process of creating components in v0, organizing in Claude or ChatGPT, adding the components to Cursor, adding a database, connecting some workflows, showing how two different user types with two different interfaces can share that database, deploying the app somewhere and then making edits/debugging from there.
Good stuff and you had me from... "Always be nice to your AI" Cheers!
You a legend fr ong No Cap No Kizzy Let’s Get This Bread gang 🙌🤑
appreciate u gang
Great video. I would want to see more videos about creating pages and routing with cursor.
more v0 -> claude -> cursor projects plz! lets get crazy
will do my g
This is awesome, I use the same framework, would love to see you Implement a full tutorial with it. Thanks.
You're awesome, my friend! Keep up the great work!
Never used cursor AI before but will look into it. Did you see Claude Dev already. Looks similar to Cursor AI. Besides that we have pretty much the same flow. Also glad to see someone trying to place AI correctly. AI will replace us eventually, but for now it is a very strong copilot everyone should have
Nice video man this is my framework as well + o1-preview for document generation
Really interesting video. I was looking for something like this. I hope you find the time to make a more complete guide on how to build a complete web app!
will do my g
Ras is a wise man! Love your content and insights 👍
wow, thank you so much this is amazing!!!!!! Thank you for putting int he time to show this workflow you have. It would be amazing to see how you go from scratch too a fully shipped application.
Thanks man. I like the way you break down how to use various tools.
Congratulations bro for your videos. Greetings from Spain
Timestamps (Powered by Merlin AI)
00:03 - AI tools are not replacing developers, but can be a helpful co-pilot in development.
01:29 - Utilizing V0, Claude AI, and Cursor AI for efficient web app development
02:49 - Building a notion style landing page using V0, Claude AI & Cursor AI.
04:44 - Enhancing web app components for speed and aesthetics
06:38 - Using theme provider for light and dark mode
08:34 - Generating folder structure and creating files using Composer in web app development
10:18 - Fixing the header alignment issue on the landing page
12:20 - AI can help speed up UI development process
On point . Waiting for more tutorials like this.
Thanks for this - i believe this workflow will all come together when either of vercel or replit brings this all together with agents to provide a end to end experience. also we need to think of databases , security, scalability and deployment of these as we move beyond POCs
Nice work brother! End to End deep tutorial for newbie’s like me will be very helpful. Keep it going!
that's coming
Love the tutorial. Continue rocking and sharing man
V0 + shadcn cli + cursor = game changer!!
Looking forward to watching the full tutorial.
Great vid bro. I will try this soon!
thank u g, have fun
That was a perfect video about using tools i wait for next video which you create whole application :D
will do g
great ... i would love to see the full scale backend design as well
Wow, that's inspiring. Like your approach.
i appreciate that homie
I would like to see what you do after. getting the website layout is simple enough - but what about backend, database, and hosting
After writing the whole code in chat bot ask the AI this "can you write it in a bashcript so that i can easily copy it to my desktop"
It will significantly reduce the work load to get the files and code in your PC.
ohh that's smart
U' re my new best friend! Thanks from Argentina, Bro!
dope vid again my dude!
Appreciate your real perspective,
and this vid was like perfect timing,
peace! from da homie!👊
appreciate u gangy!!!
Well done! As Cursor is also using Claude, why do you need to use the extra step of asking Claude (native website) for generating code and past into Cursor? Just curious. Thanks.
wonderful found! thank you so much im building a saas product and this is incredible useful!
Man, you’re the best. Keep it up!!!
I appreciate you gang
We need a long ass 2-4 hour video of a complete walk through building a complex app.
Dope video man! Super valuable. Found you from Greg's channel. Quick question - what screen recording app are you using? How are you doing the zoom ins and outs - is that part of the recording software, or are you keyframing it in post production software i.e. Premiere Pro?
The problem is all examples people demonstrating on TH-cam is very general purpose, very simple kind of apps/websites. The real use cases or edge cases are the ones we need to see. Maintaining a real life project, adding new features, building a complex type of SaaS etc. A pipeline that works in real life.
Well done for taking the hype out of the current buzz. I've found that ai claude and GPT will get you so far, then You come up against a problem and no matter how many times you prompt it, it just won't be able to solve that problem. And then, if you're not a developer, you're gonna struggle to try and get past that hurdle.
Ras im from Argentina, thanks for all the info, great channel and even greater human!
love my g, thank u
Claude is the best at coding tasks. Nice video!
for sure!! thanks for watching
Great video and really useful for a novice like me. Do i need the upgrade or will the free plan serve me well to start with ?
great idea to use Claude organize file structures :) It's more efficient than doing it in cursor. thanks.
facts my g
Don't understand this - couldn't composer take the code from V0 and create the pages without all the copy pasta??
@@nimblename composer be dumb sometimes imo plus don't wanna max the cursor calls
Hey Ras! Your videos are awesome. Just stumbled upon your channel.
What are you using to record your videos?
Cheers!
Very useful and intriguing tutorial😂 THANKS SO MUCH
what tool are you using for screen recording? The zooming and mouse following effects look really dope
are you doing this whole thing on arc? between v0 and claude
how are you able to swipe screens like that? between the IDE and the browser arc
awesome video looks like the ux/ui i’m looking for thank you
Not sure why you're using the Claude chat interface...you can use Cursor Composer + Claude for the file organization step and keep everything in the IDE and get the same result!
Great workflow! I managed to create an MVP from scratch.
I have a question that I’d appreciate your input on, if you’ve already encountered this or have an idea on how to address it. The flow you presented was V0 -> Claude -> Cursor, but have you explored how to iterate back to V0 at a later stage?
I had my basic design ready, with components separated, and I started working with Cursor, enhancing the project with Claude and other AIs. Eventually, I wanted to go back to V0 to make some modifications, enhancements, and add a new section to the landing page, among other updates, and continue using its capabilities on my web app. However, I was unable to do so because V0 works with a standalone single file, whereas my project now consists of multiple components. I tried several methods to unify the code, but I was never able to render my (now updated) project in V0.
Do you know how to address this?
Just an FYI you can do that all inside of cursor using Claude 3.5. you dont need to jump around 3 different apps. Also in my experience do one section at a time and use very descriptive prompts.
imo this way i been getting better results
@@rasmic ok
Love the process! Thanks for sharing.
Really interesting topic brother. I subscribed.
Nice Video mate. Subscribed.
thanks broski!!
A better tip for claude:
Give me the tree structure, then ask me if it it's ok.
When i tell you to go for it , give me sh file to create the whole structure + the code for each file. Make sure that all files has the full codes.
(Then create sh file and run it)
Hey @rasmic really nice minimalistic tutorial. Would really like to see how you do a more full functioning app.
Also, what app are you using for a browser that looks like Slack and the tabs are on the left?
hey Mic thank you for the video it was really helpful, can you pleae tell me how do you have v0, claude and cursor all in the left column of your computer?
Hey Ras, awesome video i reccomend u to let ChatGPT-4 handle your prompts, who better to chat up an AI than another AI
just so you know if you install the code from v0 via terminal it will download all the different components automatically and into its different directories
beautiful stuff, how do you deal with limit on claude and v0?
how much all ur ai stuff cost.
I've seen your workflow, it's great! Thanks!
Fire vid my boy keep them coming 🔥🔥
thanks g
Great demo. Loved it. Hope you keep doing more. I was intrigued by your dev environment. Thanks for listing "Arc" in the show notes, I'll try it out. I had a couple suggestions that may be of help: 1) add Grammarly to your browser and it will automatically spell check you in real-time, no more wondering if your spelling or grammar is correct, 2) I don't think "obfuscate" applies in the context you used it here (th-cam.com/video/grc0YSEdUQY/w-d-xo.htmlsi=tlL6irYes3kBLKR2&t=733). Keep up the great work!
Non-tech here: why the need of separate components per page section? Is it to call and reutilize in different pages later on?
Yes, they are what is called Modular. Meaning you can reuse them like you said.
@@tuckercoffey2780 thanks!
Your content it excellent! Provides great value.
Bro.. I watched your podcast with greg! Was a nice watch. Have you published the small doc you were showing in that pod! Would be great for quick access.
nice workflow! what browser do you use to show this?
I’m new to this. How did you fix the header at the end? Great tutorial, thanks!
Also how well do you find this code to be robust to various screens/devices?
i've noticed v0 is indeed much superior and great to start with
I like that flow
thanks g
how did you go straight from vo to claude in the same window? is that a custom app?
Looking forward for the tutorial of full app development.