LM Studio met Next.js : je eigen lokale AI

Ik had gisteren als doel : AI. Ik zat een video te kijken over ‘5 portfolio projecten’, Leuke ideeen voor kleine demo-projectjes. Van die dingen die je in een dag of twee dagen in het weekend even bouwt. Arduino-botjes en Python desktop task automation.

Ik zat zelf eerder aan AI te denken. Onze vrolijke ijverige nerds hebben de LLM bedacht, “large language model”. De programmeurs wereld is er vol van, “ChatGPT”. Vooral ook omdat het een API heeft. Dan kun je zelf ook AI programmaatjes maken. Let me at it, let me at it… maar ik heb geen credit card (de meeste AI API’s zijn Amerikaanse bedrijven en die werken met Stripe/credit cards). En ik heb geen zin om 240 per jaar te betalen om voor mijn eigen lol met een API te spelen.

Ik zocht een gratis AI met API.

Dus ik ging donderdagavond eens rondkijken, en vrijdagochtends nog een tijdje. Sites als HuggingFace kende ik al, HuggingFace is de centrale repo voor open source LLM’s. Maar ik kon er op dat moment niks mee. Ook omdat ik op dat moment de tijd er niet voor nam.

Nu zat ik lekker rustig met mijn kopje koffie.

LM Studio

Ik kwam uiteindelijk een leuke tool tegen, LM Studio.

Dat is een gratis utility. Daarmee kun je elk LLM (large language model) van HuggingFace downloaden. Je hebt keuze uit tientallen modellen. Je kunt de modellen downloaden, mounten, en er mee chatten.

Ik koos een “Llama 2” model, en pikte het kleinste model, 2.9 GB. Dat laadt vrij snel.

Chat

Even je model mounten bovenin het scherm, en dan kun je gaan chatten met je model : (hint : je moet linksboven in de interface wel even klikken op ‘new chat’, anders kun je niet invoeren in de prompt-regel).

Sneeuwwitje als tekst kent ‘ie ! Hij weet ook wat het goeie antwoord is.

Lokale Http API

Interessanter voor mij : je kunt ook een lokale http server opstarten. Die een beperkte OpenAI stijl API biedt. Twee endpoints in feite : completion en chat/completion, dat is nog heel beperkt.

Maar dan kun je lokaal er al tegen aan programmeren.

In mijn geval met Next.js.

Ik heb CORS hier even aangezet (staat standaard uit) omdat ik even geen zin had om dat in te regelen.

Verder kun je in Next.js gewoon de OpenAi JS library gebruiken. Met in je OpenAI instance als config : apiKey: ‘NULL’, BaseURL : (je lokale http server url) + ‘/v1/’. Dan gebruikt de OpenAI library je lokale LLM met de lokale http server als bron API.

/app/utils/openai.defs.ts

import OpenAI from "openai";

export type ChatCompletion = OpenAI.Chat.Completions.ChatCompletion;
export type ChatCompletionOptions =
  OpenAI.Chat.Completions.ChatCompletionCreateParams;

/app/utils/openai.ts

import OpenAI from "openai";

import type { ChatCompletion } from "./openai.defs";

const openai = new OpenAI({
  baseURL: "http://localhost:1234/v1/",
  apiKey: "NULL",
  dangerouslyAllowBrowser: true,
});

export default async function getChat(): Promise<ChatCompletion> {
  return await openai.chat.completions.create({
    messages: [
      {
        role: "user",
        content: "Say this is a test",
      },
    ],
    model: "gpt-3.5-turbo",
  });
}

/app/page.tsx

"use client";

import type { ChatCompletion } from "@/app/utils/openai.defs";

import { useEffect, useState } from "react";

import getChat from "@/app/utils/openai";

export default function Home() {
  const [comp, setComp] = useState<ChatCompletion | null>(null);

  const fetchData = async () => {
    try {
      const mycomp: ChatCompletion = await getChat();
      setComp(mycomp);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []); 

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>{comp?.choices[0].message.content}</div>
    </main>
  );
}

Dit is Next 14.0.3 met App router, TypeScript en openai 4.20.1. Sorry voor mijn zeer beperkte Next.js skills, ik ben er net mee begonnen :) Dit moet je even zo coden omdat OpenAI JS een Node module is, en niet in een client component gebruikt kan worden in Next. Je moet de type definities (voor TypeScript) even in een aparte file exporteren.

Met de prompt “Say this is a test ?” krijg je dit eruit :

Sure, I'm happy to help you with your test! Is there anything specific you would like me to assist you with? Please let me know how I can help. Also, please note that I'm just an AI and do not have the ability to give you a passing grade or provide any guarantees of success. My purpose is to assist and provide helpful responses to your questions to the best of my abilities.

Heel welbespraakt ! Duurt wel even, wees geduldig, het kost 10 seconden om het antwoord aan te maken op mijn machine. Anderen hebben weer veel snellere machines).

Nogmaals, sorry voor de clumsy code :) maar ik vind dingen als dit gewoon ontzettend leuk om even mee te spelen.

Note: naast LM Studio zijn er meer lokale AI apps, die ongeveer hetzelfde doen. Op dev.to hebben ze een kort overzicht van de andere voornaamste kandidaten (GTP4All en LocalAI) .