react-native-chatgpt

一个基于 ChatGPT 的 React Native 封装库，由 OpenAI 提供，可无缝集成到您的应用中。它负责处理认证、流式响应以及会话管理，完全无需后端服务器。

https://user-images.githubusercontent.com/4982414/215356661-c81552d4-27f1-4b64-abd4-129bc6808c0a.mp4

• 功能特性
• 免责声明
• 试用
• 安装
• API
  • ChatGptProvider
  • useChatGpt
• 贡献
• 致谢
• 许可证

功能特性

• :fire: 100% 客户端实现: 您可以轻松地将强大的聊天机器人集成到您的应用中，而无需自定义后端。
• :zap: 流式支持: 体验闪电般的响应速度，一旦内容可用即可显示，类似于 ChatGPT 的网页版交互界面。
• :robot: 对话式交互: ChatGPT 会记住您之前的对话内容。只需在发送消息时附带 conversationId 和 messageId，即可继续之前的对话。
• :iphone: 兼容 Expo: 无需弹出项目即可使用此组件。
• :hammer_and_wrench: 类型安全: 完全使用 TypeScript 编写。
• :computer: Snack 示例: 提供了一个 Snack 链接，您可以在浏览器中直接试用。

免责声明

本库并非官方的 ChatGPT 库。它旨在简化 ChatGPT 与 React Native 应用程序的集成过程。因此，请将其视为实验性工具，并谨慎用于生产环境 :wink:。

试用

🧑‍💻 运行 Snack 示例应用，查看其实际效果。示例源代码位于 /example 文件夹中。

安装

npm install react-native-chatgpt

Expo

您还需要安装 react-native-webview 和 expo-secure-store：

npx expo install react-native-webview expo-secure-store

无需其他步骤。

纯 React Native 应用

您还需要安装 react-native-webview、react-native-vector-icons 和 expo-secure-store：

npm install react-native-webview react-native-vector-icons expo-secure-store

安装完成后，还需按照以下说明进一步配置这些库：

• react-native-webview
• react-native-vector-icons
• expo-secure-store

API

该库的主要 API 包括一个 Provider 组件和一个 Hook。

ChatGptProvider

Provider 组件应放置在 您的 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	自定义关闭按钮渲染器，放置在 WebView 顶部。默认情况下，在右上角显示一个黑色叉号 (X)。请务必将提供的 closeModal 函数与您的 onPress 事件绑定
requestTimeout	否	number	在取消请求之前，您愿意等待“普通”请求完成的最大时间（单位：毫秒），默认值为 30000 毫秒
streamedRequestTimeout	否	number	在取消请求之前，您愿意等待“流式”请求完成的最大时间（单位：毫秒），默认值为 15000 毫秒

useChatGpt

该 Hook 返回一个包含以下属性的对象：

status

status: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated';

• initializing: 表示库正在启动。此时不应假设任何认证状态，需等待该值变为 logged-out 或 authenticated。
• logged-out: 表示您尚未认证，或您的 ChatGPT 访问令牌已过期。
• getting_auth_token: 这是一个短暂的状态，在登录模态框关闭后持续几秒钟。它表示库正在后台获取 ChatGPT 的认证令牌。您可以利用此状态来显示加载指示器。
• authenticated: 表示您已登录。只有在此状态下，您才能与聊天机器人进行交互。

ChatGPT 颁发的 JWT 令牌有效期为 7 天，因此您大约需要每周重新认证一次。当状态从 authenticated 变为 logged-out 时，库会提示您需要重新认证。

login

function login(): void;

执行此函数会打开登录模态框并触发 ChatGPT 的认证流程。

成功完成后，status 将从 logged-out 变为 getting_auth_token（持续几秒钟），最终变为 authenticated。

sendMessage

这是库的核心函数，用于向聊天机器人发送消息并返回响应。根据传入的参数，它可以以两种不同的方式使用：

标准模式

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'
      );

      // 用户阅读完响应后，再发送一条消息
      const { message: followUp } = await sendMessage(
        'Elaborate on the first suggestion',
        {
          conversationId,
          messageId,
        }
      );
    } catch (error) {
      if (error instanceof ChatGptError) {
        // 根据错误类型进行相应处理
      }
    }
  };

  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 在网页 Playground 中的工作方式。

如果您想跟踪对话，请使用响应对象中的 conversationId 和 messageId，并在下次调用 sendMessage 时再次传递它们。

通过检查响应对象中的 isDone 属性，可以检测到响应是否已完成。

