DEV Community

Cover image for I open sourced an AI that creates any UI in seconds.
Yuval
Yuval

Posted on

 

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

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.

Image description

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/

Image description

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

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

Love you all :)

Top comments (27)

Collapse
 
jwp profile image
John Peters

Nice. Here's one result:
Here is the code for a Chrome extension that uses Manifest v3 and the Chrome DeclarativeNetRequest API to find all links on a web page:

// manifest.json
{
  "name": "Find Links Extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "declarativeNetRequest",
    "activeTab"
  ]
}

// background.js
chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: ['block_all_requests']
}, function(result) {
  chrome.declarativeNetRequest.updateSessionRules({
    rules: [
      {
        id: 'allow_links_requests',
        priority: 1,
        action: {
          type: 'allow'
        },
        condition: {
          urlFilter: '*',
          resourceTypes: ['main_frame', 'sub_frame', 'stylesheet', 'script', 'image', 'font', 'object', 'xmlhttprequest', 'ping', 'csp_report', 'media', 'websocket', 'other']
        }
      },
      {
        id: 'block_all_requests',
        priority: 0,
        action: {
          type: 'block'
        },
        condition: {
          urlFilter: '*'
        }
      },
      {
        id: 'allow_links',
        priority: 2,
        action: {
          type: 'modifyHeaders',
          responseHeaders: {
            'name': 'Link',
            'value': '*'
          }
        },
        condition: {
          resourceTypes: ['main_frame', 'sub_frame'],
          urlFilter: '*'
        }
      }
    ]
  });
});

// popup.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Find Links</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Find Links</h1>
  </body>
</html>

// popup.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.executeScript(tabs[0].id, { code: `
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
      console.log(links[i].href);
    }
  `});
});
Enter fullscreen mode Exit fullscreen mode

The above code sets up a declarative rule that allows all types of network requests to be made (except for a final "block all" rule), and then creates a rule to modify the response headers to include all anchor tags (<a>) with a "Link" header value. The popup.html file simply contains an H1 header, while the popup.js file queries the current active tab and runs a JavaScript code snippet that finds all anchor tags and logs their href attributes to the console.

Collapse
 
dotproto profile image
Simeon Vincent

I’m well versed on the Chrome extension platform and I’m very confused by this code. It doesn’t look like anything here will work as expected. It’s also not clear what the extension is even trying to do. The DNR rules seem pointless, chrome.tabs.executeScript() doesn’t exist in MV3, chrome.scripting.executeScript() which replaces it doesn’t take a code property, the popup isn’t being used effectively and the code it executed could be called from the background.

Unfortunately, this looks like a demo of how ChatGPT can fall short.

Collapse
 
edssatish profile image
eds-satish

How can i use it ? Can you help?

Collapse
 
kaikina profile image
Kaikina

How is it different from asking ChatGPT directly ?

Collapse
 
suede profile image
Yuval

so chat GPT will not display the UI for you :)
I am also fine tuning it for you guys, so you get what you need :)

Collapse
 
thesecuritydev profile image
David

It shows a preview of the result.

Collapse
 
georgewl profile image
George WL

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=&quot;https://example.org&quot;></iframe>'">Click Me</button>

It also replaces the content of the app

Collapse
 
sherrydays profile image
Sherry Day

Cool demo of what's possible

Collapse
 
suede profile image
Yuval

Thank you @sherrydays . I did built it as a demo, to share with the community.
Anyone can take it from here to make it really great!

Collapse
 
wadecodez profile image
Wade Zimmerman

prompted 'make a flashy button' pretty sure it broke

Collapse
 
doublefaces profile image
DoubleFacess • 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)?

Collapse
 
mergerg profile image
Raphael

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>
Enter fullscreen mode Exit fullscreen mode

To this CSS:

form {
  form styling
}
input[type=text] {
  normal input styling
}
Etc
Enter fullscreen mode Exit fullscreen mode

)

Collapse
 
doublefaces profile image
DoubleFacess

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

Thread Thread
 
mergerg profile image
Raphael • 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!

Collapse
 
georgewl profile image
George WL
Collapse
 
suede profile image
Yuval

Haha, nice @georgewl !!!

Collapse
 
georgewl profile image
George WL

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

Collapse
 
lotfijb profile image
Lotfi Jebali

Thanks for sharing

Collapse
 
suede profile image
Yuval

Thank you very much @lotfijb :)

Collapse
 
colama12 profile image
Colama12

thanks

Collapse
 
suede profile image
Yuval

Thank you @colama12 :)

Collapse
 
yarip28 profile image
Yarip28

thanks

Collapse
 
suede profile image
Yuval

Thank you @yarip28 :)

Collapse
 
andrewwebcoder profile image
Andrew-web-coder

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

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Amazing!

Collapse
 
saifullahusmani profile image
Saifullah Usmani

This project is smartly done, loved it!

Collapse
 
suede profile image
Yuval

Thank you so much @saifullahusmani

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.