DEV Community

Yuan Ji
Yuan Ji

Posted on

5

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);
            });
        })
    }
}
Enter fullscreen mode Exit fullscreen mode

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?

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more