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:
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)
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:
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.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 acode
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.
How can i use it ? Can you help?
How is it different from asking ChatGPT directly ?
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 :)
It shows a preview of the result.
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
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..
prompted 'make a flashy button' pretty sure it broke
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)?
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:
To this CSS:
)
Obiviously i can do it manually, tue question was if component can be generated as i want (example splitting css)
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!
Cool demo of what's possible
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!
youtu.be/rpoBD8-DXc4
Haha, nice @georgewl !!!
Feels like a security issue to me, one that should be fixed
Thanks for sharing
Thank you very much @lotfijb :)
thanks
Thank you @colama12 :)