Build ENTIRE Frontends With ONE Prompt - OpenUI Tutorial
ฝัง
- เผยแพร่เมื่อ 3 พ.ค. 2024
- 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.
* ENTER TO WIN RABBIT R1: gleam.io/qPGLl/newsletter-signup
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... - วิทยาศาสตร์และเทคโนโลยี
ENTER TO WIN RABBIT R1: gleam.io/qPGLl/newsletter-signup
wow you are really selling that hard despite the onslaught of negative reviews
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.
can you make the second video about the backend . maybe use kiramase
Even for free I dont want it. >.>
Second prize is 2 RABBIT R1s :)
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)
i haven't seen a worse product in years
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.
@@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.
What do you expect? AI hype channels can only make money if AI is hyped.
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.
Success depends on the decision & moves you take to achieve it. Building wealth involves developing good habits, such as regularly setting aside money for good investments..
I'm glad I got into crypto when I did because it's been a great turning point for me financially, been my best decision ever.
Inspiring! Do you think you can give me some tips on how to invest in a healthy way like you are doing now?
I will advise you to stop trading yourself if you keep losing. I didn't trade alone anymore, I always needed help and assistance.
Bitcoin has been rising for a while and could rise again. The truth is that no one knows, I think this is the right time to buy and also get a professional assistant
Yes!! That's exactly who she is, Wendy Lee Olson. Many people have praised it and I am just starting out with it from Australia 🇦🇺
I really enjoy your tutorials. Thank you so much Matthew for doing these, I learn something each time.
Wow, another great tool, another fantastic tutorial; I love these really practical how-to-do it vids, they’re incredibly valuable!
This looks super cool. Can't wait to see how this evolves.
Using AI to generate quick UI like this is just what I needed to bring my scripts to life. Thanks Matt.
more like a brain replacement Dx
@@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.
As a backend developer it's satisfying 😅😅
Yeah - I'm a database engineer/data scientist.
This opens up a lot of possibilities.
Its your turn next.
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?
@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.
@@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
looks dope thanks for sharing ❤
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!!!
I'm a big fan. Keep doing what you are doing Matt!!!
Hey Matthew, appreciate your efforts in bringing us the latest and the best AI content! liked and subbed
Again, another awesome tutorial.. keep going, my friend...
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.
We need more of these ❤️❤️❤️
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.
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 :)
Really interesting, I spend a lot of time yesterday searching for something like this
good video. need more of these!
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!
A plan of intention not proof of what is possible. I’ll believe it when I see it, and I doubt even that.
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
Really you are mad my day with this video❤, thousands of thanks not enough for you ❤❤
Really appreciate all your efforts and amazing videos ❣️❣️
Just what I was looking for
Don't know how you find these so quickly. But this seems awesome! Hope it gets integrated into Pinokio.
Thank you for sharing!
This is awesome! What do you recommend for the backend?
I enjoyed the video a lot!!!
I don't see why this is not going to be integrated in Wordpress and/or Elementor/other page builder. It's so awesome !
Because the front-end part as it's demonstrated is merely 20% of the work?
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
Don't make the mistake I made of joining a certain TH-cam channels "Skool" it was $77 down the drain.
@@xraylife Why do you think It was a mistake?
Thanks for sharing 👍
So cool! Thanks
Awesome video
On the Google screenshot issue, you're presenting it with 4 buttons and asking it to change them into 2 items, so it's probably just confused and I'm guessing doesn't have way to question you. You should try "Remove 2 of these buttons and then convert the remaining ones to..."
I'm currently working on a very similar agentic project, with separate designers and developers, layout agent, etc. It's a lot of fun. Thanks for another cool video.
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!
What's the answer? (I'm not ChatGPT 😂)
@@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.
Cool, CGPT was correct then, just tried it
@@Terran_AI How very strange. I tried it twice, and it got it wrong both times.
Maybe the UK one is smarter 😂
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.
Thank you.
Make a video building a entire functional SAAS project using these amazing AI tools🔥
GREAT Video 👍
But that is a lot of excitement for a few text boxes, maybe I can hold on to being a programmer for a while longer 😢😂
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.
Reminds me of ms-access days. It's funny, it's like the entire paradigm of 5th generation programming languages was just forgotten.
Thanks!
Hi, the Llama that you use, is it the 70b? Thanks for the tutorial
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.
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.
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??
Would be nice to fork this and make it work with other models and design systems. Nice tool!
This is incredible, and only gonna get better
A Golden age of opensource is upon us! 💛
#WholesomeAGI 🌈
Cool stuff.
Any similar project that can generate "React Native" Apps that you can showcase.
It would be great if you could make a video of building a website using AI tools like OpenUI and OpenDevin for example
What about css styling? Can you tell it to change colors? Definitely something I will try soon
I may be saying too much, but the really valuable thing is not what it does, but the code behind how it does it.
6:10 there is also moondream now available in ollama
... that's great! - indeed no excuses ...
Matt use anaconda navigator next it's such as easy tool to maintain environments people can grasp it super fast!!!
@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?
I think I know what I am doing this weekend.
would be really great if you combine this with a backend project to build a small app
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" 😂😂😂
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
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.
I suggest a video of how to integrate this with some backend logic also created by ai in a open source way
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 ?
Very nice. 🎉 ! Will be live ? Were may I have help?
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
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 .
for windows user export does not work, how you create the openai key variables? under system variable option in windows?
I’m curious how well the performance of this app will be with deepseek coder, starcoder2, mixtral and llama3.
awesome
3:40 but did it update the html so it errors on incorrect email format?
0:46 "I'm gonna show you how to install this..." You're welcome, everyone. 😂
Can you make a video using the software to create a whole project? Just want to see the capabilities as I am a newb.
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. 😂😂😂
Could this build a UI to view AI agents and talk to them?
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.
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
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.
@@gokudomatic You gotta see the progression. In 10 years, the code will be perfect. I'll bet anything on it.
Exactly. Most people never think future/long-term
Universal Basic Income.... I don't think so
for those that didnt notice he is in the backend folder when he dose the pip install . command
Can you ise this with LMStudio?
Is there a tool like this for making chrome extensions?
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.
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.
This question indicates a total lack of knowledge of at least what it takes to make a piece of software work.
pretty neat. will I use? no. I can just tell gpt4 make me an html webpage with my requirements and it'll do it.
Good luck 😅
7:00 maybe you need GPT-4 from the start to read the image correctly?
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?
I don't like that it rebuilds every time.😬
How do you know the LLM didn't mess something somewhere else in the code ?
I get an error when trying to install with "pip install ."
ERROR: Directory '.' is not installable. Neither 'setup.py' nor 'pyproject.toml' found.
Any other similar Text to UI?
Hopefully they will add streamlit support.
....... This is crazy
how to add coloring theme to my terminal like you?
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.
can this do front end for apps?
what about a tool wireframing to Frontend code. that would be something.
how do u have it make ui for existing code
Incoming revoke comments as usual. Good engagement for the algo, though!
I really really really wish these AI hype channels would actually try demos that are not the standard ones supplied with the AI tool. Actually use it like we all would in the real world
I mean, he's pointing you to the water. It's up to you to drink.
I don't see the video link in description
nice
Bring on the threatened developer comments
does anyone know how to fix this : export : The term 'export' is not recognized as the name of a cmdlet
Same
how to use this with grok?
Tried to use llama3 70b with Groq. Yea no go. LOL!!!!
Bruh how long til it gets good enough to take our jobs?
Don't forget to revoke your API key!