A React Native wrapper around ChatGPT by OpenAI to seamlessly integrate it with your applications. It handles authentication, streamed responses, and keeping track of conversations. All without the need of a server.
react-native-chatgpt.mp4
- 🔥 100% client-side: you can easily integrate a powerful chatbot into your app without the need for a custom backend
- ⚡ Streaming support: experience lightning-fast responses as soon as they are available, similar to the ChatGPT web playground
- 🤖 Conversational: ChatGPT remembers what you said earlier. Keep the conversation going by sending the
conversationIdandmessageIdalong with the message - 📱 Expo compatible: no need to eject to enjoy this component
- 🛠️ Type safe: fully written in TS
- 💻 Snack example: a snack link is provided, so you can try it out in your browser
This is not an official ChatGPT library. It's an effort to make it easier to integrate ChatGPT with React Native applications. As such, please treat it as experimental and use it with caution in production 😉.
🧑💻 Run the snack example app to see it in action. The source code for the example is under the /example folder.
npm install react-native-chatgptYou also need to install react-native-webview and expo-secure-store
npx expo install react-native-webview expo-secure-storeNo additional steps are needed.
You also need to install react-native-webview, react-native-vector-icons and expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeAfter the installation completes, you should also follow some additional instructions to set up the libraries:
This library exports a provider component and a hook as its main API.
The provider component should be placed at the root of your React Native application as shown in the example below:
import { ChatGptProvider } from 'react-native-chatgpt';
import App from './App';
const Root = () => {
return (
<ChatGptProvider>
<App />
</ChatGptProvider>
);
};The following ChatGptProvider props allow you to customize the appearance of the modal that handles the authentication with ChatGPT, and timeouts for the chatbot requests.
| Name | Required | Type | Description |
|---|---|---|---|
children |
yes | React.Node |
Your application component tree |
containerStyles |
no | StyleProp<ViewStyle> |
Extra style applied to the webview container |
backdropStyles |
no | StyleProp<ViewStyle> |
Extra style applied to the backdrop view. By default it uses a semi-transparent background color rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon |
no | (closeModal: () => void) => React.Node |
A custom close button renderer to be placed on top of the webview. By default, it renders a black cross (X) on the top right corner. Don't forget to hook up the closeModal function provided as argument with your onPress event |
requestTimeout |
no | number |
The maximum amount of time in ms you are willing to wait for a normal request before cancelling it, it defaults to 30000 ms |
streamedRequestTimeout |
no | number |
The maximum amount of time in ms you are willing to wait for a streamed-based request before cancelling it, it defaults to 15000 ms |
The hook returns an object with the following properties:
status: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated';initializing: indicates the library is starting up. You shouldn't assume anything regarding the authentication state and wait until this value changes to eitherlogged-outorauthenticated.logged-outreflects you either haven't authenticated yet or that your ChatGPT access token has expiredgetting_auth_token: transitory state that lasts for a few seconds right after the login modal is dismissed. It reflects the fact that the library is getting a ChatGPT auth token in the background. You can use this status to render a loading indicator.authenticated: signals you are logged in. Only under this status you will be able to interact with the chat bot.
ChatGPT issues JWT tokens that expire in 7 days, so you would have to reauthenticate approximately once per week. The library will report that by changing the status from authenticated to logged-out.
function login(): void;A function that, when executed, opens the modal and triggers the ChatGPT auth flow.
After successful completion, status will change from logged-out to getting_auth_token (for a few seconds) and finally to authenticated
This is the core function of the library. It sends a message to the chatbot and returns the response. It can be used in two different ways depending on the arguments passed:
function sendMessage(
message: string,
options?: {
conversationId?: string;
messageId?: string;
}
): Promise<{
message: string;
messageId: string;
conversationId: string;
}>;It returns a promise with the response. This is the simplest way to use it, but it will be slower to process the response as it waits for the full response to be available.
If you want to track the conversation, use the conversationId and messageId in the response object, and pass them to sendMessage again.
If the server rejects the request or the timeout fires, a ChatGptError will be thrown.
import React from 'react';
import { Button } from 'react-native';
import { useChatGpt, ChatGptError } from 'react-native-chatgpt';
const Example = () => {
const { sendMessage } = useChatGpt();
const handleSendMessage = async () => {
try {
const { message, conversationId, messageId } = await sendMessage(
'Outline possible topics for an SEO article'
);
// After the user has read the response, send another message
const { message: followUp } = await sendMessage(
'Elaborate on the first suggestion',
{
conversationId,
messageId,
}
);
} catch (error) {
if (error instanceof ChatGptError) {
// Handle error accordingly
}
}
};
return <Button onPress={handleSendMessage} title="Send message" />;
};function sendMessage(args: {
message: string;
options?: {
conversationId?: string;
messageId?: string;
};
onAccumulatedResponse?: (response: {
message: string;
messageId: string;
conversationId: string;
isDone?: boolean;
}) => void;
onError?: (err: ChatGptError) => void;
}): void;It accepts a callback function that will be constantly invoked with response updates. This version is useful for scenarios where the response needs to be displayed as soon as it becomes available, similar to the way the ChatGPT API works on the web playground.
If you want to track the conversation, use the conversationId and messageId in the response object, and pass them to sendMessage again.
Check the isDone property in the response object to detect when the response is complete.
If an error occurs, the onError callback is called with a ChatGptError.
import React, { useState } from 'react';
import { Button } from 'react-native';
import { useChatGpt, ChatGptError } from 'react-native-chatgpt';
const StreamExample = () => {
const { sendMessage } = useChatGpt();
const [response, setResponse] = useState('');
const handleSendMessage = () => {
sendMessage({
message: 'Outline possible topics for an SEO article',
onAccumulatedResponse: ({ message, isDone }) => {
setResponse(message);
if (isDone) {
// The response is complete, you can send another message
}
},
onError: (e) => {
// Handle error accordingly
},
});
};
return (
<View style={{ flex: 1 }}>
<Button onPress={handleSendMessage} title="Get streamed response" />
<Text>{response}</Text>
</View>
);
};See the contributing guide to learn how to contribute to the repository and the development workflow.
- The unofficial node.js client, which served as inspiration.
- OpenAI for creating ChatGPT 🔥
MIT © Raul Gomez Acuna
If you found this project interesting, please consider following me on twitter