Using ChatGPT o1 to write UI code with Elm

After I finished my Oauth 2 Token Exchange demo project, I suddenly had a desire to write the front end UI with Elm language. Elm is my favorite front end language: elegant, functional, strongly typed.

But I haven't touched Elm for over a year, so it would take a while to remember how to start. Fortunately, or coincidentally, ChatGPT o1 just came out, and I wanted to see if it is as good as people say.

So I wrote a detailed prompt and asked ChatGPT o1 to give me a simple web application using the Elm language and the elm-land framework, also using keycloak to do login with port. I love the Elm Land framework, and it is still well maintained today.

It gave me step-by-step instructions on how to setup the mydoctor-elm project, exactly the same as what Elm Land document says, but using my project name instead. Excellent job!

Then it gave me Main.elm code with port implementation to connect with keycloak.js. I copied to VS Code, and, to my surprise, it passed Elm compiler's type check!

Unfortunately the javascript portion of the code was not correct; it resembled interop examples from the official Elm documentation or online examples. The issue is that, as a framework, Elm Land has its own way to handle port with Javascript; the structure of the JS code is quite different. I think it is because there isn't enough training data (meaning not many open-source projects using Elm Land with ports) for ChatGPT to figure out how to write Javascript code within Elm Land constraints. Besides, its code also didn't handle keycloak login well.

So I read the Elm Land documentation again and wrote my own code. I have to say Elm Land documentation is really good! I quickly finished interop.js and got it working. During the coding process, I asked ChatGPT serval questions about how to handle promise, how to use 'check-sso' for silent authentication, and it gave me correct answers, because those are very common questions.

I posted my interop.js code here so next time when someone ask ChatGPT how to connect keycloak.js with port in Elm Land project, they can get some code that works:

import Keycloak from 'keycloak-js';

var keycloak = new Keycloak({
    url: 'http://auth.mydoctor:8080',
    realm: 'mydoctor-demo',
    clientId: 'mydoctor-elm',
});


// This is called BEFORE your Elm app starts up
// 
// The value returned here will be passed as flags 
// into your `Shared.init` function.
export const flags = ({ env }) => {
}

// This is called AFTER your Elm app starts up
//
// Here you can work with `app.ports` to send messages
// to your Elm application, or subscribe to incoming
// messages from Elm
export const onReady = ({ app, env }) => {

    // Initialize Keycloak
    keycloak
    .init({
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
            window.location.origin + '/assets/silent-check-sso.html'
    })
    .then(function (result) {
        if (keycloak.authenticated) {
            app.ports.onLoginSuccess.send(keycloak.token);
        }
    });

    if (app.ports && app.ports.login && app.ports.logout) {

        app.ports.login.subscribe( () => {
            keycloak
            .login()
            .then(function () {
                if (keycloak.authenticated) {
                    app.ports.onLoginSuccess.send(keycloak.token);
                }
            })
            .catch(function () {
                console.error('Failed to login Keycloak');
            });
        })

        app.ports.logout.subscribe( () => {
            console.log("Call logout()");
            keycloak
            .logout()
            .then(function () {
                console.log("After logout: " + keycloak.authenticated);
            })
            .catch(function (err) {
                console.error('Failed to logout Keycloak');
                console.error(err);
            });
        })
    }
}

The full mydoctor-elm project can be found at GitHub.

Overall, after this simple experiment, I was very impressed that its Elm code passed type checking on the first try. However, for situations where answers are not easily found online, it still generates incorrect code, so developers can not fully trust it. For simple tasks, I don't need to search online and read many pages to find the answer, just ask ChatGPT, and the results are pretty good. So ChatGPT o1 is a better coding assistant, my productivity improved a lot. What is your experience with ChatGPT o1 as a developer?