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
• 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
• Usage:

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

---

Data Transfer Mode

React JS ⚛️

• Property: dataTransferMode
• Type: 'stream' | 'batch'
• Default: 'stream'
• Usage:

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

JavaScript 🟨

• Method: withDataTransferMode(mode)
• Argument Type: 'stream' | 'batch'
• 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
• 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
• Usage:

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