OpenUI: Simply Imagine Your Interface, and See It Rendered in Real-Time

Подписаться 13 тыс.

Просмотров 161 тыс.

50% 1

Exploring Open UI
This video provides a comprehensive overview of Open UI, an open source project akin to Versal's V0 product, offering a visual interface for generating web design elements using Tailwind classes via user commands and HTML. The project, created by Chris van Pelt, is lauded for its impressiveness as a solo developer's work and is available on GitHub. The video also demonstrates the project's features, including creating web elements from natural language inputs and screenshots, toggling between GPT-4 and GPT-3.5 models for faster processing, and the capability to generate responsive designs for multiple device sizes. The tool supports exporting designs as JSX or HTML and offers a seamless experience for web developers looking to automate and streamline their design process. The video encourages viewers to explore Open UI, experiment with its features, and consider its potential applications in various projects.
00:00 Introduction to Open UI: The Open Source Project Revolutionizing Web Design
00:57 Shoutout to the Creator and How to Get Started
01:33 Exploring Open UI's Features and Capabilities
03:36 The Power of GPT Models in Web Development
05:29 Sharing, Downloading, and Converting Code with Ease
06:26 The Future of Web Development with LLMs and Open UI
07:26 Final Thoughts and Encouragement to Explore Open UI
Repo: github.com/wandb/openui

Хобби

Опубликовано:

20 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 114

@tyrellshawn Месяц назад

Shoutout the RU-vid algorithm for showing me this

@berniesutton7277 Месяц назад

Your 'go ahead" count is through the roof

@DevelopersDigest Месяц назад

This is helpful feedback - thank you.

@hanpham5790 Месяц назад

Great content! Incredible how this is open-source and started by a developer

@DevelopersDigest Месяц назад

Couldn't agree more!

@osks Месяц назад

For a nincompoop like me - very useful! Well done!

@stonedizzleful Месяц назад

Wow this is impressive. I always get so bored at doing front end stuff. Something like this for flutter or react native would be rad.

@angelova.nikoleta.design Месяц назад

Love the breakdown! A bit clunky but has lots of potential.

@ra_XOr 26 дней назад

I like it the option to use Ollama backend. That avails all the open source models and make the whole setup local. Thanks for sharing such great work! 💜💜

@DevelopersDigest 26 дней назад

Thanks for watching!

@Lakshandesilva112 23 дня назад

yep i was waiting for this.

@miettoisdev 23 дня назад

amazing stuff!!!

@SHISUI1185 26 дней назад

So basically a really good wireframe app

@LiamKarlMitchell 23 дня назад

Amazing, and it was only a matter of time.

@Endrit719 Месяц назад

when it will be possible to feed designs it will be game changing

@JoeSmith-kn5wo Месяц назад

Pretty cool app. I'll have to give it a try.

@ArnaldurBjarnason Месяц назад

That description is the most AI generated thing I've read all day.

@DevelopersDigest Месяц назад

Guilty!

@DevelopersDigest Месяц назад

I often use a tool to summarize my transcript + create timestamps before posting videos!

@B_Migs Месяц назад

How many more of these “you can half ass it” A.I. tools do we need? 😂

@user-vh3vf7hc9s Месяц назад

wow its amazing. Would be cool if a rag process could be implemented in the generated ui

@smnomad9276 Месяц назад

Why would you need rag?

@user-vh3vf7hc9s Месяц назад

@@smnomad9276 What i was thinking is to inject proprietary data and perform rag so that for example if the entierity of your vectorized content is about xyz, the generative ui could pontentially fill in the components with llm inference of that data. I don't know if its very clear hahaha

@blasttrash Месяц назад

@@user-vh3vf7hc9s what would proprietary data in this case? All tailwind components are open source, all html tags are open source as per w3, all css properties are open source as per w3.

@orelhassid Месяц назад

Is there a similar tool, that is more creative? I don't need the code version just a good looking UI design that generate based my description. and I'm not talking about tools like Midjourney because the UI is too unreal. An AI tool that return a dribbble look a like design.

@AndrewMorris-wz1vq Месяц назад

It would be intersting to see a finetuned stable diffusion model based on 2d computer UIs for this use case

@DevelopersDigest Месяц назад

Really interesting use case and idea...

@Indy-Vidual 22 дня назад

Trying to use it and get a $10per month message. Since the concept is new, is there no free trial period to test it's acceptability?

@RobBrogan 28 дней назад

If only it could connect to a design system library!

@DevelopersDigest 28 дней назад

Love that idea - it would be a really great idea to explore!

@generationgap416 29 дней назад

Putting a link of the repo would have cool. Simple gestures like that will inxrease you subs. Js

@DevelopersDigest 29 дней назад

Adding now - thank you! github.com/wandb/openui

@gstreetgames2530 Месяц назад

WHY YOU NO LINK TO THE GITHUB?!

@DevelopersDigest Месяц назад

github.com/wandb/openui

@youngfinn1185 Месяц назад

@@DevelopersDigest you should add it to the description. it the first place i checked

@gstreetgames2530 Месяц назад

@@DevelopersDigest Thank you!

