Build ENTIRE Frontends With ONE Prompt - OpenUI Tutorial

Build and iterate on the front end simply by describing what you want. No coding skills required. This is a tutorial for the OpenUI project.
Be sure to check out Pinecone for all your Vector DB needs: www.pinecone.io/
Join My Newsletter for Regular AI Updates 👇🏼
www.matthewberman.com
Need AI Consulting? 📈
forwardfuture.ai/
My Links 🔗
👉🏻 Subscribe: / @matthew_berman
👉🏻 Twitter: / matthewberman
👉🏻 Discord: / discord
👉🏻 Patreon: / matthewberman
👉🏻 Instagram: / matthewberman_ai
👉🏻 Threads: www.threads.net/@matthewberma...
Media/Sponsorship Inquiries ✅
bit.ly/44TC45V
Links:
github.com/wandb/openui
• Power Each AI Agent Wi...

[@matthew_berman]

ENTER TO WIN RABBIT R1: gleam.io/qPGLl/newsletter-signup

[@thomassynths]

wow you are really selling that hard despite the onslaught of negative reviews

[@a.ielimba78]

Don't buy a product with a promise of what it might be, people got their rabbit r1's and still not everything they expected. Just like the apple vr headset, do not buy products with a promis of what it might be.

[@jmanhype1]

can you make the second video about the backend . maybe use kiramase

[@JustLennyBenny]

Even for free I dont want it. >.>

[@howardelton6273]

Second prize is 2 RABBIT R1s :)

[@JonathanYankovich]

I’d love to hear about the limitations of these tools; often the “happy path” demos look cool, but doing anything concretely useful is impossible. (Examples: OpenDevin, Rabbot R1)

[@ktolis]

i haven't seen a worse product in years

[@brunodangelo1146]

Te best way to test the limitations is by getting your hands dirty. And also remembering that the limitations are not set just by the AI, but also by your ability to use it.

[@NimVim]

@@brunodangelo1146 In the current day and age, AI IS the limitation. You cant create anything advanced with it currently. I wish we could, but we can't just yet.

[@Leonhart_93]

What do you expect? AI hype channels can only make money if AI is hyped.

[@user-nl2kr1nk9s]

I'm thinking of this in terms of a boilerplate generator, if it can build me basic layouts and forms to spec faster than me loading and editing the contents of a static template then it is useful as far as I'm concerned.

[@DaveEtchells]

Wow, another great tool, another fantastic tutorial; I love these really practical how-to-do it vids, they’re incredibly valuable!

[@armans4494]

I really enjoy your tutorials. Thank you so much Matthew for doing these, I learn something each time.

[@suhasml]

This is unbelievable. Exactly what i was looking for. Dont get me wrong i am a programmer but frontend and design is not my cup of tea and this could be very helpful in shipping products faster!!!

[@sonny5497]

Hey Matthew, appreciate your efforts in bringing us the latest and the best AI content! liked and subbed

[@ddabo4460]

I'm a big fan. Keep doing what you are doing Matt!!!

[@thomassynths]

This looks super cool. Can't wait to see how this evolves.

[@robertgeczi]

Wow. Pretty much what I've been looking for. AI for me has been HORRIBLE with creating UI, so this is gold right here. Thanks.

[@AA-rd6nm]

Again, another awesome tutorial.. keep going, my friend...

[@aurabless7552]

This is so cool! Been taking front end web dev coursework (paid by employer) for HTML, CSS and Javascript (along with design thinking ) but this should help make the process much more intuitive :)

[@alycheikhouldsmail7576]

Really interesting, I spend a lot of time yesterday searching for something like this

[@thereal_JMT_]

looks dope thanks for sharing ❤

[@hassanahmed7326]

Really you are mad my day with this video❤, thousands of thanks not enough for you ❤❤ Really appreciate all your efforts and amazing videos ❣️❣️

[@J3R3MI6]

Using AI to generate quick UI like this is just what I needed to bring my scripts to life. Thanks Matt.

[@piotrek7633]

more like a brain replacement Dx

[@robosergTV]

@@piotrek7633 Do you use lots of your intelligence to code basic forms? And why replace your brain with software tools instead of writing directly in machine code? Your comment seems incredibly ignorant and foolish.

[@tuckercoffey2780]

Interesting observation -- Rabbit Inc. plans for this to be apart of the R1. This further proves its possible. It will continue to evolve. Great content, Matthew!

[@thomassynths]

A plan of intention not proof of what is possible. I’ll believe it when I see it, and I doubt even that.

