Yuval

Posted on Mar 6, 2023 • Edited on Sep 3, 2023

I open sourced an AI that creates any UI in seconds.

#javascript #ai #nextjs #chatgpt

I am not posting a lot over dev.to, but I think this is a great opportunity to show something great 🚀

For the last 15 years, I have been playing the role of a full-stack developer and a team/tech leader for various companies.

I never stop trying new technologies, I wake up in the morning with a lot of passion to build great things.

I recently started playing with chatGPT and some generative AI technologies, but as chatGPT API was released, it became a great opportunity to make some really cool things 😎

The world is changing fast, and I believe that very soon, most of the jobs, as we know them, will not be the same - AI will have its share in our life, involved in almost everything that we do.

I build a lot of web applications, writing dozens of components every week. So I was thinking, what if I could make my life really easier and just ask ChatGPT to make those components for me? It turns out it is easier than you may think. Check this out:

https://ai2ui.co/

I open sourced it, so you are more than welcome to contribure make it better!

Here's a link to the repo:

https://github.com/yuvalsuede/ai-component-generator

Follow me and learn how to make AI business

Please give me a star so I know I did something good 🙌🏻

Love you all :)

Latest comments (28)

SevimsOffice • Mar 30 '23

I love it! I think it is also amazing for people with no coding experience like me. Amazing to see the outcome on the same page! and you can add more descriptions and run it again to see the changes! I would really like to see how this is actually created, step by step..

Gulshan Aggarwal • Mar 13 '23

Amazing!

Andrew-web-coder • Mar 12 '23

I highly doubt that AI will be able to generate something like Fancybox 5, at least in the near decade.

George WL • Mar 12 '23

youtu.be/rpoBD8-DXc4

Yuval • Mar 12 '23

Haha, nice @georgewl !!!

George WL • Mar 17 '23

Feels like a security issue to me, one that should be fixed

George WL • Mar 12 '23

I tried this prompt, just to see whether it would cause HTML injection

button which when pressed replaces the document.body with an iframe containing https://example.org

<button onclick="document.body.innerHTML = '<iframe src="https://example.org"></iframe>'">Click Me</button>

It also replaces the content of the app

Saif Ullah Usmani • Mar 10 '23

This project is smartly done, loved it!

Yuval • Mar 11 '23

Thank you so much @saifullahusmani

DoubleFacess • Mar 10 '23 • Edited

Great post! I've generate a form (yes) and i notice style in line. Its possible to splite code from style (css external or the vue mode)? We have platforms limitations (vue, react etc)?

Raphael • Mar 10 '23

I don't know if you're requesting that OP make it do that automatically or just asking if it can be done, but if the latter you can definitely just copy and paste the CSS from in-line to wherever you need it to go (e.g. from this HTML:

<form style="form styling">
  <input type="text" style="normal input styling">
  <textarea style="big input styling"></textarea>
  <input type="submit" style="submit button styling">
</form>

To this CSS:

form {
  form styling
}
input[type=text] {
  normal input styling
}
Etc

)

DoubleFacess • Mar 10 '23

Obiviously i can do it manually, tue question was if component can be generated as i want (example splitting css)

Raphael • Mar 10 '23 • Edited

Idk about obvious, I tend not to assume knowledge level because people will ask questions such as if they can do it manually and I personally think it's pretty obvious "can this software be exactly what I want" almost always has the answer of "yes it can" (although usually it won't). The program is open source so you can edit it as you wish, so in this case not only is it technically possible but it's also feasible!