@Instant_Nerf Месяц назад

Why you no tell me no why

@e.x5264 Месяц назад

@@youngfinn1185how about some gratitude

@user-xg7iw7kv4o 22 дня назад

done only in MAC ?

@seanzhang3873 Месяц назад

I imagine GPT-4o is gonna make the process much faster and have better result.

@DevelopersDigest Месяц назад

Absolutely - if anyone tries with gpt4o I would love to hear the results

@mrgyani Месяц назад

I searched for 'versal vo' and found nothing. Then realized it is : Versel v0 The description has two minor spelling errors.

@Ataraxient 22 дня назад

what is the difference with storybook

@egonkirchof 7 дней назад

I do that with ChatGPT. But instead of writing it I make a drawing with a pen, take a picture of it and upload it to ChatGPT asking it to create the corresponding code.

@DevelopersDigest 8 часов назад

Yes - great way to do this. Claude’s new artifact feature I think will super charge this type of thing…

@thunken Месяц назад

I hope it didn't actually use an to add margin for mobile

@VEC7ORlt Месяц назад

See! These SaaS interfaces are dime-a-dozen - even a computer can do it!

@HunterMayer 18 дней назад

Well, I'm sure front end devs who enjoy this kind of work will disagree with me (and thats ok), BUT For those that don't enjoy this front end cruft work, like myself, I am looking forward to having the automation support for eliminating what I find unfun and tedious. I can spend more time on ux design and less on the monatony of front end web code behind. Just make it do what I want, and if I can't, then I have to question my design and/or dig into making it do what I want myself... But anything i can generate I will. Just... Trust nothing an verify. There is so many ways to do the dame thing... There is almost no right way outside of meeting the criteria of deliverables. I'm gonna save making of the artful code for the weekends... Passion/Learning projects...

@ToddDunning Месяц назад

Yeah the Vercel was not that thrilling but we all know what the future holds

@shahabgohar3350 Месяц назад

does not work correctly every time. try to build complex layout like chat app etc

@WyzrdCat 26 дней назад

Can it do stuff that's not hideous?

@DevelopersDigest 26 дней назад

Try it out! openui.fly.dev/ai/new

@lexasai Месяц назад

Im already created one on my channel using open ai but it expensive

@justanaveragebalkan Месяц назад

Your so not a robot.

@lexasai Месяц назад

@@justanaveragebalkan what do you mean is not a robot?

@alebud1403 Месяц назад

@@lexasaiprobably was intending you are a bot

@aaronward9140 Месяц назад

OpenUI, Open WebUI.. all these project names are all the same

@epicvillain8308 21 день назад

Use Mistral!

@usernamehandle Месяц назад

Love seeing my peers celebrate the quickly approaching death of our jobs and value. Great, guys.

@dieselphiend Месяц назад

That's not what's happening. These AI tools don't use themselves. It still takes a human to operate, and command them. Learn to be that human, and your job will be more secure than ever.

@RokeJulianLockhart.s13ouq 29 дней назад

boohoo. I'm a software developer. I don't cry whenever a new tool arrives.

@usernamehandle 25 дней назад

@@dieselphiend yeah because that's exactly how automation in other industries have gone: auto-manufacturing, self-serve ordering at fast-food restaurants, self-checkout at grocery stores, now AI, recently self-driving taxis. Nah lol, automation definitely hasn't driven layoffs more than they've created new jobs.

@dieselphiend 25 дней назад

@@usernamehandle AI is not automation.

@usernamehandle 25 дней назад

@@dieselphiend it literally is a form of automation, but ok dummy. keep using it.

@TheBlackGentlemanGeek Месяц назад

If someone can convince me that this is not a threat to frontend or web devs, I don't know who.

@alexwolf1031 Месяц назад

When react came out, did all html and css frontend devs panic? I truly dont understand why people think that new TOOLS will make things worse, and at the end of the road when robots do everything so we dont have to, why do people still think “oh but what about WORK?”

@DevelopersDigest Месяц назад

Maybe if there are more front-end developers and tools are easier - there will be an even further increase demand for creating frontend applications and websites?

@-Jakob- 26 дней назад

@@DevelopersDigestI think with AI in general we're gonna need less user interfaces

@nijolas.wilson 26 дней назад

Who's gonna run the tool? Tweak and fix the code? Get it and keep it running in production? Power tools don't build houses on their own, we still need builders who know what they're doing.

@_mosesb 23 дня назад

New Technology will always reduce the number of humans/effort needed for a task. It'll definitely replace some but not all.

@mukeshodhano4094 Месяц назад

is it paid or free

@sigma_z Месяц назад

It's paid free

@DevelopersDigest Месяц назад

the example is free (for now at least). if you run locally you need to use your own api key (paid)

@ErikLandvall Месяц назад

hmmm, feels like more work to do less...

@ilaydelrey3122 3 дня назад

the video thumbnail is misleading :D

@DevelopersDigest 8 часов назад

Sorry 😞! Wasn’t my intention 🙂

@BrutalStrike2 Месяц назад

Gptos

@smickandily 21 день назад