[@jessthnthree]

good video. need more of these!

[@NPCforsale]

I built a simple form and gave it a Zapier webhook URL, telling it to label the form inputs and to send the info to the webhook.. and it worked! Took like 30 seconds

[@Batmancontingencyplans]

We need more of these ❤️❤️❤️

[@AI-HOMELAB]

Don't know how you find these so quickly. But this seems awesome! Hope it gets integrated into Pinokio.

[@thevadimb]

Thank you for sharing!

[@baheth3elmy16]

I enjoyed the video a lot!!!

[@user-ew8ld1cy4d]

So cool! Thanks

[@dguillemette]

I don't see why this is not going to be integrated in Wordpress and/or Elementor/other page builder. It's so awesome !

[@fz1576]

Because the front-end part as it's demonstrated is merely 20% of the work?

[@japneetsingh5015]

Just what I was looking for

[@lshagh6045]

Thanks for sharing 👍

[@a.ielimba78]

Awesome video

[@SODKGB]

Thank you for the video, I am running a Windows 10 version of Ollama and needed to do these additional steps to get this to run: pip install fastapi_sso pip install requests pip install peewee pip install weave pip install itsdangerous pip install ollama pip install export set OPENAI_API_KEY=xxx cd\openui\backend conda activate openui python -m openui When you run for the first time select the setup gear icon located on the upper left. Then switch to your desired Ollama model. Then it worked, figure it would be good to share to help others running into the same issue.

[@freddiechipres]

This is awesome! What do you recommend for the backend?

[@mrdevolver7999]

6:20 - This got me exciting for a moment, but then I remembered my own recent experience when I tried to use LLM to change SVG path for me. Sadly, it did NOT work that well. Apparently not even the big models out there are capable of understanding the SVG path descriptions yet, but nice try there in your testing, yeah that is exactly what intuition would tell us to do when using such tool like this.

[@salehmohamed9650]

Honestly, you're the only channel I'd financially support if I had enough money. You're just amazing, and all your videos are straight to the point without all the unnecessary hype or the "THIS AI WILL MAKE YOU A MILLIONAIRE" type of nonsense, lol. Keep up the good work Mr.Berman

[@xraylife]

Don't make the mistake I made of joining a certain KZbin channels "Skool" it was $77 down the drain.

[@themaridv2000]

@@xraylife Why do you think It was a mistake?

[@scottmiller2591]

Looking forward to using such SW as agents working with other agents, and being able to point and click what part of the UI is wrong as part of the bug reporting process. It only gets faster from here on out, folks.

[@denijane89]

Thank you for this video. Including a new conda env was very smart (and safe). I had no problems with the installation as well, but I don't know, I'm not sure how useful it could be for larger projects. I tested it a little, it works ok with llama3 and not so well with llava. When I try to paste an image, it doesn't do anything, so I guess somehow the upload doesn't work. I didn't know about llava, from what I tested it works quite well on simple images, but not so well when it has to understand a screenshot of scientific document. Oh well.

[@yudrapawar]

As a backend developer it's satisfying 😅😅

[@JohnBoen]

Yeah - I'm a database engineer/data scientist. This opens up a lot of possibilities.

[@AkashPadmanabhanL]

Its your turn next.

[@bigglyguy8429]

As a non-coder it's pointless as it all seems rather codey. I'd just sketch what I need and pay a coder to build the thing, as I don't see how this comes close to helping non-coders, and I'm not sure what real value it has to someone who can code front and back-ends? Is installing, setting up and running this thing any easier than just coding the form fields? Surely there are libraries and the like for this?

[@JohnBoen]

@bigglyguy8429 Yeah. The value here is for rapid prototyping. I do database work, and rarely do UI work. This gets me basic UI code so I can glue together all my data components. I think this is a near-perfect solution to many problems I face.

[@bigglyguy8429]

@@JohnBoen Well that's nice :) I'd just use Balsamiq and give it to many peeps for testing before even thinking about coding it. but I'm weird like that

[@WillTDA]

Hey Matthew, I been testing some LLMs recently, and I've come up with my own logic and reasoning problem that seems to trip up some models, including ChatGPT and LLaMA based models. "There are two windowed doors, one left and one right, which are both locked and openable with a key. You have one key in your hand. There is second key behind the left door. When you unlock a door, the key you used disappears. If your goal is to open both doors, which door would you open first and why?" It would be pretty cool to see this one in your rubric in future LLM reviews!

[@Terran_AI]

