{"id":13643822,"url":"https://github.com/rgommezz/react-native-chatgpt","last_synced_at":"2025-04-13T07:48:23.043Z","repository":{"id":65619100,"uuid":"592489480","full_name":"rgommezz/react-native-chatgpt","owner":"rgommezz","description":"A React Native wrapper around ChatGPT to seamlessly integrate it with your applications. It handles authentication, streamed responses, and keeping track of conversations. 100% client-side :robot:","archived":false,"fork":false,"pushed_at":"2023-01-31T11:51:32.000Z","size":1117,"stargazers_count":572,"open_issues_count":5,"forks_count":78,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-13T07:48:18.389Z","etag":null,"topics":["chatbot","chatgpt","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rgommezz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-23T20:51:57.000Z","updated_at":"2025-03-18T16:30:23.000Z","dependencies_parsed_at":"2023-02-16T18:46:29.185Z","dependency_job_id":null,"html_url":"https://github.com/rgommezz/react-native-chatgpt","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgommezz%2Freact-native-chatgpt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgommezz%2Freact-native-chatgpt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgommezz%2Freact-native-chatgpt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgommezz%2Freact-native-chatgpt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rgommezz","download_url":"https://codeload.github.com/rgommezz/react-native-chatgpt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681494,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbot","chatgpt","react","react-native"],"created_at":"2024-08-02T01:01:53.191Z","updated_at":"2025-04-13T07:48:22.997Z","avatar_url":"https://github.com/rgommezz.png","language":"TypeScript","funding_links":[],"categories":["CLIs","SDK, Libraries, Frameworks","TypeScript"],"sub_categories":["JavaScript/Typescript"],"readme":"# react-native-chatgpt\n\n[![npm](https://img.shields.io/npm/v/react-native-chatgpt?color=brightgreen)](https://www.npmjs.com/package/react-native-chatgpt)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-chatgpt)](https://bundlephobia.com/result?p=react-native-chatgpt)\n![platforms: ios, android, web](https://img.shields.io/badge/platform-ios%2C%20android-blue)\n[![license MIT](https://img.shields.io/badge/license-MIT-brightgreen)](https://github.com/rgommezz/react-native-chatgpt/blob/master/LICENSE)\n[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=f3f3f3\u0026logoColor=000)](https://snack.expo.dev/@rgommezz/react-native-chatgpt)\n\n \u003cp\u003e\u003ci\u003eA React Native wrapper around \u003ca href=\"https://openai.com/blog/chatgpt\"\u003eChatGPT\u003c/a\u003e by \u003ca href=\"https://openai.com\"\u003eOpenAI\u003c/a\u003e to seamlessly integrate it with your applications. \u003cb\u003eIt handles authentication, streamed responses, and keeping track of conversations. All without the need of a server.\u003c/b\u003e\u003c/i\u003e\u003c/p\u003e\n \n https://user-images.githubusercontent.com/4982414/215356661-c81552d4-27f1-4b64-abd4-129bc6808c0a.mp4\n\n\n- [Features](#features)\n- [Disclaimer](#disclaimer)\n- [Try it out](#try-it-out)\n- [Installation](#installation)\n- [API](#api)\n  - [`ChatGptProvider`](#chatgptprovider)\n  - [`useChatGpt`](#usechatgpt)\n- [Contributing](#contributing)\n- [Credits](#credits)\n- [License](#license)\n\n## Features\n\n- **:fire: 100% client-side**: you can easily integrate a powerful chatbot into your app without the need for a custom backend\n- **:zap: Streaming support**: experience lightning-fast responses as soon as they are available, similar to the ChatGPT web playground\n- **:robot: Conversational**: ChatGPT remembers what you said earlier. Keep the conversation going by sending the `conversationId` and `messageId` along with the message\n- **:iphone: Expo compatible**: no need to eject to enjoy this component\n- **:hammer_and_wrench: Type safe**: fully written in TS\n- **:computer: Snack example**: a snack link is provided, so you can try it out in your browser\n\n## Disclaimer\n\nThis 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 :wink:.\n\n## Try it out\n\n🧑‍💻 Run the snack [example app](https://snack.expo.dev/@rgommezz/react-native-chatgpt) to see it in action. The source code for the example is under the [/example](/example) folder.\n\n## Installation\n\n```sh\nnpm install react-native-chatgpt\n```\n\n### Expo\n\nYou also need to install `react-native-webview` and `expo-secure-store`\n\n```sh\nnpx expo install react-native-webview expo-secure-store\n```\n\nNo additional steps are needed.\n\n### Bare React Native apps\n\nYou also need to install `react-native-webview`, `react-native-vector-icons` and `expo-secure-store`\n\n```sh\nnpm install react-native-webview react-native-vector-icons expo-secure-store\n```\n\nAfter the installation completes, you should also follow some additional instructions to set up the libraries:\n\n- [react-native-webview](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md)\n- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation)\n- [expo-secure-store](https://github.com/expo/expo/tree/sdk-47/packages/expo-secure-store#installation-in-bare-react-native-projects)\n\n## API\n\nThis library exports a provider component and a hook as its main API.\n\n### `ChatGptProvider`\n\nThe provider component should be placed **at the root of your React Native application** as shown in the example below:\n\n```jsx\nimport { ChatGptProvider } from 'react-native-chatgpt';\nimport App from './App';\n\nconst Root = () =\u003e {\n  return (\n    \u003cChatGptProvider\u003e\n      \u003cApp /\u003e\n    \u003c/ChatGptProvider\u003e\n  );\n};\n```\n\n#### Props\n\nThe following `ChatGptProvider` props allow you to customize the appearance of the modal that handles the authentication with ChatGPT, and timeouts for the chatbot requests.\n\n| Name                     | Required | Type                                     | Description                                                                                                                                                                                                                             |\n| ------------------------ | -------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children`               | yes      | `React.Node`                             | Your application component tree                                                                                                                                                                                                         |\n| `containerStyles`        | no       | `StyleProp\u003cViewStyle\u003e`                   | Extra style applied to the webview container                                                                                                                                                                                            |\n| `backdropStyles`         | no       | `StyleProp\u003cViewStyle\u003e`                   | Extra style applied to the backdrop view. By default it uses a semi-transparent background color `rgba(0, 0, 0, 0.5)`                                                                                                                   |\n| `renderCustomCloseIcon`  | no       | `(closeModal: () =\u003e void) =\u003e 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 |\n| `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                                                                                                         |\n| `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                                                                                                 |\n\n### `useChatGpt`\n\nThe hook returns an object with the following properties:\n\n#### `status`\n\n```ts\nstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated';\n```\n\n- `initializing`: indicates the library is starting up. You shouldn't assume anything regarding the authentication state and wait until this value changes to either `logged-out` or `authenticated`.\n- `logged-out` reflects you either haven't authenticated yet or that your ChatGPT access token has expired\n- `getting_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.\n- `authenticated`: signals you are logged in. Only under this status you will be able to interact with the chat bot.\n\nChatGPT 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`.\n\n#### `login`\n\n```ts\nfunction login(): void;\n```\n\nA function that, when executed, opens the modal and triggers the ChatGPT auth flow.\n\nAfter successful completion, `status` will change from `logged-out` to `getting_auth_token` (for a few seconds) and finally to `authenticated`\n\n#### `sendMessage`\n\nThis 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:\n\n#### Standard\n\n```ts\nfunction sendMessage(\n  message: string,\n  options?: {\n    conversationId?: string;\n    messageId?: string;\n  }\n): Promise\u003c{\n  message: string;\n  messageId: string;\n  conversationId: string;\n}\u003e;\n```\n\nIt 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.\n\nIf you want to track the conversation, use the `conversationId` and `messageId` in the response object, and pass them to `sendMessage` again.\n\nIf the server rejects the request or the timeout fires, a `ChatGptError` will be thrown.\n\n```jsx\nimport React from 'react';\nimport { Button } from 'react-native';\nimport { useChatGpt, ChatGptError } from 'react-native-chatgpt';\n\nconst Example = () =\u003e {\n  const { sendMessage } = useChatGpt();\n\n  const handleSendMessage = async () =\u003e {\n    try {\n      const { message, conversationId, messageId } = await sendMessage(\n        'Outline possible topics for an SEO article'\n      );\n\n      // After the user has read the response, send another message\n      const { message: followUp } = await sendMessage(\n        'Elaborate on the first suggestion',\n        {\n          conversationId,\n          messageId,\n        }\n      );\n    } catch (error) {\n      if (error instanceof ChatGptError) {\n        // Handle error accordingly\n      }\n    }\n  };\n\n  return \u003cButton onPress={handleSendMessage} title=\"Send message\" /\u003e;\n};\n```\n\n#### Streaming\n\n```ts\nfunction sendMessage(args: {\n  message: string;\n  options?: {\n    conversationId?: string;\n    messageId?: string;\n  };\n  onAccumulatedResponse?: (response: {\n    message: string;\n    messageId: string;\n    conversationId: string;\n    isDone?: boolean;\n  }) =\u003e void;\n  onError?: (err: ChatGptError) =\u003e void;\n}): void;\n```\n\nIt accepts a callback function that will be constantly invoked with response updates.\nThis 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.\n\nIf you want to track the conversation, use the `conversationId` and `messageId` in the response object, and pass them to `sendMessage` again.\n\nCheck the `isDone` property in the response object to detect when the response is complete.\n\nIf an error occurs, the `onError` callback is called with a `ChatGptError`.\n\n```jsx\nimport React, { useState } from 'react';\nimport { Button } from 'react-native';\nimport { useChatGpt, ChatGptError } from 'react-native-chatgpt';\n\nconst StreamExample = () =\u003e {\n  const { sendMessage } = useChatGpt();\n  const [response, setResponse] = useState('');\n\n  const handleSendMessage = () =\u003e {\n    sendMessage({\n      message: 'Outline possible topics for an SEO article',\n      onAccumulatedResponse: ({ message, isDone }) =\u003e {\n        setResponse(message);\n        if (isDone) {\n          // The response is complete, you can send another message\n        }\n      },\n      onError: (e) =\u003e {\n        // Handle error accordingly\n      },\n    });\n  };\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cButton onPress={handleSendMessage} title=\"Get streamed response\" /\u003e\n      \u003cText\u003e{response}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n:warning: Be aware that ChatGPT backend implements rate limiting. That means if you send too many messages in a row, you may get errors with a 429 status code.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## Credits\n\n- The unofficial [node.js client](https://github.com/transitive-bullshit/chatgpt-api), which served as inspiration.\n- [OpenAI](https://openai.com) for creating [ChatGPT](https://openai.com/blog/chatgpt/) 🔥\n\n## License\n\nMIT © [Raul Gomez Acuna](https://raulgomez.io/)\n\nIf you found this project interesting, please consider following me on [twitter](https://twitter.com/rgommezz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgommezz%2Freact-native-chatgpt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frgommezz%2Freact-native-chatgpt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgommezz%2Freact-native-chatgpt/lists"}