Yuval

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

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

#ai #javascript #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 :)

Top comments (28)

John Peters • Mar 7 '23

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);
    }
  `});
});

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.

Simeon Vincent • Mar 9 '23

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.

eds-satish • Mar 10 '23

How can i use it ? Can you help?

Kaikina • Mar 8 '23

How is it different from asking ChatGPT directly ?

Yuval • Mar 10 '23

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

David • Mar 9 '23

It shows a preview of the result.

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

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

Wade Zimmerman • Mar 8 '23

prompted 'make a flashy button' pretty sure it broke

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!