top | item 33818987

Tell HN: I asked ChatGPT to build a login form in React and it gave me the code

172 points| jerrygoyal | 3 years ago | reply

I asked OpenAI chatGPT to "build a login form containing email, password, and login button in React using state" and it gave me the full code along with an explanation. You can see the video of the prompt and response: https://cln.sh/X4p01n

I thought Copilot was fairly advanced, but this chatGPT takes it to a whole other level. What are your thoughts?

131 comments

order
[+] romanhn|3 years ago|reply
Prompt: create a rap song about a guy named Roman writing .NET APIs

Sure, here is a possible rap song about a guy named Roman writing .NET APIs:

  Verse 1:
  I'm Roman, and I'm a code king
  I write .NET APIs, and I do my thing
  I've got Visual Studio on my screen
  Writing code that's clean and lean

  Chorus:
  Roman, Roman, writing .NET APIs
  Roman, Roman, coding all day

  Verse 2:
  I'm a master of C#, no doubt
  I write APIs that always work out
  I'm a whiz with classes and objects too
  I can handle any challenge that comes my way

  Chorus:
  Roman, Roman, writing .NET APIs
  Roman, Roman, coding all day

  Verse 3:
  I'm a pro with ASP.NET and Web API
  I can build a server in a jiffy
  I know my way around REST and JSON
  I can make your data flow like a river

  Chorus:
  Roman, Roman, writing .NET APIs
  Roman, Roman, coding all day

  Verse 4:
  I'm a rockstar with Azure and the cloud
  I can make your apps run smooth and proud
  I'm a wizard with microservices and containers
  I can help your business grow and prosper

  Chorus:
  Roman, Roman, writing .NET APIs
  Roman, Roman, coding all day.

  Outro:
  Roman, Roman, the .NET API man
  Writing code that's always in demand
  Roman, Roman, the code hero
  Writing .NET APIs for the win.
[+] frobolo|3 years ago|reply
What a time to be alive!
[+] dyingkneepad|3 years ago|reply
Wait, what? Was this really generated by an AI or are parent just joking and wrote it themselves?!?
[+] jw1224|3 years ago|reply
ChatGPT blew my mind this morning — I was struggling with a regex, so asked it to help me.

Here's how it went: https://i.imgur.com/PS6oPsq.png

A pretty incredible developer experience, if you ask me!

[+] rstarast|3 years ago|reply
Impressive!

It's lying though when it claims its regexes match the empty parameter cases, right? (The regexes do what's asked, just explanation seems buggy.)

[+] spaceman_2020|3 years ago|reply
Wow! I've been learning how to code for a personal project but looking at this stuff, junior devs might be out of work soon.
[+] cm277|3 years ago|reply
It basically gave me the same feeling of glee I got out of Google while it was still at stanford.edu: just a great UX and what feels like the correct answer on the first try. Google should be shaking in their boots.
[+] j2kun|3 years ago|reply
wait, you had to correct it for it to produce a working regex?
[+] roflyear|3 years ago|reply
Hahaha that's wild, but... I have to feel like it's abuse to use regex here!
[+] satvikpendem|3 years ago|reply
I've done the same thing, first thing I tried with ChatGPT: https://imgur.com/a/d8LZicq

Prompts:

- Write a simple CRDT implementation in Swift

- How can I make a GraphQL server using Rust using the async-graphql and actix-web libraries?

- Write code to create a Dropbox clone in Rust

- How do I make an HTTP request in Javascript?

However, just like with Copilot, it can introduce subtle bugs. For example, in the Dropbox example, notice how it uses synchronous code in an async function. Also, longer prompts will reach the token limit and get cut off.

