react native chatgpt
1.0.0
OpenAI による ChatGPT の React Native ラッパーで、ChatGPT をアプリケーションとシームレスに統合します。認証、ストリーミング応答、会話の追跡を処理します。すべてサーバーを必要としません。
ChatGptProvideruseChatGptconversationIdとmessageId送信して、会話を継続します。これは公式の ChatGPT ライブラリではありません。これは、ChatGPT を React Native アプリケーションと簡単に統合できるようにするための取り組みです。したがって、これは実験的なものとして扱い、本番環境では注意して使用してください。
? スナックのサンプル アプリを実行して、実際の動作を確認します。サンプルのソース コードは /example フォルダーの下にあります。
npm install react-native-chatgptまた、 react-native-webviewとexpo-secure-storeをインストールする必要があります。
npx expo install react-native-webview expo-secure-store追加の手順は必要ありません。
また、 react-native-webview 、 react-native-vector-icons 、 expo-secure-storeをインストールする必要があります。
npm install react-native-webview react-native-vector-icons expo-secure-storeインストールが完了したら、追加の手順に従ってライブラリをセットアップする必要もあります。
このライブラリは、プロバイダー コンポーネントとフックをメイン API としてエクスポートします。
ChatGptProvider以下の例に示すように、プロバイダー コンポーネントはReact Native アプリケーションのルートに配置する必要があります。
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; 次のChatGptProviderプロパティを使用すると、ChatGPT による認証とチャットボット リクエストのタイムアウトを処理するモーダルの外観をカスタマイズできます。
| 名前 | 必須 | タイプ | 説明 |
|---|---|---|---|
children | はい | React.Node | アプリケーションコンポーネントツリー |
containerStyles | いいえ | StyleProp<ViewStyle> | Webview コンテナに適用される追加のスタイル |
backdropStyles | いいえ | StyleProp<ViewStyle> | 背景ビューに追加のスタイルが適用されます。デフォルトでは、半透明の背景色rgba(0, 0, 0, 0.5)が使用されます。 |
renderCustomCloseIcon | いいえ | (closeModal: () => void) => React.Node | Web ビューの上に配置されるカスタムの閉じるボタン レンダラー。デフォルトでは、右上隅に黒い十字 (X) が表示されます。 onPressイベントの引数として提供されたcloseModal 関数を忘れずに接続してください。 |
requestTimeout | いいえ | number | 通常のリクエストをキャンセルするまでに待機する最大時間 (ミリ秒)。デフォルトは 30000 ミリ秒です。 |
streamedRequestTimeout | いいえ | number | ストリーミングベースのリクエストをキャンセルするまでに待機する最大時間 (ミリ秒)。デフォルトは 15000 ミリ秒です。 |
useChatGptフックは、次のプロパティを持つオブジェクトを返します。
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : ライブラリが起動中であることを示します。認証状態に関しては何も想定せず、この値がlogged-outまたはauthenticatedに変わるまで待つ必要があります。logged-out 、まだ認証されていないか、ChatGPT アクセス トークンの有効期限が切れたことを示します。getting_auth_token : ログイン モーダルが閉じられた直後に数秒間続く一時的な状態。これは、ライブラリがバックグラウンドで ChatGPT 認証トークンを取得しているという事実を反映しています。このステータスを使用して、読み込みインジケーターを表示できます。authenticated : ログインしていることを示します。このステータスの場合にのみ、チャット ボットと対話できます。 ChatGPT は 7 日で期限切れになる JWT トークンを発行するため、およそ 1 週間に 1 回再認証する必要があります。ライブラリは、ステータスをauthenticatedからlogged-outに変更することでそれを報告します。
login function login ( ) : void ;実行するとモーダルが開き、ChatGPT 認証フローをトリガーする関数。
正常に完了すると、 status logged-outからgetting_auth_token (数秒間) に変わり、最終的にauthenticatedに変わります。
sendMessageこれがライブラリの核となる機能です。チャットボットにメッセージを送信し、応答を返します。渡される引数に応じて、次の 2 つの異なる方法で使用できます。
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;応答とともに Promise を返します。これは最も簡単な使用方法ですが、完全な応答が利用可能になるまで待機するため、応答の処理が遅くなります。
会話を追跡する場合は、応答オブジェクトでconversationIdとmessageId使用し、それらをsendMessageに再度渡します。
サーバーがリクエストを拒否するか、タイムアウトが発生すると、 ChatGptErrorスローされます。
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 ;応答の更新で常に呼び出されるコールバック関数を受け入れます。このバージョンは、ChatGPT API が Web プレイグラウンドで動作する方法と同様に、応答が利用可能になったらすぐに表示する必要があるシナリオに役立ちます。
会話を追跡する場合は、応答オブジェクトでconversationIdとmessageId使用し、それらをsendMessageに再度渡します。
応答オブジェクトのisDoneプロパティをチェックして、応答がいつ完了したかを検出します。
エラーが発生した場合は、 ChatGptErrorを使用してonErrorコールバックが呼び出されます。
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 >
) ;
} ;リポジトリと開発ワークフローに貢献する方法については、貢献ガイドを参照してください。
MIT © ラウル・ゴメス・アクニャ
このプロジェクトが興味深いと思われた場合は、twitter で私をフォローしてください。