What's the answer? (I'm not ChatGPT 😂)

[@WillTDA]

@@Terran_AI Pretty simple really. Unlock the left door first so that you can grab the key from behind that door. Then open the right. That way both doors are unlocked. LLMs seem to really struggle with this one though for some reason.

[@Terran_AI]

Cool, CGPT was correct then, just tried it

[@WillTDA]

@@Terran_AI How very strange. I tried it twice, and it got it wrong both times.

[@Terran_AI]

Maybe the UK one is smarter 😂

[@good_vibes_20]

Thanks!

[@dreamphoenix]

Thank you.

[@ihortkachenko1687]

It would be great if you could make a video of building a website using AI tools like OpenUI and OpenDevin for example

[@jbx2060-yb6es]

Make a video building a entire functional SAAS project using these amazing AI tools🔥

[@andrewsheehy2441]

This is so like the Internet in 1995. There are 1000s of tools like this that can be built in a few days. When you start trying to use it for real it fails completey.

[@gavinknight8560]

Reminds me of ms-access days. It's funny, it's like the entire paradigm of 5th generation programming languages was just forgotten.

[@kuakilyissombroguwi]

Would be nice to fork this and make it work with other models and design systems. Nice tool!

[@evam796]

What about css styling? Can you tell it to change colors? Definitely something I will try soon

[@Cine95]

Man i have seen that the command r plus with fine tuning outperforms any model would love if you could make a fine tuning ai model guide

[@ps3301]

Possible to show us how to combine this openui with the backend ai tool and do a login screen and save the data into the backend using these ai tools end to end ?

[@KeithTan308]

Cool stuff. Any similar project that can generate "React Native" Apps that you can showcase.

[@madapaavinash5942]

can we know what the products to create backend ? similar to this.. if possible make a video on the entire end to end app creation plz plz plz .. in need .. thank u in advance

[@affirmationcarbon3366]

Hi, the Llama that you use, is it the 70b? Thanks for the tutorial

[@user-kr3mg4dt3u]

Hey Matt, I'm a beginner and wanted to know how to set up ollama for it to function. This is the first time using it.

[@AGI-Bingo]

This is incredible, and only gonna get better A Golden age of opensource is upon us! 💛 #WholesomeAGI 🌈

[@FloodGold]

I may be saying too much, but the really valuable thing is not what it does, but the code behind how it does it.

[@MasterFX2000]

6:10 there is also moondream now available in ollama

[@paulmclean876]

... that's great! - indeed no excuses ...

[@yusareba]

what to they have for backend? I imagine it's much more complicated because you have things like API's, traces, tests, session management, auth, etc. I'm looking for something AI based like this if possible lol.

[@ajmalbakhshiamirpoor1343]

would be really great if you combine this with a backend project to build a small app

[@claudecollins9045]

Can you make a video using the software to create a whole project? Just want to see the capabilities as I am a newb.

[@tardigr8]

Great info ! Just one question I seem to get a blank white page when I enter the host page. I think its loading slow maybe??

[@Lluma12]

for windows user export does not work, how you create the openai key variables? under system variable option in windows?

[@JohnBoen]

I think I know what I am doing this weekend.

[@milev051]

I was lying in the dark and when I saw the cursor on the light mode button I was like, well now im dead. And then I just heard, "I'm not going to click it so I don't shine a light on you" 😂😂😂

[@Nik.leonard]

I’m curious how well the performance of this app will be with deepseek coder, starcoder2, mixtral and llama3.

[@77rdcasa]

Very nice. 🎉 ! Will be live ? Were may I have help?

[@___OmerAJ___]

awesome

[@Batmancontingencyplans]

Matt use anaconda navigator next it's such as easy tool to maintain environments people can grasp it super fast!!!

[@chadwilson618]

Could this build a UI to view AI agents and talk to them?

[@dudufusco]

I suggest a video of how to integrate this with some backend logic also created by ai in a open source way

[@cdc1138]

@matthew_berman - I know that if this is html it's just a matter of linking all of it. But which workflow & tools would make that feasible? And where are you installing this, as in.... How to run this in AWS with an AÍ backend?

[@user-kr3mg4dt3u]

I've download the preview version, what else do I need to do as I want to use OpenUI for front end dev, please bro

[@Yipper64]

Is there a tool like this for making chrome extensions?

[@GetzAI]

3:40 but did it update the html so it errors on incorrect email format?

[@Zabihullah-ov5fm]