Interestingly, this must be what Replit is also using for their AI codegen service too (https://replit.com/site/ghostwriter) since I believe they have some connection to OpenAI, as they got early access to OpenAI's service last year with their previous Codex product (https://blog.replit.com/codex).

[+] dcolkitt|3 years ago|reply
The problem with GPT is that it seems to be in an uncanny valley, where it's smart enough to be convincing but not smart enough to be completely accurate. So using it is often lower productivity than just writing from scratch because you have to spend more time carefully going over every line of code for subtle errors.
[+] slake|3 years ago|reply
That'll be an interesting job. AI generated code bug fixer. An AI generates all code in bulk and then it's handed to you to fix the 'subtle' bugs they introduced. Those bug fixes go back into training the algorithm so that the bugs die out over time!
[+] ignoramous|3 years ago|reply
> I believe they have some connection to OpenAI

Sam Altman <--> Paul Graham <--> Amjad Masad might be it.

[+] patwolf|3 years ago|reply
I asked it a question about how to do something with dates in the .NET Entity Framework, and it give me a long explanation with code of how rowversion is used for optimistic concurrency control. Completely unrelated to what I was asking.

I did ask it something more basic: "how to use fetch to download and parse a csv", and the code was helpful, although not much different from what I could find with google/stackoverflow. However, this next part was what really impressed me. The results used Papa for parsing, so I then asked it to do it with csv-parse instead, and it worked! That seems like the advantage over something like Copilot--it has contextual history of the question which can be used conversationally to tweak the results.

[+] superfrank|3 years ago|reply
> I asked it a question about how to do something with dates in the .NET Entity Framework, and it give me a long explanation with code of how rowversion is used for optimistic concurrency control. Completely unrelated to what I was asking.

Sounds exactly like some of my co-workers :)

[+] slake|3 years ago|reply
Bulk of the training of these types of questions are probably from stack overflow anyway
[+] tmaly|3 years ago|reply
This makes me wonder if the tech jobs or the future will fall into two camps:

1. those that can specify concise requirements for the AI

2. those that can check correctness of the code the AI generated.

[+] mprovost|3 years ago|reply
Most programming jobs now require someone who can specify the exact syntax to satisfy the requirements of a compiler (or interpreter) and basically nobody checks the correctness of the (assembly) code that it generates.
[+] triyambakam|3 years ago|reply
3. those who can build and maintain the AI
[+] WandaVision|3 years ago|reply
Somebody would then start an AI company which does 1 and 2 then. What then?
[+] nonameiguess|3 years ago|reply
I highlighted your prompt and clicked web search from the context menu and got this out of DuckDuckGo: https://www.educba.com/react-login-form/

It's annoying blog spam that will hijack your attempt to scroll back with a modal asking you to enter an e-mail and subscribe, but it seems to be roughly the same thing, except the entire article appeared at once and I didn't need to interact with it and wait five minutes for the full answer.

[+] BoiledCabbage|3 years ago|reply
And in a similar vein:

We've come up with a new pedagogical method to teach 4 year olds arithmetic. With two months of study they can easily multiply two 15 digit numbers in their heads.

Well I can multiply those two numbers in a calculator to get the same result, and I don't have to feed or take care of it.

[+] renewiltord|3 years ago|reply
You can ask it to modify the program and it will. I asked it to add chocolate to a recipe.
[+] zug_zug|3 years ago|reply
I feel like I've mostly seen these AIs produce code on things that are mostly just copy-paste examples (login, fibonacci, primes). From a theoretical standpoint I'm only impressed if it's combining things to do achieve something that has no code example on the internet.

From a practical perspective I do think a lot of programmers are doing copy-paste in their day jobs, which means they should be reusing existing code (I would imagine there are numerous reusable customizable login forms).

---

For example I asked it this:

Can you write a javascript function that takes a callback and returns the value of that callback, but returns a cached value if that function has been called less than 5 seconds ago?

And it produces code that looks right but doesn't work (doesn't handle arguments, failing its own example implementation). However, upon reminding it to support arguments it does work. I guess this is actually potentially useful.

[+] tropicalbeach|3 years ago|reply
Yeah for real I don't know why everybody is so impressed. Chatgpt is basically just copying what's already on the internet and rewording it. It's not self thinking and I personally think we will lose touch with different ideas from multiple sources and people because when an AI is only giving you one answer vs google giving you multiple opinions from different people it gives you more options.

Not to mention the copyright issues with this. It's just regurgitating what's already on the internet not sure why it's ok for them to copy people's work but if you do it you will get sued.

[+] c0eos|3 years ago|reply
Holy molly, it's not copy-paste. Keeping with the season, I tried today's Advent of Code puzzle:

