AI API Endpoint

The AI API Endpoint can only be accessed by an Admin user and it is mainly used by the <AIButton /> component in the admin dashboard

But you can still utilize it by using the corresponding api function like this.

import { generateAIResponse } from "lib/api";
import { useMutation } from "@tanstack/react-query";
import { Button } from "components/ui/button";
import { useState } from "react";

const ExamplePage = () => {
  const [generatedText, setGeneratedText] = useState("");
  const [generatedHTML, setGeneratedHTML] = useState("");
  const { mutate, isPending } = useMutation({
    mutationFn: generateAIResponse,
    onSuccess: (responseData) => {
      const { completion } = responseData;
      // get raw content coming from open-ai api
      const { role, content } = completion.choices[0].message;
      // get the html content
      const { content: htmlContent } = completion.htmlChoices[0].message;

      setGeneratedText(content);
      setGeneratedHTML(htmlContent);
    },
  });

  return (
    <div>
      <Button
        disabled={isPending}
        isLoading={isPending}
        onClick={() => mutate()}
      >
        Generate some text
      </Button>

      {/* raw content */}
      <p>{generatedText}</p>

      {/* html content */}
      <p
        dangerouslySetInnerHTML={{
          __html: generatedHTML,
        }}
      />
    </div>
  );
};

export default ExamplePage;