react native chatgpt
1.0.0
Ein React Native-Wrapper um ChatGPT von OpenAI zur nahtlosen Integration in Ihre Anwendungen. Es übernimmt die Authentifizierung, das Streamen von Antworten und die Verfolgung von Gesprächen. Alles ohne die Notwendigkeit eines Servers.
ChatGptProvideruseChatGptconversationId und messageId zusammen mit der Nachricht sendenDies ist keine offizielle ChatGPT-Bibliothek. Es handelt sich um einen Versuch, die Integration von ChatGPT in React Native-Anwendungen zu vereinfachen. Behandeln Sie es daher bitte als experimentell und verwenden Sie es in der Produktion mit Vorsicht.
? Führen Sie die Snack-Beispiel-App aus, um sie in Aktion zu sehen. Der Quellcode für das Beispiel befindet sich im Ordner /example.
npm install react-native-chatgpt Sie müssen außerdem react-native-webview und expo-secure-store installieren
npx expo install react-native-webview expo-secure-storeEs sind keine zusätzlichen Schritte erforderlich.
Sie müssen außerdem react-native-webview , react-native-vector-icons und expo-secure-store installieren
npm install react-native-webview react-native-vector-icons expo-secure-storeNach Abschluss der Installation sollten Sie außerdem einige zusätzliche Anweisungen zum Einrichten der Bibliotheken befolgen:
Diese Bibliothek exportiert eine Anbieterkomponente und einen Hook als Haupt-API.
ChatGptProviderDie Anbieterkomponente sollte im Stammverzeichnis Ihrer React Native-Anwendung platziert werden, wie im folgenden Beispiel gezeigt:
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Mit den folgenden ChatGptProvider Requisiten können Sie das Erscheinungsbild des Modals anpassen, das die Authentifizierung mit ChatGPT und Zeitüberschreitungen für die Chatbot-Anfragen übernimmt.
| Name | Erforderlich | Typ | Beschreibung |
|---|---|---|---|
children | Ja | React.Node | Ihr Anwendungskomponentenbaum |
containerStyles | NEIN | StyleProp<ViewStyle> | Zusätzlicher Stil, der auf den Webview-Container angewendet wird |
backdropStyles | NEIN | StyleProp<ViewStyle> | Zusätzlicher Stil auf die Hintergrundansicht angewendet. Standardmäßig wird eine halbtransparente Hintergrundfarbe rgba(0, 0, 0, 0.5) verwendet. |
renderCustomCloseIcon | NEIN | (closeModal: () => void) => React.Node | Ein benutzerdefinierter Renderer für die Schaltfläche „Schließen“, der über der Webansicht platziert wird. Standardmäßig wird in der oberen rechten Ecke ein schwarzes Kreuz (X) angezeigt. Vergessen Sie nicht, die als Argument bereitgestellte Funktion closeModal mit Ihrem onPress Ereignis zu verknüpfen |
requestTimeout | NEIN | number | Die maximale Zeit in ms, die Sie bereit sind, auf eine normale Anfrage zu warten, bevor Sie sie abbrechen. Der Standardwert beträgt 30.000 ms |
streamedRequestTimeout | NEIN | number | Die maximale Zeit in ms, die Sie bereit sind, auf eine streambasierte Anfrage zu warten, bevor Sie sie abbrechen. Der Standardwert beträgt 15.000 ms |
useChatGptDer Hook gibt ein Objekt mit den folgenden Eigenschaften zurück:
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : Zeigt an, dass die Bibliothek gestartet wird. Sie sollten nichts über den Authentifizierungsstatus annehmen und warten, bis sich dieser Wert entweder in logged-out oder authenticated ändert.logged-out bedeutet, dass Sie sich entweder noch nicht authentifiziert haben oder dass Ihr ChatGPT-Zugriffstoken abgelaufen istgetting_auth_token : vorübergehender Zustand, der einige Sekunden anhält, direkt nachdem das Anmeldemodal geschlossen wurde. Dies spiegelt die Tatsache wider, dass die Bibliothek im Hintergrund ein ChatGPT-Authentifizierungstoken erhält. Mit diesem Status können Sie eine Ladeanzeige darstellen.authenticated : signalisiert, dass Sie angemeldet sind. Nur in diesem Status können Sie mit dem Chatbot interagieren. ChatGPT stellt JWT-Tokens aus, die in 7 Tagen ablaufen, sodass Sie sich etwa einmal pro Woche erneut authentifizieren müssten. Die Bibliothek meldet dies, indem sie den Status von authenticated in logged-out ändert.
login function login ( ) : void ;Eine Funktion, die bei Ausführung das Modal öffnet und den ChatGPT-Authentifizierungsfluss auslöst.
Nach erfolgreichem Abschluss ändert sich status von logged-out zu getting_auth_token (für einige Sekunden) und schließlich zu authenticated
sendMessageDies ist die Kernfunktion der Bibliothek. Es sendet eine Nachricht an den Chatbot und gibt die Antwort zurück. Abhängig von den übergebenen Argumenten kann es auf zwei verschiedene Arten verwendet werden:
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Es gibt ein Versprechen mit der Antwort zurück. Dies ist die einfachste Art der Verwendung, die Verarbeitung der Antwort ist jedoch langsamer, da darauf gewartet wird, dass die vollständige Antwort verfügbar ist.
Wenn Sie die Konversation verfolgen möchten, verwenden Sie conversationId und messageId im Antwortobjekt und übergeben Sie sie erneut an sendMessage .
Wenn der Server die Anfrage ablehnt oder die Zeitüberschreitung auftritt, wird ein ChatGptError ausgelöst.
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 ;Es akzeptiert eine Rückruffunktion, die ständig mit Antwortaktualisierungen aufgerufen wird. Diese Version ist nützlich für Szenarien, in denen die Antwort angezeigt werden muss, sobald sie verfügbar ist, ähnlich wie die ChatGPT-API auf dem Web-Playground funktioniert.
Wenn Sie die Konversation verfolgen möchten, verwenden Sie conversationId und messageId im Antwortobjekt und übergeben Sie sie erneut an sendMessage .
Überprüfen Sie die Eigenschaft isDone im Antwortobjekt, um zu erkennen, wann die Antwort abgeschlossen ist.
Tritt ein Fehler auf, wird der onError Callback mit einem ChatGptError aufgerufen.
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 >
) ;
} ;Lesen Sie den Beitragsleitfaden, um zu erfahren, wie Sie zum Repository und zum Entwicklungsworkflow beitragen können.
MIT © Raul Gomez Acuna
Wenn Sie dieses Projekt interessant fanden, denken Sie bitte darüber nach, mir auf Twitter zu folgen
