Lets build a Generative AI tool

Learning objectives

• Problem solving

• Working with a text-to-text model

• Writing prompts

• Using API's

Problem solving

Autocomplete

Lav en plan til følgende problemstilling:

Du har et array af navne. Når en bruger søger efter et navn i et input felt skal de navne der matcher det brugeren har søgt på vises i en liste. Ikke noget kode!

CleanShot-2025-11-17-at-14.14.39

Carrousel

Du har en liste af bilnavne i et array. De bilnavne skal vises i en carrousel ligesom vist på billedet. Lav en plan for hvordan i vil løse det. Ikke noget kode!

Make a responsive carousel with just CSS | Blog | Niek Nijland

Scroll procent af en artikel

På nogle artikler, kan man oppe i toppen se en bar der indikerer hvor langt man har scrollet. Den skal i lave en plan for

Da jeg arbejdede på DR, lavede jeg den her: www.dr.dk/nyheder/webfeature/kandidaterne

Swipe to unlock

https://github.com/j2only/slide-unlock

Teacher instructions

• Vi mødes igen kl 11 til nogle lightning demos. 2 minutters super korte demoer

• Kl. 11:25 vil jeg prøve at komme så langt med en af de problem solving ting i har arbejdet på. Det bliver med MAX fart

• På tirsdag bliver i introduceret til setuppet for projektarbejdet.

Getting started

We first need to be able to interact with a LLM through some kind of API. That will make it possible for us to fetch some data in javascript and then use that data for our web application. There are alot of different ways of getting access to an api with a LLM behind. I will be going through some ways here:

It's up to you which way you choose!

Mistral API free

Signup at https://console.mistral.ai/api-keys

Create a new api key. Use that api key to query the backend api. Here is a list of the available models: https://docs.mistral.ai/getting-started/models/models_overview/

function mistralChat(prompt) {
    return fetch("https://api.mistral.ai/v1/chat/completions", {
        method: "POST",
        headers: {
            "Authorization": "Bearer YOUR_API_KEY",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            model: "ministral-8b-2410",
            messages: [
                { role: "system", content: "You are a concise assistant." },
                { role: "user", content: prompt }
            ],
            temperature: 0.7,
            max_tokens: 512
        })
    })
  	.then(response => response.json())
    .then(function(data) {
        console.log(data.choices[0].message.content);
    });
}

mistralChat("Explain recursion in one sentence.")

🚨DON'T COMMIT YOUR KEYS TO GITHUB!!!🚨 OBS! Hvis i deployer linket, er det jeres credits der bliver brugt af!! I kan komme udenom det ved at lade brugerne indputte deres OpenAI key, ligesom her

Husk at sætte begrænsning op på hvor meget du kan bruge!

OpenAI API - not free (but very very cheap)

OpenAI has a really good api that is easy to use, very cheap (especially for get-3.5) and have smart models.

Sign up here: https://platform.openai.com/signup

To access the API you need an API key. Get that by going to https://platform.openai.com/account/api-keys and selecting Create new secret key. Copy the key.

🚨VERY IMPORTANT!!! To not suddenly having a HUGE bill, set up a limit of what you will spend. Do that by going to https://platform.openai.com/account/limits and set a monthly budget!🚨

🚨DON'T COMMIT YOUR KEYS TO GITHUB!!!🚨 OBS! Hvis i deployer linket, er det jeres credits der bliver brugt af!! I kan komme udenom det ved at lade brugerne indputte deres OpenAI key, ligesom her

Using the API

Now to start working with the model i have created a template for you here. You can also use the code below

fetch("https://api.openai.com/v1/responses", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer API_KEY`
        },
        body: JSON.stringify({
            model: "gpt-4.1",
            input: "Tell me a three sentence bedtime story about a unicorn."
        })
    })
        .then(response => response.json())
        .then(data => {
            const text = data.output[0].content[0].text;
            console.log(text);
        })
        .catch(err => {
            console.error("Fetch error:", err);
        });

Where the value under the content key is your prompt. There are happening some other things too, but you can ignore that (the POST, headers etc)

If you want to know. Try and get ChatGPT to explain what the code does

There are lots of different endpoints within the OpenAI API. We will be using the Chat endpoint that is also powering ChatGPT. OpenAI can also generate images through the API here or from audio to text or text to audio here. The possibilities are truly endless 🤯

Running a local model

A local model is a model that only runs on your computer. Its not as powerful but obviously private since nothing is sent to fx OpenAI

Ollama is a tool that easily lets you download, run and start an api on your won computer. It has lots of different models to use

Works only on mac or linux for now (Windows coming soon)

Go to https://ollama.ai/ and download the tool. To find documentation go to: https://github.com/jmorganca/ollama

To run the model llama2 open the terminal and write ollama run llama2

Using the API

Now to start working with the model i have created a template for you here. You can also use the code below

function logSuggestion() {
    fetch("http://localhost:11434/api/generate", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            model: "llama3.1:latest",
            prompt: `The following is a list of dishes you can make with the following ingredients: onion, carrots and cellery`,
            stream: false
        })
    })
        .then(response => response.json())
        .then(suggestionData => {
            console.log(suggestionData);
        })
        .catch(error => {
            console.error("Error:", error);
        });
}

logSuggestion();

This will only work locally on your machine! When deploying the website it cannot get the url http://localhost:11434/api/generate. To do that you need to deploy the ollama server to a server

Working code for these 3 Ways of working with LLM's can be found here: https://github.com/behu-kea/ita24-1sem-code/tree/main/genai-test-js

So what should i build?

That's up to you! Let your imagination run wild

• A workout planner

• A website that can help gamers when they are stuck in a video game

• A website that finds interesting hiking spots in a new country

• A website that can create recipies for people on a tight budget

• And

• And

• And

Find something that interests you

Handin

Der er en aflevering. Det er ikke porteføljeaflevering!

Skal afleveres d. 23/11

https://ek.itslearning.com/LearningToolElement/ViewLearningToolElement.aspx?LearningToolElementId=1411363