``` One Elf has the important job of loading all of the rucksacks with supplies for the jungle journey. Unfortunately, that Elf didn't quite follow the packing instructions, and so a few items now need to be rearranged.

Each rucksack has two large compartments. All items of a given type are meant to go into exactly one of the two compartments. The Elf that did the packing failed to follow this rule for exactly one item type per rucksack.

The Elves have made a list of all of the items currently in each rucksack (your puzzle input), but they need your help finding the errors. Every item type is identified by a single lowercase or uppercase letter (that is, a and A refer to different types of items).

The list of items for each rucksack is given as characters all on a single line. A given rucksack always has the same number of items in each of its two compartments, so the first half of the characters represent items in the first compartment, while the second half of the characters represent items in the second compartment.

For example, suppose you have the following list of contents from six rucksacks:

vJrwpWtwJgWrhcsFMMfFFhFp jqHRNqRjqzjGDLGLrsFMfFZSrLrFZsSL PmmdzqPrVvPwwTWBwg wMqvLMZHhHMvwLHjbvcjnnSBnvTQFn ttgJtRGJQctTZtZT CrZsJsPPZsGzwwsLwLmpwMDw

    The first rucksack contains the items vJrwpWtwJgWrhcsFMMfFFhFp, which means its first compartment contains the items vJrwpWtwJgWr, while the second compartment contains the items hcsFMMfFFhFp. The only item type that appears in both compartments is lowercase p.
    The second rucksack's compartments contain jqHRNqRjqzjGDLGL and rsFMfFZSrLrFZsSL. The only item type that appears in both compartments is uppercase L.
    The third rucksack's compartments contain PmmdzqPrV and vPwwTWBwg; the only common item type is uppercase P.
    The fourth rucksack's compartments only share item type v.
    The fifth rucksack's compartments only share item type t.
    The sixth rucksack's compartments only share item type s.
To help prioritize item rearrangement, every item type can be converted to a priority:

    Lowercase item types a through z have priorities 1 through 26.
    Uppercase item types A through Z have priorities 27 through 52.
In the above example, the priority of the item type that appears in both compartments of each rucksack is 16 (p), 38 (L), 42 (P), 22 (v), 20 (t), and 19 (s); the sum of these is 157. ```

Adding the question: "Write a solution in JavaScript to find the sum of the priorities of those item types." got me:

``` const input = vJrwpWtwJgWrhcsFMMfFFhFp jqHRNqRjqzjGDLGLrsFMfFZSrLrFZsSL PmmdzqPrVvPwwTWBwg wMqvLMZHhHMvwLHjbvcjnnSBnvTQFn ttgJtRGJQctTZtZT CrZsJsPPZsGzwwsLwLmpwMDw;

const rucksacks = input.split('\n');

const sumOfPriorities = rucksacks .map(rucksack => { const half = rucksack.length / 2; const firstHalf = rucksack.slice(0, half); const secondHalf = rucksack.slice(half); return [...firstHalf].filter(item => secondHalf.includes(item)); }) .reduce((total, common) => { const priority = common[0].charCodeAt(0) <= 122 ? common[0].charCodeAt(0) - 96 : common[0].charCodeAt(0) - 38; return total + priority; }, 0);

console.log(sumOfPriorities); // 157 ```

Which is almost perfect, even though it's a new puzzle.

[+] ilaksh|3 years ago|reply
Since I found out about this last night I have already used it to do most of the work of three (relatively simple) programming tasks in bash and JavaScript. One of them was a simple class needed to prevent skipping/reusing numbers in some process that multiple users were accessing (and could sometimes fail). The other was adding up and deleting some temp files in my specific directory structure. And then there was a certain way that I wanted to add a duration to a date and format it.

For a few of them it made a small error of one line that I had to fix. But also in a few cases I was able to just reply that there was a bug and what it was doing incorrectly and to fix it, and it worked.

It gave me code that was very specific such as using the methods as I named and described them in the request for the class.

[+] quonn|3 years ago|reply
It really depends on what you want to do. I just told it to build a React-like framework in Prolog. It first told me that's not possible because Prolog can't be used to build GUIs (not really true either). I then told it that it could just output the DOM manipulations as text and it agreed. But said it's just a text model and can't write programs.
[+] CJefferson|3 years ago|reply
I tried asking it some programming questions -- I found if I asked it things that I was likely to find lots of copies of (or similar things), it did quite well. As soon as I asked it something a bit more unusual, even if the program was quite small, it broke.

