react-openai-api

This library is a react wrapper for the openAI API, please feel free to use and/or contribute

Live Demo

Here you can see a live demo of the component, you can find this demo in the example folder

Install

Npm

npm i react-openai-api

Yarn

yarn add react-openai-api

Usage

Import the component in your react app

import OpenAIAPI from "react-openai-api";

Take a look at the component properties and make sure you handle the API response in your app

type OpenAIAPIProps = {
  apiKey: string;
  callType?: CallType; // Only completion type calls are supported at the moment
  payload: CompletionPayload;
  responseHandler: (response: CompletionResponse) => any;
  errorHandler?: (error: AxiosError) => any;
};

Minimum requirements

<OpenAIAPI
  apiKey={apiKey}
  payload={payload}
  responseHandler={responseHandler}
/>

Payload example

{
    prompt: "Mario: Hi, how are you?",
    maxTokens: 25,
    temperature: 0.5,
    n: 1,
}

Response example

{
    "id": "cmpl-31Fcb7heJPwIjc2NxSBpAQ6keeJoS",
    "object": "text_completion",
    "created": 1621427389,
    "model": "davinci:2020-05-03",
    "choices": [
        {
            "text": "\n\nRicky: I'm alright.\n\nMario: What's your name?\n\nRicky: Ricky.",
            "index": 0,
            "logprobs": null,
            "finish_reason": "length"
        }
    ]
}

Important

Axios is a peer dependency, this is because having axios as a dependency can lead to have duplicated dependencies and may lead to inconsistencies.

API Reference

You can learn more in the OpenAI API documentation.

To learn React, check out the React documentation.