Skip to main content

Using the Gabber API in your Javascript/Typescript application to create and list AI characters

This guide demonstrates how to create a user token for the Gabber API, tie it to a unique user_id, and utilize it within your application.

This tutorial is based on the React SDK and this sample app.

Step 1: Generate a User Token​

The user token links your API key to a unique user_id. While this example generates a random user ID, you should use a persistent identifier such as an email or database ID.

"use server"
import axios from "axios";

export const generateUserToken = async () => {
  const response = await axios.post('https://api.gabber.dev/v1/usage/token', {
    human_id: crypto.randomUUID(),
    limits: [
      { type: 'conversational_seconds', value: 500 },
      { type: 'voice_synthesis_seconds', value: 1000 }
    ]
  }, {
    headers: {
      'X-api-key': `${process.env.GABBER_API_KEY}`
    }
  });

  return response.data;
};

Step 2: Pass the Usage Token to the Application​

Use the generateUserToken function in your page.tsx file to pass the generated token as props to your application.

import { generateUserToken } from "@/actions";
import App from "./App";

export default async function Home() {
  const usageToken = await generateUserToken();
  console.log(usageToken.token);
  return (
    <div className="grid items-center justify-items-center min-h-screen font-[family-name:var(--font-geist-sans)]">
      <App usageToken={usageToken.token} />
    </div>
  );
}

Step 3: Wrap the Application in an ApiProvider​

In your App.tsx file, use the usageToken prop to initialize the ApiProvider, enabling API access across components.

"use client"
import React, { useState } from 'react';
import { ApiProvider } from "gabber-client-react";
import { PersonaSelector } from './Components/PersonaSelector';
import { PersonaCreator } from './Components/PersonaCreator';

function App(props: { usageToken: string }) {
  const [isCreating, setIsCreating] = useState(false);

  return (
    <ApiProvider usageToken={props.usageToken}>
      <PersonaCreator />
      <PersonaSelector />
    </ApiProvider>
  );
}

export default App;

Step 4: List Personas in the Persona Selector​

Use the ApiProvider context to fetch and display personas using the PersonaSelector component.

import { useApi } from 'gabber-client-react';

interface Persona {
  id: string;
  name: string;
  description: string;
  image?: string;
}

export const PersonaSelector = () => {
  const { api } = useApi();
  const response = await api.persona.listPersonas();

  return (
    <div>
      {response.map((persona: Persona) => (
        <div key={persona.id}>
          <h3>{persona.name}</h3>
          <p>{persona.description}</p>
        </div>
      ))}
    </div>
  );
};

Step 5: Create a Persona​

Enable persona creation using the PersonaCreator component.

import { useApi } from 'gabber-client-react';

export const PersonaCreator = () => {
  const { api } = useApi();

  const handleSubmit = async (formData: { name: string; description: string; gender: string; voice: string; }) => {
    const persona = await api.persona.createPersona({
      name: formData.name,
      description: formData.description,
      gender: formData.gender,
      voice: formData.voice
    });

    console.log("Persona created:", persona);
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(e.target); }}>
      {/* Form inputs for name, description, gender, and voice */}
      <button type="submit">Create Persona</button>
    </form>
  );
};

By following these steps, you can integrate Gabber's API into your application, enabling user-specific API usage and persona management.