I’ve given this a shot. It’s really bad. It can barely make basic layouts. The refinement functions ignore context. Like I can select a column or piect of text and ask for changes and it either ignores my requests or it commences to change things i didn’t specify. It was a very frustrating experience. Open ui is a long way from being usable.

@nickadams2361 Месяц назад

Anyone who thinks this will be useful has not used AI in its current state extensively on frontend. 1.) you have to very clearly state what you want and provide as much context as there is complexity (that’s the same as writing code)

@nickadams2361 Месяц назад

2.) the greater the complexity the higher the diminishing returns along with your headache

@user-vh3vf7hc9s Месяц назад

what is the state of the art acoording to you hahahaha

@ihateorangecat Месяц назад

Writing UI is The Most boring part of entire work flow. Hope this is helpful.

@chickenbloodmachine Месяц назад

Most people who build terrible UIs generally think that and it usually shows in the final product😂

@hey_james Месяц назад

What the hell, this has a loooong way to go before its useful. Just image the inconsistent mess in of a ui you would end up with using thing.

@generationgap416 29 дней назад

Why show some other paid business mentioning full feature. Snake

@DevelopersDigest 29 дней назад

Within the readme even the author calls it out :) "It's like v0 but open source and not as polished 😝."

@Dom-zy1qy Месяц назад

Idk what that thing in the thumbnail was, assuming it was AI generated, but if that was supposed to be a UI design, or landing page or whatever- thats unironically the most repulsive interface ive ever seen. Gives me max levels of overstimulation & anxiety. But i guess it did something right because the entire reason i clicked on this video was to leave this comment.

@phpn99 Месяц назад

This crap is for devs who don't know the difference between UI and UX. Also, I can build this manually in a fraction of the time shown here.

@JordaanM Месяц назад

"This isn't for me, therefore it's worthless". Even if it was the case that this holds no value for you, it's poor form to refer to someone's project as "crap"

@nicholasprice5137 Месяц назад

Here’s some potential uses that your comment might not be considering: -This is an amazing tool for teaching people *how* to build UI, by letting the dev see what changes in the code when xyz update requests are made. -It’s a great proof of concept for the intersection between LLMs and what they can visualize, and also the excellent beginnings of an open source alternative to V0. -The code outputs could also eventually be used/tweaked to make custom UIs, components, or pages, *on the fly* to provide completely custom and tailored UIs to users. And importantly, UX best practices and considerations could be baked in, too. Congrats on building something interesting and creative! Coding = creating, and I appreciate the creativity on this and execution to make the concept happen! Can’t wait to support the repo :)

@blasttrash Месяц назад

aint no way you are building it in a fraction of time. it took less than 1 minute for it to generate that markup. There is no way you will be able to type all that in one minute let alone fraction of that time. Not to mention you need to memorize all tailwind css and shouldnt have to go back and forth between your IDE and tailwind documentation and your dev server demo. It would take 20-30 min to build each of these that too someone already provided you the UX. If you have to come up with figma/adobe xd comps on your own, then it will take even longer time. Now of course your code might be more better, understandable, maintainable, precise compared to the stuff generated by LLM but for quick prototyping you can generate 20-30 experiments very quickly to find inspiration or mix and match markups in your own project.

@IdoCareForPeople Месяц назад

@@blasttrash its just denial before disruption...the UI people take a lot more time than the devs.. i feel the HTMl UI writen by humans is absolete...

@realityengine Месяц назад

This seems useless for a professional developer. Waste of time

@jd2161 23 дня назад

Its almost like there are people out there that arent professional developers? Nah.. what a crazy concept!

@realityengine 23 дня назад

@@jd2161it’s almost like people want to shove ai into a project for the sake of saying it’s using ai. This is a lamer version of bootstrap. Bootstrap will do all of this and it’s more user friendly than this.

@punsmith Месяц назад

Seriously? Lost interest when JSX was included. Could we stop pretending that JSX is somehow a reasonable and good technology? Almost the entire react stack is a cumbersome, awkward mess that breaks the internet.

@mario_luis_dev Месяц назад

you sound like your wife cheated on you with some React dev..or something 🤣

@drewsepeczi Месяц назад

jsx is goated my mane; it’s called disruption for a reason, calling JSX cumbersome is like saying driving a car is cumbersome compared to riding a bike. If driving positive change to the market, making more efficient, maintainable, and scalable solutions, “breaks the internet” maybe it’s time to catch up with modern dev practices rather than clinging to outdated methods

@swampflux 26 дней назад

Finally someone else. I did jsx and tsx for 4 years and still would prefer it die a swift death. Even if it “has taken over” that doesn’t mean it should stay the dominant choice. There are better choices, we just need the React fanclub to be open to alternatives. But… this is also the wrong place to have that debate, @punsmith. Everything about this tool is generative and thus language or framework kind of becomes irrelevant. It even offers a bunch of other frameworks so I’m not sure why you came here to start a fight. But yeah now that React fanclub is going to show up to tell you you’re wrong for not being a React fan, I’m here to back you up a little bit. Back off, folks. People are allowed to not like things.