OpenAI

Connect to the OpenAI API directly from the browser, using an API key.

React JS ⚛️

warning

This adapter connects to the OpenAI API directly from the browser, using an API key.
The OpenAI API is built for server-side usage, and the API key should not be exposed to the client.

You can use this adapter for testing purposes, but in a production setup you should build your own server that connects to the OpenAI API, and use that server with NLUX.

We recommend using NLUX's custom adapters feature to create an adapter for your server.

JavaScript 🟨

warning

This adapter connects to the OpenAI API directly from the browser, using an API key.
The OpenAI API is built for server-side usage, and the API key should not be exposed to the client.

You can use this adapter for testing purposes, but in a production setup you should build your own server that connects to the OpenAI API, and use that server with NLUX.

We recommend using NLUX's custom adapters feature to create an adapter for your server.

Installation

react-js

NPM

npm install @nlux/openai-react

Yarn

yarn add @nlux/openai-react

PNPM

pnpm add @nlux/openai-react

javascript

NPM

npm install @nlux/openai

Yarn

yarn add @nlux/openai

PNPM

pnpm add @nlux/openai

Usage

react-js

import {useUnsafeChatAdapter} from '@nlux/openai-react';
import {AiChat} from '@nlux/react';

export default App = () => {
    const adapter = useUnsafeChatAdapter({
        // Config options
    });

    return <AiChat adapter={adapter} />;
};

javascript

import {createUnsafeChatAdapter} from '@nlux/openai';
import {createAiChat} from '@nlux/core';

const adapter = createUnsafeChatAdapter();
const aiChat = createAiChat().withAdapter(adapter);

Configuration

react-js

You can configure the OpenAI adapter in React by passing a config object to the useUnsafeChatAdapter() function.
The config object has the following properties:

javascript

You can configure the adapter by chaining the following methods:

---

API Key

react-js

• Property: apiKey
• Type: string
• Required: true
• Usage:

const adapter = useUnsafeChatAdapter({
    apiKey: 'MY_API_KEY'
});

javascript

• Method: withApiKey(apiKey)
• Argument Type: string
• Required: true
• Usage:

const adapter = createUnsafeChatAdapter()
    .withApiKey(apiKey);

---

Model

react-js

The OpenAI model to use.
NLUX only supports chat completion models such as gpt-3.5-turbo and gpt-4-0314.
You can find a list of available models here.

• Property: model
• Type: string
• Required: false
• Usage:

const adapter = useUnsafeChatAdapter({
    model: 'gpt-4-32k'
});

javascript

The OpenAI model to use.
NLUX only supports chat completion models such as gpt-3.5-turbo and gpt-4-0314.
You can find a list of available models here.

• Method: withModel(model)
• Argument Type: string
• Required: false
• Usage:

const adapter = createUnsafeChatAdapter()
    .withModel('gpt-4-32k');

---

Data Transfer Mode

react-js

• Property: dataTransferMode
• Type: 'stream' | 'fetch'
• Required: false
• Default: 'stream'
• Usage:

const adapter = useUnsafeChatAdapter({
    dataTransferMode: 'stream'
});

javascript

• Method: withDataTransferMode(mode)
• Argument Type: 'stream' | 'fetch'
• Required: false
• Default: 'stream'
• Usage:

const adapter = createUnsafeChatAdapter()
    .withDataTransferMode('stream');

---

System Message

react-js

The initial system to send to ChatGPT API. This can be used to set the initial context of the conversation, and instruct ChatGPT to use a specific persona.

• Property: systemMessage
• Type: string
• Required: false
• Usage:

const adapter = useUnsafeChatAdapter({
    systemMessage: 'I want you to act as a customer support agent.'
});

javascript

The initial system to send to ChatGPT API. This can be used to set the initial context of the conversation, and instruct ChatGPT to use a specific persona.

• Method: withSystemMessage(systemMessage)
• Argument Type: string
• Required: false
• Usage:

const adapter = createUnsafeChatAdapter()
    .withSystemMessage('I want you to act as a customer support agent.');