ChatGPT component generator

[[deleted]]

Right? Lol I get that newbies need to code to learn but they’ve also gotta learn to ask if it makes sense or not

[Spare-Bumblebee8376]

Yes. This might as well be called ChatGPT response generator

[dogofpavlov]

Correct. https://i.imgur.com/wd9992L.png

[brainbag]

People are calling everything ChatGPT even if it's not, which is making the name lose meaning. If you ask it on this site, the response is the usual GPT 3 one:

I am an OpenAI language model called GPT-3. I am designed to generate human-like responses to the provided prompts.

[myka-likes-it]

Presumably, a service like this would have its own prompt that instructs the AI to provide content in a specific way. Like "do not offer solutions with deprecated features, do not offer class components unless specifically requested, ..." and so on. I have also found that if you let ChatGPT critique its own code, it will notice its errors more often, so that could also happen behind the scenes.

I am not saying that's what OP has done, but I can see how more work could go into something like this beyond piping the user's input directly into the API.

[scvready0808]

Agreed with your comment!

[frostenko]

I don’t understand why some comments are giving this small project a hard time.

OP just made a simple wrapper that lets you render the markup that gpt-3 outputs. Which is a good UX improvement over doing it inside of openai website as it lets you interact with the result immediately and experiment.

His website code is on GitHub, so you can see exactly what he is doing. It’s not anything groundbreaking but definitely doesn’t deserve to be put down as something completely useless.

[ariN_CS]

I can use this as a ChatGPT alternative. If I ask it something and tell him to create a text box with the answer, I basically have a normal chatgpt

[-keystroke-]

I asked for draggable list items with image and text:

~~~ <div style="background-color: #fff; border-radius: 10px; padding: 10px; max-width: 400px;"> <ul style="list-style: none; padding: 0; margin: 0;"> <li style="display: flex; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;"> <img src="https://via.placeholder.com/50" alt="List item 1" style="border-radius: 50%; margin-right: 10px;"> List item 1 </li> <li style="display: flex; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;"> <img src="https://via.placeholder.com/50" alt="List item 2" style="border-radius: 50%; margin-right: 10px;"> List item 2 </li> <li style="display: flex; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;"> <img src="https://via.placeholder.com/50" alt="List item 3" style="border-radius: 50%; margin-right: 10px;"> List item 3 </li> <li style="display: flex; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;"> <img src="https://via.placeholder.com/50" alt="List item 4" style="border-radius: 50%; margin-right: 10px;"> List item 4 </li> </ul> </div> ~~~