如果发生错误，onError 回调函数将接收到一个 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) {
          // 响应已完成，可以发送另一条消息
        }
      },
      onError: (e) => {
        // 根据错误类型进行相应处理
      },
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={handleSendMessage} title="Get streamed response" />
      <Text>{response}</Text>
    </View>
  );
};

:warning: 请注意，ChatGPT 后端实施了速率限制。这意味着如果您连续发送过多消息，可能会收到状态码为 429 的错误。

贡献

请参阅 贡献指南，了解如何为本仓库做出贡献以及开发工作流程。

致谢

• 非官方的 node.js 客户端，它为我们提供了灵感。
• OpenAI 创造了 ChatGPT 🔥

许可证

MIT 许可证 © Raul Gomez Acuna

如果您对这个项目感兴趣，请考虑在 twitter 上关注我。

react-native-chatgpt 快速上手指南

react-native-chatgpt 是一个专为 React Native 设计的 ChatGPT 封装库。它支持纯客户端运行（无需后端服务器）、流式响应以及多轮对话上下文管理，并完美兼容 Expo。

环境准备

• 系统要求：支持 iOS、Android 和 Web 平台。
• 前置依赖：
  • Node.js & npm/yarn
  • React Native 项目（Expo 或 Bare 项目均可）
  • TypeScript（推荐，库本身由 TS 编写）

安装步骤

1. 安装核心库

npm install react-native-chatgpt

2. 安装额外依赖

根据你的项目类型，执行以下命令安装必要的原生依赖：

如果你使用 Expo

npx expo install react-native-webview expo-secure-store

Expo 项目无需额外配置，安装即可直接使用。

如果你是 Bare React Native 项目

npm install react-native-webview react-native-vector-icons expo-secure-store

安装完成后，请参照以下官方文档完成原生链接配置：

• react-native-webview 配置
• react-native-vector-icons 配置
• expo-secure-store (Bare 项目) 配置

基本使用

1. 包裹根组件

在应用入口处使用 ChatGptProvider 包裹你的根组件，以初始化认证上下文。

import { ChatGptProvider } from 'react-native-chatgpt';
import App from './App';

const Root = () => {
  return (
    <ChatGptProvider>
      <App />
    </ChatGptProvider>
  );
};

2. 调用聊天功能

在子组件中使用 useChatGpt Hook 获取发送消息的方法。你需要先调用 login() 触发登录弹窗，认证成功后即可发送消息。

以下是一个包含登录和标准消息发送的最简示例：

import React from 'react';
import { Button, View, Text, Alert } from 'react-native';
import { useChatGpt, ChatGptError } from 'react-native-chatgpt';

const ChatExample = () => {
  const { status, login, sendMessage } = useChatGpt();

  const handleLogin = () => {
    login(); // 打开 ChatGPT 登录弹窗
  };

  const handleSendMessage = async () => {
    if (status !== 'authenticated') {
      Alert.alert('提示', '请先登录');
      return;
    }

    try {
      // 发送第一条消息
      const { message, conversationId, messageId } = await sendMessage(
        '列出三个适合初学者的 React Native 项目点子'
      );
      
      console.log('AI 回复:', message);

      // 发送第二条消息（携带上下文，实现多轮对话）
      const { message: followUp } = await sendMessage(
        '详细解释第一个点子',
        {
          conversationId,
          messageId,
        }
      );
      
      console.log('后续回复:', followUp);
    } catch (error) {
      if (error instanceof ChatGptError) {
        console.error('ChatGPT 错误:', error.message);
      } else {
        console.error('未知错误:', error);
      }
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {status === 'logged-out' && (
        <Button title="登录 ChatGPT" onPress={handleLogin} />
      )}
      
      {status === 'authenticated' && (
        <Button title="发送消息" onPress={handleSendMessage} />
      )}

      {status === 'getting_auth_token' && (
        <Text>正在获取认证令牌...</Text>
      )}
      
      <Text>当前状态：{status}</Text>
    </View>
  );
};

export default ChatExample;

关键状态说明

• logged-out: 未登录或 Token 过期，需调用 login()。
• getting_auth_token: 登录成功后正在后台获取 Token 的过渡状态。
• authenticated: 已认证，可以正常调用 sendMessage。
• 注意: ChatGPT 的 JWT Token 有效期为 7 天，过期后状态会自动变回 logged-out，需重新登录。

进阶：流式响应 (Streaming)

若需类似网页版 ChatGPT 的打字机效果，可使用 sendMessage 的对象参数形式：

sendMessage({
  message: '写一首关于春天的诗',
  onAccumulatedResponse: ({ message, isDone }) => {
    // message 会不断更新，直到 isDone 为 true
    setResponseText(message); 
  },
  onError: (err) => {
    // 处理错误
  },
});