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

[@tyrellshawn]

Shoutout the KZbin 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!

[@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.

[@ra_XOr]

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]

Thanks for watching!

[@nastastic]

What spec machine you running ollama locally?

[@DevelopersDigest]

@@nastastic i use a m3 pro 18gb

[@ra_XOr]

@@nastastic I use Ryzen 5800x, 48 GB ram and RTX 3080 8gb Vram.

[@nichtverstehen2045]

it'd take less time to write nice and maintainable jsx/css than to make this thing to do what i really want. and good luck with supporting what it generates.

[@RyseupSolutions]

Wow - this is really great for daily use and even debugging!

[@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!

[@osks]

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

[@SHISUI1185]

So basically a really good wireframe app

[@Endrit719]

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

[@angelova.nikoleta.design]

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

[@DanielMartínezRomero-s3m]

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

[@smnomad9276]

Why would you need rag?

[@DanielMartínezRomero-s3m]

@@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]

@@DanielMartínezRomero-s3m 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.

[@Lakshandesilva112]

yep i was waiting for this.

[@fotoflo]

Incredible.

[@dadlord689]

At this point with something like Flutter it is quite intuitive to create UI. And it supports hot reload. So technically it is even better then using Figma (I would dare to say).

[@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

[@TheGenerationGapPodcast]

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

[@DevelopersDigest]

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

[@RobBrogan]

If only it could connect to a design system library!

[@DevelopersDigest]

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

[@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...

[@FilterChain]

it wont get there on both ends as there is high specificity in those designs aka not enough training data

[@miettoisdev]

amazing stuff!!!

[@LiamKarlMitchell]

Amazing, and it was only a matter of time.

[@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

[@egonkirchof]

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]

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

[@epicvillain8308]

Use Mistral!

[@marcelbricman]

wow who would ever want to use this?

[@llachlann]

This is cool, but it honestly seems easier just writing the HTML/CSS than messing around with the prompts (at least for now)

[@FilterChain]

not only that you can see the code is basic at best

[@HunterMayer]

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...

[@mrgyani]

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

[@carstenkampe]

Anyone able to get openrouter to work?

[@Indy-Vidual]

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?

[@floyd1411]

hiya, ammm quick question tho, to get open ai API key, you need to pay for it right?

[@ToddDunning]

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

[@JoeSmith-kn5wo]

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

[@ilaydelrey3122]

the video thumbnail is misleading :D

[@DevelopersDigest]

Sorry 😞! Wasn’t my intention 🙂

[@shahabgohar3350]

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

[@Ataraxient]

what is the difference with storybook

[@vercieli]

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

[@justanaveragebalkan]

Your so not a robot.

[@vercieli]

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

[@alebud1403]

​@@vercieliprobably was intending you are a bot

[@thunkin-ai]

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

[@WyzrdCat]

Can it do stuff that's not hideous?

[@DevelopersDigest]

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

[@VEC7ORlt]

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

[@smickandily]

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.

[@RitikanKhan]

done only in MAC ?

[@aaronward9140]

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

[@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-]

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

[@nijolas.wilson]

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]

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

[@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]

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

[@usernamehandle]

@@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]

@@usernamehandle AI is not automation.

[@usernamehandle]

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

[@ErikLandvall]

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

[@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)

[@o__sama]

sure typing "i want placeholder to be hello" and waiting for the gods to respond is faster that typing placeholder="hello", same for the margins, a proficient developer would be faster and more accurate. and for the "drafts" like generate a landing page, I mean google around free tempaltes and copy them, you'll get the look you want easier. People just want to use LLMs so bad it is laughable.

[@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

[@DanielMartínezRomero-s3m]

what is the state of the art acoording to you hahahaha

[@BrutalStrike2]

Gptos

[@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.

[@TheGenerationGapPodcast]

Why show some other paid business mentioning full feature. Snake

[@DevelopersDigest]

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.

[@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]

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.

[@realityengine]

This seems useless for a professional developer. Waste of time

[@jd2161]

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

[@realityengine]

@@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.

[@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...

[@curtisnewton895]

looks weak , not really impressive