Build ENTIRE Frontends With ONE Prompt

Build ENTIRE Frontends With ONE Prompt - OpenUI Tutorial

Рет қаралды 78,455

2 ай бұрын

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

Пікірлер: 269

@matthew_berman 2 ай бұрын

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

@thomassynths 2 ай бұрын

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

@a.ielimba78 2 ай бұрын

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 2 ай бұрын

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

@JustLennyBenny 2 ай бұрын

Even for free I dont want it. >.>

@howardelton6273 2 ай бұрын

Second prize is 2 RABBIT R1s :)

@JonathanYankovich 2 ай бұрын

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 2 ай бұрын

i haven't seen a worse product in years

@brunodangelo1146 2 ай бұрын

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 2 ай бұрын

@@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 2 ай бұрын

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

@user-nl2kr1nk9s 2 ай бұрын

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.

@suhasml 2 ай бұрын

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

@DaveEtchells 2 ай бұрын

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

@thomassynths 2 ай бұрын

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

@armans4494 2 ай бұрын

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

@thereal_JMT_ 2 ай бұрын

looks dope thanks for sharing ❤

@ddabo4460 2 ай бұрын

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

@sonny5497 2 ай бұрын

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

@jessthnthree 2 ай бұрын

good video. need more of these!

@Batmancontingencyplans 2 ай бұрын

We need more of these ❤️❤️❤️

@AA-rd6nm 2 ай бұрын

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

@aurabless7552 2 ай бұрын

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 :)

@robertgeczi 2 ай бұрын

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.

@J3R3MI6 2 ай бұрын

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

@piotrek7633 2 ай бұрын

more like a brain replacement Dx

@robosergTV 2 ай бұрын

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

@alycheikhouldsmail7576 2 ай бұрын

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

@NPCforsale 2 ай бұрын

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

@tuckercoffey2780 2 ай бұрын

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 2 ай бұрын

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

@AI-HOMELABS 2 ай бұрын

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

@hassanahmed7326 2 ай бұрын

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

@yudrapawar 2 ай бұрын

As a backend developer it's satisfying 😅😅

@JohnBoen 2 ай бұрын

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

@AkashPadmanabhanL 2 ай бұрын

Its your turn next.

@bigglyguy8429 2 ай бұрын

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 2 ай бұрын

@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 2 ай бұрын

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

@thevadimb 2 ай бұрын

Thank you for sharing!

@a.ielimba78 2 ай бұрын

Awesome video

@user-ew8ld1cy4d 2 ай бұрын

So cool! Thanks

@japneetsingh5015 2 ай бұрын

Just what I was looking for

@baheth3elmy16 2 ай бұрын

I enjoyed the video a lot!!!

@cdc1138 2 ай бұрын

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

@Lluma12 2 ай бұрын

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

@salehmohamed9650 2 ай бұрын

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 2 ай бұрын

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

@themaridv2000 2 ай бұрын

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

@SODKGB 2 ай бұрын

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.

@lshagh6045 2 ай бұрын

Thanks for sharing 👍

@Zabihullah-ov5fm 2 ай бұрын

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?

@dguillemette 2 ай бұрын

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 2 ай бұрын

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

@tardigr8 2 ай бұрын

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

@user-kr3mg4dt3u 6 күн бұрын

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

@CryptoPensioner 2 ай бұрын

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

@milev051 2 ай бұрын

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" 😂😂😂

@GetzAI 2 ай бұрын

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

@andrewsheehy2441 2 ай бұрын

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 2 ай бұрын

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

@WillTDA 2 ай бұрын

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 2 ай бұрын

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

@WillTDA 2 ай бұрын

@@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 2 ай бұрын

Cool, CGPT was correct then, just tried it

@WillTDA 2 ай бұрын

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

@Terran_AI 2 ай бұрын

Maybe the UK one is smarter 😂

@good_vibes_20 2 ай бұрын

Thanks!

@freddiechipres 2 ай бұрын

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

@mrdevolver7999 2 ай бұрын

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.

@dreamphoenix 2 ай бұрын

Thank you.

@Nik.leonard 2 ай бұрын

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

@user-kr3mg4dt3u 6 күн бұрын

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.

@madapaavinash5942 2 ай бұрын

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

@Yipper64 2 ай бұрын

Is there a tool like this for making chrome extensions?

@evam796 2 ай бұрын

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

@yusareba 2 ай бұрын

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.

@scottmiller2591 2 ай бұрын

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.

@ps3301 2 ай бұрын

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 ?

@jbx2060-yb6es 2 ай бұрын

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

@affirmationcarbon3366 2 ай бұрын

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

@KeithTan308 2 ай бұрын

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

@chadgtr34 Ай бұрын

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

@FloodGold 2 ай бұрын

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

@MarcAyouni 2 ай бұрын

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

@brunodangelo1146 2 ай бұрын

Can you ise this with LMStudio?

@ihortkachenko1687 2 ай бұрын

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

@Cine95 2 ай бұрын

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

@AGI-Bingo 2 ай бұрын

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

@kuakilyissombroguwi 2 ай бұрын

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

@beckyastley5745 2 ай бұрын

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

@JohnBoen 2 ай бұрын

I think I know what I am doing this weekend.

@chadwilson618 2 ай бұрын

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

@claudecollins9045 2 ай бұрын

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

@spencerfunk6697 2 ай бұрын

how do u have it make ui for existing code

@denijane89 2 ай бұрын

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.

@madapaavinash5942 2 ай бұрын

can this do front end for apps?

@paulmclean876 2 ай бұрын

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

@___OmerAJ___ 2 ай бұрын

awesome

@77rdcasa 2 ай бұрын

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

@mohsinalshammari9776 2 ай бұрын

how to add coloring theme to my terminal like you?

@MasterFX2000 2 ай бұрын

6:10 there is also moondream now available in ollama

@Batmancontingencyplans 2 ай бұрын

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

@QuoteQuesters 2 ай бұрын

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

@christiaanprinsloo8951 2 ай бұрын

Same

@ajmalbakhshiamirpoor1343 2 ай бұрын

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

@DrumAndSpaces 2 ай бұрын

I don't see the video link in description

@crepusculoooo Күн бұрын

what llava version?

@majestinostario1341 2 ай бұрын

Any other similar Text to UI?

@user-ed2wf6wr5g 2 ай бұрын

how to use this with grok?

@MeinDeutschkurs 2 ай бұрын

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

@dudufusco 2 ай бұрын

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

@deandresnago2796 2 ай бұрын

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

@johnfitzgerald2339 2 ай бұрын

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

@alawy5551 2 ай бұрын

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

@zahreel3103 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

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

@zahreel3103 2 ай бұрын

Exactly. Most people never think future/long-term

@NVX_Ink 2 ай бұрын

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

@KEKW-lc4xi 2 ай бұрын

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 2 ай бұрын

Good luck 😅

@GetzAI 2 ай бұрын

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

@mrdevolver7999 2 ай бұрын

0:46 "I'm gonna show you how to install this..." You're welcome, everyone. 😂

@NuncX 2 ай бұрын

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

@sohailfarooq9808 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

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

@thetrueanimefreak6679 2 ай бұрын

....... This is crazy

@thesmilegame 2 ай бұрын

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 .

@marchypolite 2 ай бұрын

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

@paulholsters7932 2 ай бұрын

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.