Sir I have cloned the respo using API KEYS, The app run successfully but I am not able to access Ollama Models because there is no Ollama options in settings. Thare is a GPT 3.5 Turbo and GPT 4 . How to enable Ollama models?

[@brunodangelo1146]

Can you ise this with LMStudio?

[@deandresnago2796]

for those that didnt notice he is in the backend folder when he dose the pip install . command

[@mohsinalshammari9776]

how to add coloring theme to my terminal like you?

[@GetzAI]

7:00 maybe you need GPT-4 from the start to read the image correctly?

[@CryptoPensioner]

I get an error when trying to install with "pip install ." ERROR: Directory '.' is not installable. Neither 'setup.py' nor 'pyproject.toml' found.

[@NuncX]

what about a tool wireframing to Frontend code. that would be something.

[@majestinostario1341]

Any other similar Text to UI?

[@spencerfunk6697]

how do u have it make ui for existing code

[@user-ed2wf6wr5g]

how to use this with grok?

[@madapaavinash5942]

can this do front end for apps?

[@chadgtr34]

getting error from openUI, "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

[@DrumAndSpaces]

I don't see the video link in description

[@MarcAyouni]

I don't like that it rebuilds every time.😬 How do you know the LLM didn't mess something somewhere else in the code ?

[@sohailfarooq9808]

Hi can you please make a complete SAAS just with the help of AI. I from start to finish. Front-end backend deploy it on a server online and make it live. I am someone who does not know code and has no time to learn it but would love to build SAAS websites with AI. Can you please show us a demo SAAS build and how we can achieve this with AI. Thank you so much for this amazing content. Love to see your videos.

[@ColinTimmins]

Although you can build applications using AI and not understand code you still need to learn enough terminology to describe what you want. The more you know, the more effective you will be. Use the AI to translate anything you come across you don’t know. I’m very dyslexic and ChatGPT has been an amazing tool, assistant, and friend.

[@ricardocnn]

This question indicates a total lack of knowledge of at least what it takes to make a piece of software work.

[@crepusculoooo]

what llava version?

[@QuoteQuesters]

does anyone know how to fix this : export : The term 'export' is not recognized as the name of a cmdlet

[@christiaanprinsloo8951]

Same

[@alawy5551]

8:36 broooooooooooooooooooooooooooooooooooo! I can show u my google history how many websites and YT videos I enter to just solve this issue and take me lot of hours now in on click it fix the positions of the buttons 💔💔

[@MeinDeutschkurs]

Great, have to play with it, definitely! Today I created a snake game, which is more realistic. If it eats food, it has an outcome later. 😂😂😂

[@commtari]

Hopefully they will add streamlit support.

[@johnfitzgerald2339]

"Open UI *let's you describe..."

[@user-kr3mg4dt3u]

Even if you were to write a step by step right here would be so helpful

[@zahreel3103]

AIs will make so many job obsolete, or at least reduce the number of people who will be asked to continue doing those jobs. I'm all for AIs, but we need Universal Basic Income worldwide now.

[@jameslibby5215]

I don't think we are there yet. And the math isn't going to work out on that yet. The rich would stay rich and everyone else would be poorer

[@gokudomatic]

you're kidding? Those tools will generate messy code that will be a hell to maintain. Such tool is merely enough to build a mockup or a visual prototype.

[@zahreel3103]

@@gokudomatic You gotta see the progression. In 10 years, the code will be perfect. I'll bet anything on it.

[@zahreel3103]

Exactly. Most people never think future/long-term

[@NVX_Ink]

Universal Basic Income.... I don't think so

[@beckyastley5745]

sorry what is the open ai api key? where do i obtain this?

[@marchypolite]

Bruh how long til it gets good enough to take our jobs?

[@helloworldcsofficial]

nice

[@KEKW-lc4xi]

pretty neat. will I use? no. I can just tell gpt4 make me an html webpage with my requirements and it'll do it.

[@333SFx]

Good luck 😅

[@anandteerthrparvatikar5359]

One of the best video by you and tool after Devin/Devi... Thanks for showing this to us

[@BradsPitt-bu5fq]

Tried to use llama3 70b with Groq. Yea no go. LOL!!!!

[@paulholsters7932]

o my god, a signup form. most db services give that out of the box (frontend and backend). no reason to use AI for that. build something small but complicated with it and you'll see how big the limitations are. how quickly it all breaks down. my guess is that most low code no code tools are way more functional.

[@thesmilegame]

Mathew please give a shout out to your subscribers, they have done you proud, by coming here to show you support, so please a little bit of acknowledgement .