One easy way of catching out is to ask "write X in language Y", where X isn't something most people would write in Y -- it usually got it wrong for me.

[+] beepbooptheory|3 years ago|reply
Right, it seems so cool at first, but very quickly just feels like... google. I know its a sophisticated thing, but I really can't sustain enthusiasm for it, I don't understand how all the literal and figurative energy that goes into this is ultimately worth it, beyond being like "huh, cool" for a few minutes. It is immediately apparent that there isn't, like, synthetic judgements happening in the Kantian sense or whatever, just parsed html with maybe wrong answers and a very good ability to make it feel conversational.

Ill stick to man pages and blogs for now. I like learning!

[+] chironjit|3 years ago|reply
Just got kicked out of it an hour ago because it's too busy now.

Been playing with it the whole day - got an idea on how to fix an old bug in an old programme of mine(that is still running).

But, here's the thing, how good it is depends on the available knowledge out there.

I've now tried, js, python, solidity, appscript(not tested the code), Excel and google sheets.

When you're building common js, python, etc stuff, it's really handy to have one screen that basically gives you the answer rather than having to google it, parse through the posts, etc.

However, if you're on the bleeding edge of tech, or looking for more obscure topics, it really starts showing its limitations.

I managed to run into that for example looking for Jupiter notebook commands, optimisations, versioning (giving me python2 results instead of python3 with obsolete/unmaintained packages).

Its limit is basically what has been created and knowledge already available.

Depending on what you're building, would suggest understanding what you're copy pasting and possible vulnerabilities that may arise from the code.

Overall, I'm sold - defo wouldn't mind paying 20 to 40 a month for this. If it's pricier, not so sure.

[+] throwawaygo|3 years ago|reply
This is the new threat vector. AI copy pasta. Gonna make pen test research way more fun. Just describe the website you’re at and read the source code.
[+] batch12|3 years ago|reply
Can it work to identify vulnerabilities? For instance, if you feed it code and ask it to find the vulnerability and provide a description of the issue?
[+] anupamchugh|3 years ago|reply
It's decent for some results, but almost meaningless in others. I'd asked it to build a SwiftUI VideoPlayer application which is 5 lines of code. But I got an old solution, and despite giving proper guidance, it failed colossally and printed garbage towards the end.

Here's my convo with ChatGPT: https://imgur.com/a/eIjvh8C

If the text and code are just random stuff making no sense then I wonder how different it is from the Copilot results (besides the convincing style of answers).

[+] sethd|3 years ago|reply
This is due to it being trained on Apple docs. ;)
[+] kelnos|3 years ago|reply
I wonder if this is lifted from a React tutorial, or if it is an amalgamation of other things.

The big question is: whose code is this? Is it, verbatim, someone else's copyrighted code (assuming a snippet like that is novel enough to be copyrightable)? Or is it derived from someone else's code? And if it's derived, is it a derivative work in the legal sense, or is it no more derivative than if a human had read a tutorial or some documentation and then later written code like it?

[+] thedangler|3 years ago|reply
What happens when AI is learning from AI and no new content or advancement in a field is from people? Won't it be an eco chamber of recycled content?
[+] krageon|3 years ago|reply
That's most of Enterprise application dev as it is. We can have that run by robots and have actual people do things that actually matter.
[+] CrackpotGonzo|3 years ago|reply
Genuine question for everyone here: if you were switching careers from a non-technical profession to learning computer science, where would you focus? Do you have any confidence in which skills will be future-proof? Or is everything open to being automated and humans are just biding our time? :)
[+] sasha_fishter|3 years ago|reply
We just had conversation about this in the company. I think it's a good way to give us the code that we know how to write but we waste some time to do that. I.e. I needed function that changes the index of the array, so I asked chatGPT which gave me correct function. I know how to do that but I need some time to think and to test it out. This is just a augmentation of the programming, tools that help us write better code.

Maybe it can substitute StackOverflow, we will get better and faster code / explanation. But in the next 30-50 years, who knows. I guess it can write a lot of code for us, maybe we will be obsolete in that period of time, but as we know, prediction of the future often times goes really really wrong.

[+] htorsdfd22|3 years ago|reply
I am stopping all my contributions to github. I dont want myself to be part of unemployed