Skip to main content

Chat Completions Authentication

The Gabber chat completions API supports the normal Gabber authentication methods. This includes Usage Token authentication.

What this means is that you can use the OpenAI SDK directly in your user-face client app without leaking API keys. Token count limits will be enforced.

import { OpenAI } from 'openai';
import { useMemo, useCallback } from 'react';

function App() {
    const [usageToken, setUsageToken] = useState('');

    const openAI = useMemo(() => {
        if (!usageToken) return null;
        const sk = serviceKeys[0];
        const baseURL = process.env.NEXT_PUBLIC_GABBER_API + "/v1";
        return new OpenAI({
          baseURL,
          apiKey: "",
          defaultHeaders: { "Authorization": `Bearer ${usageToken}` },
          dangerouslyAllowBrowser: true, // This is perfectly safe with Gabber Usage Token Auth
        });
    }, [usageToken]);

    const streamCompletion = useCallback(async () => {
        if (!openAI) return;
        const completion = await openAI.complete({
            model: "some-gabber-llm-id",
            stream: true,
            messages: [
                { role: "system", content: "Once upon a time" },
            ],
        });

        for await (const message of completion) {
            console.log("completions chunk: ", message);
        }
    }, [openAI]);

    if(!usageToken) {
      return (
        <div>
            <button onClick={async () => {
                // Whatever logic you use to get the usage token
                const res = await fetch('https://api.your-backend-server.com/login', {
                  method: 'GET',
                });
                const data = await res.json();
                setUsageToken(data.gabber_token);
            }}>Login</button>
        </div>
      );
    }

    return (
        <div>
            <button onClick={streamCompletion}>Generate Completion</button>
        </div>
    );

}