Vercel's New AI Writes Surprisingly Good Code
HTML-код
- Опубликовано: 11 окт 2024
- Vercel's new V0.dev launch blows me away. I've seen SO MANY AI tools for code stuff and overall I haven't been impressed. This one though...man, I'm hyped. Can't believe they got ShadCN/ShadUI and Tailwind working perfectly too 😳
Keywords REACT TAILWIND COMPONENTS HTML MIDJOURNEY CODE GENERATION
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4se0n3 for the awesome edit 🙏 
Наука
hi, I'm the guy writing the code at v0, it's not ai. please stop asking for todo list apps, that's 60% of the requests so far
Just tried it, its awesome
the title says it is AI
@@DiogoSilva-xx8nz my friends call me Al, Weird Al
Code Converter is the best one
Instructions unclear, I now have a to-do list of to-do lists of notes that enclose a weather app. How do fix?😢
I hope tools like this make it more fun to build personal websites and we all just do that instead of social media
Complexity is not in the base, a lot of non-coders already use wordpress or boilerplate code for literally decades. The complexity is and always has been the specific things. All my chatGPT prompts fail where juniors ALSO fail and come to me for irl for help, which are always the very specific things. ChatGPT also fails almost all my codewars prompts, the prompts that my basic human brain could easily handly, so it's not even close yet. Even when I give an accepted solution of a codewar problem and ask for a simple refactor or small change in the assignment it utterly fails
No this will just be another tool to build medium quality cookie cutter no personality brands/websites, just like AI is doing anywhere. AI is not creative, it's only doing what has been done in the past.
for most people, personal websites don't bring money, working on other clients projects does
@@mskzzzi don't think AI code really has much to do with the outcome of the product tbh. At least in my opinion, it accomplishes same thing frontend component libraries like shadcn do; it makes it slightly quicker to get things out there and takes care of a lot of stuff you already know how to do.
A complex code base built by someone using AI generated code (when the person in question has no technical understanding of programmimg) will inevitably fall apart.
how naive can you be
4:50 would strongly advise being polite to AI for when it gains sentience and the singularity happens.
5:00 he does say please 🙏
Every time I use chatgpt, I speak to it with this type of caution 😅
Polite is inferred from an emotional state, noone in business cares about politeness, only the feely humans do, they already stay poor and weak when working for humans. Humans already accept weak living standards and working for a boss, so for these people nothing really changes, they already die without owning as much as a home or more than 1 car and have accepted this TODAY already
im fucked up with chatGPT then lol
I'm really pumped about this! Thanks for showing. I really like building fullstack apps, but I feel like the most tedious portion for me is always the UI (though design systems like Tailwind have helped a bunch in that regard). Even still, I'm so stoked; even got a couple devs at my company to sign up for the waitlist with me! :)
I have a hard enough time debugging crappy human code, now I need to worry about hundreds of lines of hallucinating AI code
That's not how this works at all
As long as you can reasonably direct the prompts to a specific purpose using information that is embedded in the model (i.e. something the model learned), you can pretty much fully mitigate "hallucinations" - which is still infinitely easier to debug than often minuscule errors. Never mind that you can always just use it as a second step to making sense of code, including its own; if you think AI code is difficult to handle or somehow even remotely worse than man-made stuff, you really haven't been paying attention for the better part of the last 12 months. Use it, learn that you were wrong about it, and put your knee-jerk reaction to it in the past.
Or don't, maybe you just really like doing it the hard way, what do I know.
@@minhuang8848 It's a useful tool for sure, but gpt absolutely does "hallucinate" code and even make up plausible sounding reasons for what it wrote, all the while being completely wrong. I've had it acknowledge specific mistakes, then retype the same code verbatim, then write a specious story about how it's now fixed. It may be helpful for mocking things up but I'd be wary of counting on gpt at this point. Little bugs you miss can build up and cost more time in the long run.
So be smart and learn how to create a tech lead AI to solve the worker AI's problem
@@minhuang8848did you even understand what OP wrote ?
He’s talking about all people pumping out AI code for us to fix
And u know why I call that job security
Use a second AI to debug hallucinated code of the first AI
I love that this video is not edited an you can see how this tool really works
It's going to get to the point where only AI will be able to debug and fix other AI's code.
I don't think there will be a need for code per se, you could just input stuff to an AI and it can take care of the whole shebang without showing a single line of code, deploy itself, fix itself, etc.
Theo pumping out videos like crazy. I’m here for it!
Seems like this is really helpful if you want to capture a starting point using familiar tools & relatively safe implementation.
seeing this along with other AI tools just scares the shit out of me, its magical ngl.
if you treate it like a copilot it's super powerful. generate a skeleton and change the details yourself
Imagine an AI tool that creates designs in figma based on prompts, then converts them into Webflow for the outer shell and Bubble for the inner, and finally hosts them. You simply explain the app's functionality, and it determines the API, server capacity, database, and everything else. It's like Alladin's jinni is at work.
Amazing video Theo!
Frontend developers will get replaced... With ex-frontend developers who now use AI tools 😅 But for real, hard things will remain hard to do and these tools will just help us do the small and easy things faster.
The goal is to replace devs, not help them. From a business standpoint we are a money sink.
@@Ironicationthe goal is not to replace devs? The goal is to enhance productivity and make programming more efficient. If the side effect is fewer devs, that doesn't mean the aim was to replace devs.
@@chris94kennedy The only goal is to minimize the costs and maximize the profits.
Backend devs are also gonna get replaced. Remember, an AGI is an AI that can do anything a human can do, which we’ll have in about 3-5 years. Your not anything special
if your are replaced by v0 or any other basic ai code helper, your just not a great dev overall
Thanks for the work host. Much appreciated….
Reminds me of Photoshop AI's style of direct commands applied to specific things. This is definitely useful for quick and simple web design, but I hope it doesn't cause people to trust it too much
yep
just a toy
I'm so hyped for this, I wanted to do a side project similar to this when the chatgpt api came out, glad someone is doing a full fledged project out of it. I will be using it heavily if it is even slightly good.
That looks amazing! Just joined the waitlist
Ohh you were talking about this ai in prime's chat.
I have signed up to the waiting list. This looks awesome! (I hate styling things)
great, now we only need a tool to convert those to svelte components
You misspelled HTMX.
I came to check if my work is still safe, it is still safe
When ChatGPT became huge, I was telling people that the future of UI would be freeform text input instead of clicking buttons, tabs, sliders and boxes.
Instead of managing a dashboard by picking a date range and clicking a thing, you just type what you want and the system sets everything to that. This whole "code generation" is cool for development, but the real use case will end up being in the user end.
The writer of Star Trek told people some 50 years ago, that the future is just asking for a drink and it will materialized in front of you, calling a doctor, and a holographic doctor appears in front of you healing wounds just by pointing a phone like device to a wound. They also walk around with tablets when working, and use bluetooth like devices to communicate
The newer Star trek shows actually have "Adaptive interfacing", you just put your hands in front of the control panel and nanobots form around your hands, being calibrated as you move your hands to adjust sensitivity and directional range directly related to your muscles.
Telling how things will be is easy, and every sci-fi writer already came up with each idea before you or me were born, it's creating the idea in real life the only thing that people *really* care about
Then again, clicking a button is faster and easier than typing "generate invoice"
@@flipperiflop It doesn't have to literally be text input. The endgame would be voice commands i guess.
@@flipperiflop and thinking it is faster than that saying it or typing it. Makes me think of the "pupil dilation click" they are building into Apple Vision
TailwindCSS has a 950 color preset, so a darker blue is possible e.g. bg-blue-950 :)
This is God tier sheet
When ChatGPT came out I could only think of the endless integration possibilities. And that's happening now,
First FlutterFlow and now this damn, the future is here.
Ofc it does, it's Verchel.
having this tool it's just useful for creating small application and 100% from scratch. So it won't help anyone with already started project (unless it's shadcn/Radix), but it's fun tho
I am not worried about losing my job, it just sucks how ai is ruining the fun of coding, now you either have to rely on it or get left behind.
All we can do is enjoy it while it lasts and be thankful we got to experience pre-prompt-engineering :)
Rely on AI, one day will be hyper productive, the next will be a wild goose chase. I’ve notice the visual aspect in ChatGPT is horrible, it codes well or misses, but the visual aspect of things are hard for it to comprehend. It doesn’t have eyes. You will learn as you correct codes. Some days you will get exact code as needed.
“Not bad meaning bad, but bad meaning good” RunDMC
How do you teach that to AI?
"i am excited for the news" proceeds to show how we lose our jibs
He is a business owner first and developer second. Makes sense that he would be exited.
@@bruv1029 Exactly. He already bragged about how he does not need to hire more devs thanks to Vercel's services. lol
What a time to learn web dev. So many excitiing innovations!!!!
We are in the generation of small teams doing enterprise stuff. Unless we loose a day fighting with AI. This window will last 3-5 years. Then the templates that fit your entity will be refined and available for most, they kinda are. Need a thread, need a cart, need a streaming site, etc …still takes knowledge of terms and the basics how things work.
AI will not replace me, AI will not replace me, AI WILL NOT REPLACE ME!!! AAAAAHHH 😭😭😭
3:50 i swear to god i was literally thinking "just do cit" 💀
the fact that at the beginning it couldn't even make a border radius was hilarious.
Originally thought that the project looked cool but nothing that copilot couldn’t do….. but DAAAAAAMN. 😱 I can see myself letting clients prototype the UI by themselves. They literally ask for those prompts word for word. If v0 works that well, I can pick up usable code to work with, not some pipe dream from figma. Should really speed up delivering projects.
This is extremely useful as a back end dev who HATES HTML/CSS. But I hate React more than writing Svelte myself so won't be using it until Svelte is well supported
Stay in back end
Does this mean in the upcoming years frontend developers would become obsolete?
they still exist?
If it can make a user interface then it can make a REST API or a Database. I think this means all programmers need to start thinking of AI as another tool in the toolbelt.
Yes
as a frontend developer i'm already obsolete, and was even before all this appeared.
@@buc991 In what sense are they obsolete? (genuine question, not sarcastic) BTW, I am not a frontend (I was a designer in the very old days).
4:48, one of the first to be deceased on the AI revolution. heh
dark mode... why on earth are you giving my eyes sunburn?
I’d love to see this for Vue and Vuetify / many other frameworks.
I succesfully made chatGPT build about 10 MVP apps with idealized specs and 10 features, but I literally have a 0% succesrate on bigger codebases (say at least 200k+ lines) at my job that go through multiple layers of design/api's and whatnot. It also failed 100% of all my codewars problems, which often have feature requests as "poor as product owners" irl come to you with. Not to mention if it succeeded after I simplified the codewars problem, changing the scope in even the most basic ways made it fail again, something which is very common in my real life job (scope change after an initial solution was done) .
Before we walk, we crawl.
Learn to prompt better.
For real. Break down big and complex into smaller and simpler parts, and let your AI tools assist you at that level.
3:49 Do Alt+ Shift + → → → to select blocks/tags. Watch Vim users look around nervously.
I hope they don't make it too expensive after the closed beta
I can't see how it's going to be useful for real projects, as the AI need to have deep familiarity with the brand and the existing design system
changing colors and adding images is monkey work compared to everything the AI has already done
@@phillipanselmo8540 Brand is not just colors
come on use your imagination a little lol. LLM + image generation + this + 100M token context window
Anyone want to throw some pricing guesses?
That's awesome !
Taste and design skills become SO much more important now
Yes the irony where every creative MBA is laughed at, will now be revered for "human design" , because humans often care not most about quality, but about authenticity, which AI by it's very nature cannot do. It's why you still prefer pizza in Italy instead of your non-italian local Italian restaurant, even though they look sound and smell Italian, just like chatGPT, very close. It can do the 99% but we care for the last 1% more often than the base 99%
@@xdarrenx sorry, what does MBA mean?
@@xdarrenx Great point actually
@@xdarrenx nah corporations will be using the "cutting edge authenticity models" hahaha
@@nuvotion-live But u have things in Italy like "DOP" or greek "feta" or french "champagne" . Tech changes, but people often don't. There will be a lot of people also lobbying for certification of proofs, that thigns are authentic, with many lawyers with their own AI army countering it.
What about making a SearchBar that pops a Results with Result components nested whenever someone types inside SearchBar?
Of course it only generates f-ing REACT components
Tailwind nonetheless 🤢🤢
My job is screwed but this is too cool
What is it using for styling aside from classes? Can it use EmotionJS for instance?
Here it is
"It's AI you don't have to be polite"
my paranoia : 📈
Yes people have heard of MJ 😂. Oh man dude. But seriously anything literally any fine tuned ML model works surprisingly well. It’s just the issue with OpenAI being as the only AI model. It’s generic thus giving generic output.
Vercels doesn’t just rely on ai however. The actual product itself does most of the legwork by using very specific regex functions to recursively rewrite the next prompt.
I feel bad for FE devs. Time to start shilling for C/Low Level Programming.
This Shayt is scary; it kicked my but out of my scepticism.
Nice. I dont need my frontend friends anymore 🤣
In my experience, code generated by AI is usually “over-engineered” and actively “fights” attempts to simplify.
In other words, it can get really complex (and hard to troubleshoot) real fast, once you go beyond the trivial examples.
yeah but thats why you run it through a ai that simplifys it duh
@@emeraldbonsai it is much faster to write the code yourself
@@Guccifer808 Yeah, I've noticed that Copilot mostly gets in the way, for me at least. It's still useful but in most cases ChatGPT just helps me with idea generation and not the actual code.
Agreed. That’s why it should be modular. Each box(div) or tag, can be removed or manipulated. Appending the body or deleting from the body is the way to go. Systems can handle the css inline. It’s 2023. Especially for most simple projects (which most are working on). I agree you’re hired. Guess you must learn React to fix errors or styles. I’d even go as far as including the JS in the divs , though that might get messy depending on the length. I need a team, new bees to write simple css styles for modules. Then a community shares modules. What’s left a heading that tilts? A image in a div with a paragraph and two descriptors? Look at all css frameworks (most) there’s not much there . Why because it’s simple headings, navigation , footers , buttons and forms. Divs or tags with children and there styles is all it is and has been. This hasn’t change even novelty css is not used due to screen real estate, eventually returning to the same look for most sites. Default. So best we can do is modulate. Join my army… new beees welcome. I just need divs from designers though most styles are done, a circle image left , title below, paragraph, small icons to the left, now trap it in a div , include inline css. Now the DOM can add or remove the option. JOIN MY ARMY.
Front end developers are going to end up being replaced. We are too focused on React, too arrogant in our thought and too nerdy to see what these corporations are leading us to like sheep.
Plus one,
I don't know what is the hype for? All white collars will be replaced in 5-10 years
@@palyanytsia Nah. Most other professions will protect themselves with regulations and laws. Only IT will be affected in the end.
copilot on vscode helps a lot and similar too, not that fancy
it shouldve been a fish icon everyone knows bees are fish
When is the public release?
It looks promising. But can it do regular CSS? Non-shad UI?
Why is that ?
@@brayanjpm why is what?
Tailwind is regular css, "absolute" is .absolute { position: absolute;}
@@SandraWantsCoke In that sense sure, yes. What I'm trying to get to is, it would be nice to be able to use this AI without tailwind. e.g. not everyone uses tailwind
ive seen elements being left over when using chatGPT too
Somehow my room also gets darker when I play with AI.
I don't care what people say, ai is coming to take everyone's jobs... eventually, just accept it and get ready to be laid off
Alot of people seem happy about beight kosing their jobs and being homeless.Good for Business owners and bad for their employees. Well that is the game.
need svelte and vue support next :p
Is is amazing. A way to create custom templates for webapps and sites
this is a really cool project, I also feel validated as I did a hackathon not too long ago where my team worked on the project that had the exact same idea but ofcourse our execution was nowhere near this good😂
I wonder how it handle margins :D
will this affect the frontend jobs out there?
Hehe good luck with maintaining such code on commercial level
I talk to chat gpt like a REAL person folks it's purpose is to talk my a like person you get a completely diff experience. It can manage all my projects like it was a real person
@@nateman10 It alive but not in the same way we are. It needs to talk to get the best out of it. Get 4.0 and ask it to act as your product manager. It can make choices and give you the reasons why and even in input and come to add your input. Don't use it for coding. Use it for saving time and dining small things. And figuring out how to build apps the motions the parts.
and what about the api server side?
"it's not some package I'm depending on", yeah, uhm, tailwind, ugh 😔
This is really cool, I hope I get to try it soon 🤠
4:48 you don't need to be polite to AI
5:02 ...please remove...
😂
Goodbye frontend developer career, Hello AI prompter career...
That career lasts as long as it takes for the LLM to be trained on it lol
After six months of AI assist I know it’s not taking my job. It’s job is more at risk. This is painful to watch
What is at risk?
Explain
How does one get access to this?
Looks cool...
does something like this exist for non-react things?
Will v0 support sveltekit code?
That's dope
whose code has this been trained on?
yay, the future is debugging horrific AI generated code 🤡
Which is pretty much the difference between junior/senior already, and is why seniors can pick up a lot of jobs already and junior's complain they can't get their foot in the door anywhere
@@xdarrenxSeniors are also not that far off from getting replaced. Compared to juniors, seniors are not THAT much more skilled. AI though will be many many many times more skilled, less bugs, cheaper, infinitely faster. Yea seniors are also going down the drain
@@Wanderer2035 This is what I hope for, it means I can replace my boss with myself and let the AI develop my company's software, since I have much cooler ideas than my boss, but I don't have the capital to pay devs myself. Free(ish) devs would be amazing
Don't worry, you won't have to debug it, the AI will. (and the horror starts setting in)
Haha, you're taking the piss, right? Nah man, there's no way they didn't put some money into your pocket for this one Theo. 5:10, the code is spaghetti and you didn't even achieve anything.
Yo, my< says it’s slow, and copying these codes would be faster. I’m not sold but I’ll sign the waiting list . Framework on frameworks. Why not just generate code without the extra layer dependencies. If we were adding databases (maybe it does) it would be more impressive. So you must learn to prompt with it, then already know React to correct errors or styles. Modular stacking should be as easy as pasting (appending) the next child in the body. I might even go as far as just including in-line css and JS in every module (div or tag] added. Where’s the ChatGPT option to write content? Each module should be able to write or allow copying paragraphs into module. My
I mean for now it's using our slow human tools. I think computing down to the hardware is going to become a black box just like a neural network
Well be willing to try this once they make it an option to substitute that Tailwind with pure CSS or anything beside Tailwind
Why though so negative about tailwind? You can try it not in an existing project
Theo you have twelve lips and two tongues
It is slow enough that it makes me think they use openai to generate this, that is bad
Other than that is cool because it embraces the fact that we humans are the ones that do the real work
I got deprecated
I have something faster , modular, and intuitive to noncoders. We can include the ChatGPT API to write the bla bla bla content. Websites are easy boxes stacked , modular is the way to go. Responsiveness is easy. I need a team to do simple css. To create a stack of divs or tags as the collection. My framework is based on JS DOM manipulation so how do you protect the code, maybe an app with a stripped browser? JS is not proprietary. Anyways anyone want to build simple css boxes to add to the modules, get at me.
ChatGPT provides similar results tho
good news = your job is going away
It looks like this is quite a ways away from being something I would use. I'd rather just shit out some react components myself and have an inherent knowledge of why my component looks like uninspired garbage instead of having to comb through some AI hallucinations to figure out why it's component looks like uninspired garbage
is this sponsored
It's faster to code...
Doing css styling with ai is slow😂
1st nah!