[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-rgommezz--react-native-chatgpt":3,"similar-rgommezz--react-native-chatgpt":92},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":9,"readme_en":10,"readme_zh":11,"quickstart_zh":12,"use_case_zh":13,"hero_image_url":14,"owner_login":15,"owner_name":16,"owner_avatar_url":17,"owner_bio":18,"owner_company":19,"owner_location":20,"owner_email":19,"owner_twitter":15,"owner_website":21,"owner_url":22,"languages":23,"stars":32,"forks":33,"last_commit_at":34,"license":35,"difficulty_score":36,"env_os":37,"env_gpu":38,"env_ram":38,"env_deps":39,"category_tags":45,"github_topics":47,"view_count":36,"oss_zip_url":19,"oss_zip_packed_at":19,"status":52,"created_at":53,"updated_at":54,"faqs":55,"releases":91},9994,"rgommezz\u002Freact-native-chatgpt","react-native-chatgpt","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:","react-native-chatgpt 是一款专为 React Native 开发者设计的开源库，旨在帮助你将 OpenAI 的 ChatGPT 智能对话能力无缝集成到 iOS、Android 及 Web 应用中。它主要解决了在移动端接入大模型时通常需要的复杂后端开发难题，让开发者无需搭建自定义服务器，仅在客户端即可完成认证、消息发送及对话管理。\n\n该工具的核心亮点在于其\"100% 纯客户端”架构，配合流式响应（Streaming）技术，能像网页版 ChatGPT 一样实现打字机效果的实时回复，显著提升用户体验。同时，它内置了对话上下文记忆功能，通过自动管理 conversationId 和 messageId，确保多轮对话流畅自然。此外，项目完全采用 TypeScript 编写，类型安全，且完美兼容 Expo 开发环境，提供了开箱即用的示例代码，极大降低了集成门槛。\n\n需要注意的是，由于直接在前端处理敏感密钥，官方建议将其视为实验性方案，在生产环境中需谨慎评估安全性。总体而言，react-native-chatgpt 非常适合希望快速为移动应用添加智能客服、助手或互动功能的移动端开","react-native-chatgpt 是一款专为 React Native 开发者设计的开源库，旨在帮助你将 OpenAI 的 ChatGPT 智能对话能力无缝集成到 iOS、Android 及 Web 应用中。它主要解决了在移动端接入大模型时通常需要的复杂后端开发难题，让开发者无需搭建自定义服务器，仅在客户端即可完成认证、消息发送及对话管理。\n\n该工具的核心亮点在于其\"100% 纯客户端”架构，配合流式响应（Streaming）技术，能像网页版 ChatGPT 一样实现打字机效果的实时回复，显著提升用户体验。同时，它内置了对话上下文记忆功能，通过自动管理 conversationId 和 messageId，确保多轮对话流畅自然。此外，项目完全采用 TypeScript 编写，类型安全，且完美兼容 Expo 开发环境，提供了开箱即用的示例代码，极大降低了集成门槛。\n\n需要注意的是，由于直接在前端处理敏感密钥，官方建议将其视为实验性方案，在生产环境中需谨慎评估安全性。总体而言，react-native-chatgpt 非常适合希望快速为移动应用添加智能客服、助手或互动功能的移动端开发人员使用，是原型验证和小规模应用的理想选择。","# react-native-chatgpt\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-native-chatgpt?color=brightgreen)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-chatgpt)\n[![npm bundle size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002Freact-native-chatgpt)](https:\u002F\u002Fbundlephobia.com\u002Fresult?p=react-native-chatgpt)\n![platforms: ios, android, web](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-ios%2C%20android-blue)\n[![license MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-brightgreen)](https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fblob\u002Fmaster\u002FLICENSE)\n[![runs with expo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FRuns%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https:\u002F\u002Fsnack.expo.dev\u002F@rgommezz\u002Freact-native-chatgpt)\n\n \u003Cp>\u003Ci>A React Native wrapper around \u003Ca href=\"https:\u002F\u002Fopenai.com\u002Fblog\u002Fchatgpt\">ChatGPT\u003C\u002Fa> by \u003Ca href=\"https:\u002F\u002Fopenai.com\">OpenAI\u003C\u002Fa> to seamlessly integrate it with your applications. \u003Cb>It handles authentication, streamed responses, and keeping track of conversations. All without the need of a server.\u003C\u002Fb>\u003C\u002Fi>\u003C\u002Fp>\n \n https:\u002F\u002Fuser-images.githubusercontent.com\u002F4982414\u002F215356661-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:\u002F\u002Fsnack.expo.dev\u002F@rgommezz\u002Freact-native-chatgpt) to see it in action. The source code for the example is under the [\u002Fexample](\u002Fexample) 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:\u002F\u002Fgithub.com\u002Freact-native-webview\u002Freact-native-webview\u002Fblob\u002Fmaster\u002Fdocs\u002FGetting-Started.md)\n- [react-native-vector-icons](https:\u002F\u002Fgithub.com\u002Foblador\u002Freact-native-vector-icons#installation)\n- [expo-secure-store](https:\u002F\u002Fgithub.com\u002Fexpo\u002Fexpo\u002Ftree\u002Fsdk-47\u002Fpackages\u002Fexpo-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 '.\u002FApp';\n\nconst Root = () => {\n  return (\n    \u003CChatGptProvider>\n      \u003CApp \u002F>\n    \u003C\u002FChatGptProvider>\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>`                   | Extra style applied to the webview container                                                                                                                                                                                            |\n| `backdropStyles`         | no       | `StyleProp\u003CViewStyle>`                   | 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: () => 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 |\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}>;\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 = () => {\n  const { sendMessage } = useChatGpt();\n\n  const handleSendMessage = async () => {\n    try {\n      const { message, conversationId, messageId } = await sendMessage(\n        'Outline possible topics for an SEO article'\n      );\n\n      \u002F\u002F 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        \u002F\u002F Handle error accordingly\n      }\n    }\n  };\n\n  return \u003CButton onPress={handleSendMessage} title=\"Send message\" \u002F>;\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  }) => void;\n  onError?: (err: ChatGptError) => 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 = () => {\n  const { sendMessage } = useChatGpt();\n  const [response, setResponse] = useState('');\n\n  const handleSendMessage = () => {\n    sendMessage({\n      message: 'Outline possible topics for an SEO article',\n      onAccumulatedResponse: ({ message, isDone }) => {\n        setResponse(message);\n        if (isDone) {\n          \u002F\u002F The response is complete, you can send another message\n        }\n      },\n      onError: (e) => {\n        \u002F\u002F Handle error accordingly\n      },\n    });\n  };\n\n  return (\n    \u003CView style={{ flex: 1 }}>\n      \u003CButton onPress={handleSendMessage} title=\"Get streamed response\" \u002F>\n      \u003CText>{response}\u003C\u002FText>\n    \u003C\u002FView>\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:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fchatgpt-api), which served as inspiration.\n- [OpenAI](https:\u002F\u002Fopenai.com) for creating [ChatGPT](https:\u002F\u002Fopenai.com\u002Fblog\u002Fchatgpt\u002F) 🔥\n\n## License\n\nMIT © [Raul Gomez Acuna](https:\u002F\u002Fraulgomez.io\u002F)\n\nIf you found this project interesting, please consider following me on [twitter](https:\u002F\u002Ftwitter.com\u002Frgommezz)\n","# react-native-chatgpt\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-native-chatgpt?color=brightgreen)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-chatgpt)\n[![npm bundle size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002Freact-native-chatgpt)](https:\u002F\u002Fbundlephobia.com\u002Fresult?p=react-native-chatgpt)\n![platforms: ios, android, web](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-ios%2C%20android-blue)\n[![license MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-brightgreen)](https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fblob\u002Fmaster\u002FLICENSE)\n[![runs with expo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FRuns%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https:\u002F\u002Fsnack.expo.dev\u002F@rgommezz\u002Freact-native-chatgpt)\n\n \u003Cp>\u003Ci>一个基于 \u003Ca href=\"https:\u002F\u002Fopenai.com\u002Fblog\u002Fchatgpt\">ChatGPT\u003C\u002Fa> 的 React Native 封装库，由 \u003Ca href=\"https:\u002F\u002Fopenai.com\">OpenAI\u003C\u002Fa> 提供，可无缝集成到您的应用中。\u003Cb>它负责处理认证、流式响应以及会话管理，完全无需后端服务器。\u003C\u002Fb>\u003C\u002Fi>\u003C\u002Fp>\n \n https:\u002F\u002Fuser-images.githubusercontent.com\u002F4982414\u002F215356661-c81552d4-27f1-4b64-abd4-129bc6808c0a.mp4\n\n\n- [功能特性](#features)\n- [免责声明](#disclaimer)\n- [试用](#try-it-out)\n- [安装](#installation)\n- [API](#api)\n  - [`ChatGptProvider`](#chatgptprovider)\n  - [`useChatGpt`](#usechatgpt)\n- [贡献](#contributing)\n- [致谢](#credits)\n- [许可证](#license)\n\n## 功能特性\n\n- **:fire: 100% 客户端实现**: 您可以轻松地将强大的聊天机器人集成到您的应用中，而无需自定义后端。\n- **:zap: 流式支持**: 体验闪电般的响应速度，一旦内容可用即可显示，类似于 ChatGPT 的网页版交互界面。\n- **:robot: 对话式交互**: ChatGPT 会记住您之前的对话内容。只需在发送消息时附带 `conversationId` 和 `messageId`，即可继续之前的对话。\n- **:iphone: 兼容 Expo**: 无需弹出项目即可使用此组件。\n- **:hammer_and_wrench: 类型安全**: 完全使用 TypeScript 编写。\n- **:computer: Snack 示例**: 提供了一个 Snack 链接，您可以在浏览器中直接试用。\n\n## 免责声明\n\n本库并非官方的 ChatGPT 库。它旨在简化 ChatGPT 与 React Native 应用程序的集成过程。因此，请将其视为实验性工具，并谨慎用于生产环境 :wink:。\n\n## 试用\n\n🧑‍💻 运行 Snack [示例应用](https:\u002F\u002Fsnack.expo.dev\u002F@rgommezz\u002Freact-native-chatgpt)，查看其实际效果。示例源代码位于 [\u002Fexample](\u002Fexample) 文件夹中。\n\n## 安装\n\n```sh\nnpm install react-native-chatgpt\n```\n\n### Expo\n\n您还需要安装 `react-native-webview` 和 `expo-secure-store`：\n\n```sh\nnpx expo install react-native-webview expo-secure-store\n```\n\n无需其他步骤。\n\n### 纯 React Native 应用\n\n您还需要安装 `react-native-webview`、`react-native-vector-icons` 和 `expo-secure-store`：\n\n```sh\nnpm install react-native-webview react-native-vector-icons expo-secure-store\n```\n\n安装完成后，还需按照以下说明进一步配置这些库：\n\n- [react-native-webview](https:\u002F\u002Fgithub.com\u002Freact-native-webview\u002Freact-native-webview\u002Fblob\u002Fmaster\u002Fdocs\u002FGetting-Started.md)\n- [react-native-vector-icons](https:\u002F\u002Fgithub.com\u002Foblador\u002Freact-native-vector-icons#installation)\n- [expo-secure-store](https:\u002F\u002Fgithub.com\u002Fexpo\u002Fexpo\u002Ftree\u002Fsdk-47\u002Fpackages\u002Fexpo-secure-store#installation-in-bare-react-native-projects)\n\n## API\n\n该库的主要 API 包括一个 Provider 组件和一个 Hook。\n\n### `ChatGptProvider`\n\nProvider 组件应放置在 **您的 React Native 应用程序的根节点**，如下所示：\n\n```jsx\nimport { ChatGptProvider } from 'react-native-chatgpt';\nimport App from '.\u002FApp';\n\nconst Root = () => {\n  return (\n    \u003CChatGptProvider>\n      \u003CApp \u002F>\n    \u003C\u002FChatGptProvider>\n  );\n};\n```\n\n#### 属性\n\n`ChatGptProvider` 的以下属性允许您自定义用于处理 ChatGPT 认证的模态窗口样式，以及聊天机器人请求的超时时间设置。\n\n| 名称                     | 必需 | 类型                                     | 描述                                                                                                                                                                                                                             |\n| ------------------------ | -------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `children`               | 是      | `React.Node`                             | 您的应用组件树                                                                                                                                                                                                         |\n| `containerStyles`        | 否       | `StyleProp\u003CViewStyle>`                   | 应用于 WebView 容器的额外样式                                                                                                                                                                                            |\n| `backdropStyles`         | 否       | `StyleProp\u003CViewStyle>`                   | 应用于背景视图的额外样式。默认使用半透明背景颜色 `rgba(0, 0, 0, 0.5)`                                                                                                                   |\n| `renderCustomCloseIcon`  | 否       | `(closeModal: () => void) => React.Node` | 自定义关闭按钮渲染器，放置在 WebView 顶部。默认情况下，在右上角显示一个黑色叉号 (X)。请务必将提供的 `closeModal` 函数与您的 `onPress` 事件绑定 |\n| `requestTimeout`         | 否       | `number`                                 | 在取消请求之前，您愿意等待“普通”请求完成的最大时间（单位：毫秒），默认值为 30000 毫秒                                                                                                         |\n| `streamedRequestTimeout` | 否       | `number`                                 | 在取消请求之前，您愿意等待“流式”请求完成的最大时间（单位：毫秒），默认值为 15000 毫秒                                                                                                 |\n\n### `useChatGpt`\n\n该 Hook 返回一个包含以下属性的对象：\n\n#### `status`\n\n```ts\nstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated';\n```\n\n- `initializing`: 表示库正在启动。此时不应假设任何认证状态，需等待该值变为 `logged-out` 或 `authenticated`。\n- `logged-out`: 表示您尚未认证，或您的 ChatGPT 访问令牌已过期。\n- `getting_auth_token`: 这是一个短暂的状态，在登录模态框关闭后持续几秒钟。它表示库正在后台获取 ChatGPT 的认证令牌。您可以利用此状态来显示加载指示器。\n- `authenticated`: 表示您已登录。只有在此状态下，您才能与聊天机器人进行交互。\n\nChatGPT 颁发的 JWT 令牌有效期为 7 天，因此您大约需要每周重新认证一次。当状态从 `authenticated` 变为 `logged-out` 时，库会提示您需要重新认证。\n\n#### `login`\n\n```ts\nfunction login(): void;\n```\n\n执行此函数会打开登录模态框并触发 ChatGPT 的认证流程。\n\n成功完成后，`status` 将从 `logged-out` 变为 `getting_auth_token`（持续几秒钟），最终变为 `authenticated`。\n\n#### `sendMessage`\n\n这是库的核心函数，用于向聊天机器人发送消息并返回响应。根据传入的参数，它可以以两种不同的方式使用：\n\n##### 标准模式\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}>;\n```\n\n它返回一个包含响应的 Promise。这是最简单的使用方式，但由于需要等待完整响应返回，处理速度较慢。\n\n如果您想跟踪对话，请使用响应对象中的 `conversationId` 和 `messageId`，并在下次调用 `sendMessage` 时再次传递它们。\n\n如果服务器拒绝请求或发生超时，将抛出 `ChatGptError` 异常。\n\n```jsx\nimport React from 'react';\nimport { Button } from 'react-native';\nimport { useChatGpt, ChatGptError } from 'react-native-chatgpt';\n\nconst Example = () => {\n  const { sendMessage } = useChatGpt();\n\n  const handleSendMessage = async () => {\n    try {\n      const { message, conversationId, messageId } = await sendMessage(\n        'Outline possible topics for an SEO article'\n      );\n\n      \u002F\u002F 用户阅读完响应后，再发送一条消息\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        \u002F\u002F 根据错误类型进行相应处理\n      }\n    }\n  };\n\n  return \u003CButton onPress={handleSendMessage} title=\"Send message\" \u002F>;\n};\n```\n\n##### 流式传输模式\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  }) => void;\n  onError?: (err: ChatGptError) => void;\n}): void;\n```\n\n它接受一个回调函数，该回调函数会随着响应的更新不断被调用。此版本适用于需要在响应可用时立即显示的场景，类似于 ChatGPT API 在网页 Playground 中的工作方式。\n\n如果您想跟踪对话，请使用响应对象中的 `conversationId` 和 `messageId`，并在下次调用 `sendMessage` 时再次传递它们。\n\n通过检查响应对象中的 `isDone` 属性，可以检测到响应是否已完成。\n\n如果发生错误，`onError` 回调函数将接收到一个 `ChatGptError` 错误对象。\n\n```jsx\nimport React, { useState } from 'react';\nimport { Button } from 'react-native';\nimport { useChatGpt, ChatGptError } from 'react-native-chatgpt';\n\nconst StreamExample = () => {\n  const { sendMessage } = useChatGpt();\n  const [response, setResponse] = useState('');\n\n  const handleSendMessage = () => {\n    sendMessage({\n      message: 'Outline possible topics for an SEO article',\n      onAccumulatedResponse: ({ message, isDone }) => {\n        setResponse(message);\n        if (isDone) {\n          \u002F\u002F 响应已完成，可以发送另一条消息\n        }\n      },\n      onError: (e) => {\n        \u002F\u002F 根据错误类型进行相应处理\n      },\n    });\n  };\n\n  return (\n    \u003CView style={{ flex: 1 }}>\n      \u003CButton onPress={handleSendMessage} title=\"Get streamed response\" \u002F>\n      \u003CText>{response}\u003C\u002FText>\n    \u003C\u002FView>\n  );\n};\n```\n\n:warning: 请注意，ChatGPT 后端实施了速率限制。这意味着如果您连续发送过多消息，可能会收到状态码为 429 的错误。\n\n## 贡献\n\n请参阅 [贡献指南](CONTRIBUTING.md)，了解如何为本仓库做出贡献以及开发工作流程。\n\n## 致谢\n\n- 非官方的 [node.js 客户端](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fchatgpt-api)，它为我们提供了灵感。\n- [OpenAI](https:\u002F\u002Fopenai.com) 创造了 [ChatGPT](https:\u002F\u002Fopenai.com\u002Fblog\u002Fchatgpt\u002F) 🔥\n\n## 许可证\n\nMIT 许可证 © [Raul Gomez Acuna](https:\u002F\u002Fraulgomez.io\u002F)\n\n如果您对这个项目感兴趣，请考虑在 [twitter](https:\u002F\u002Ftwitter.com\u002Frgommezz) 上关注我。","# react-native-chatgpt 快速上手指南\n\n`react-native-chatgpt` 是一个专为 React Native 设计的 ChatGPT 封装库。它支持**纯客户端运行**（无需后端服务器）、**流式响应**以及**多轮对话上下文管理**，并完美兼容 Expo。\n\n## 环境准备\n\n- **系统要求**：支持 iOS、Android 和 Web 平台。\n- **前置依赖**：\n  - Node.js & npm\u002Fyarn\n  - React Native 项目（Expo 或 Bare 项目均可）\n  - TypeScript（推荐，库本身由 TS 编写）\n\n## 安装步骤\n\n### 1. 安装核心库\n\n```sh\nnpm install react-native-chatgpt\n```\n\n### 2. 安装额外依赖\n\n根据你的项目类型，执行以下命令安装必要的原生依赖：\n\n#### 如果你使用 Expo\n\n```sh\nnpx expo install react-native-webview expo-secure-store\n```\n*Expo 项目无需额外配置，安装即可直接使用。*\n\n#### 如果你是 Bare React Native 项目\n\n```sh\nnpm install react-native-webview react-native-vector-icons expo-secure-store\n```\n\n安装完成后，请参照以下官方文档完成原生链接配置：\n- [react-native-webview 配置](https:\u002F\u002Fgithub.com\u002Freact-native-webview\u002Freact-native-webview\u002Fblob\u002Fmaster\u002Fdocs\u002FGetting-Started.md)\n- [react-native-vector-icons 配置](https:\u002F\u002Fgithub.com\u002Foblador\u002Freact-native-vector-icons#installation)\n- [expo-secure-store (Bare 项目) 配置](https:\u002F\u002Fgithub.com\u002Fexpo\u002Fexpo\u002Ftree\u002Fsdk-47\u002Fpackages\u002Fexpo-secure-store#installation-in-bare-react-native-projects)\n\n## 基本使用\n\n### 1. 包裹根组件\n\n在应用入口处使用 `ChatGptProvider` 包裹你的根组件，以初始化认证上下文。\n\n```jsx\nimport { ChatGptProvider } from 'react-native-chatgpt';\nimport App from '.\u002FApp';\n\nconst Root = () => {\n  return (\n    \u003CChatGptProvider>\n      \u003CApp \u002F>\n    \u003C\u002FChatGptProvider>\n  );\n};\n```\n\n### 2. 调用聊天功能\n\n在子组件中使用 `useChatGpt` Hook 获取发送消息的方法。你需要先调用 `login()` 触发登录弹窗，认证成功后即可发送消息。\n\n以下是一个包含**登录**和**标准消息发送**的最简示例：\n\n```jsx\nimport React from 'react';\nimport { Button, View, Text, Alert } from 'react-native';\nimport { useChatGpt, ChatGptError } from 'react-native-chatgpt';\n\nconst ChatExample = () => {\n  const { status, login, sendMessage } = useChatGpt();\n\n  const handleLogin = () => {\n    login(); \u002F\u002F 打开 ChatGPT 登录弹窗\n  };\n\n  const handleSendMessage = async () => {\n    if (status !== 'authenticated') {\n      Alert.alert('提示', '请先登录');\n      return;\n    }\n\n    try {\n      \u002F\u002F 发送第一条消息\n      const { message, conversationId, messageId } = await sendMessage(\n        '列出三个适合初学者的 React Native 项目点子'\n      );\n      \n      console.log('AI 回复:', message);\n\n      \u002F\u002F 发送第二条消息（携带上下文，实现多轮对话）\n      const { message: followUp } = await sendMessage(\n        '详细解释第一个点子',\n        {\n          conversationId,\n          messageId,\n        }\n      );\n      \n      console.log('后续回复:', followUp);\n    } catch (error) {\n      if (error instanceof ChatGptError) {\n        console.error('ChatGPT 错误:', error.message);\n      } else {\n        console.error('未知错误:', error);\n      }\n    }\n  };\n\n  return (\n    \u003CView style={{ padding: 20 }}>\n      {status === 'logged-out' && (\n        \u003CButton title=\"登录 ChatGPT\" onPress={handleLogin} \u002F>\n      )}\n      \n      {status === 'authenticated' && (\n        \u003CButton title=\"发送消息\" onPress={handleSendMessage} \u002F>\n      )}\n\n      {status === 'getting_auth_token' && (\n        \u003CText>正在获取认证令牌...\u003C\u002FText>\n      )}\n      \n      \u003CText>当前状态：{status}\u003C\u002FText>\n    \u003C\u002FView>\n  );\n};\n\nexport default ChatExample;\n```\n\n### 关键状态说明\n- `logged-out`: 未登录或 Token 过期，需调用 `login()`。\n- `getting_auth_token`: 登录成功后正在后台获取 Token 的过渡状态。\n- `authenticated`: 已认证，可以正常调用 `sendMessage`。\n- **注意**: ChatGPT 的 JWT Token 有效期为 7 天，过期后状态会自动变回 `logged-out`，需重新登录。\n\n### 进阶：流式响应 (Streaming)\n若需类似网页版 ChatGPT 的打字机效果，可使用 `sendMessage` 的对象参数形式：\n\n```jsx\nsendMessage({\n  message: '写一首关于春天的诗',\n  onAccumulatedResponse: ({ message, isDone }) => {\n    \u002F\u002F message 会不断更新，直到 isDone 为 true\n    setResponseText(message); \n  },\n  onError: (err) => {\n    \u002F\u002F 处理错误\n  },\n});\n```","一家初创团队正在开发一款面向留学生的跨语言互助 App，需要在移动端快速集成智能对话功能以帮助用户实时翻译和解答生活难题。\n\n### 没有 react-native-chatgpt 时\n- **后端开发负担重**：团队必须额外搭建 Node.js 或 Python 服务器来中转 OpenAI 请求，处理复杂的鉴权逻辑，导致上线周期延长至少两周。\n- **响应体验迟钝**：由于无法轻松实现流式传输（Streaming），用户发送消息后需等待数秒才能看到完整回复，交互过程显得卡顿且不自然。\n- **上下文记忆缺失**：自行维护多轮对话的历史记录（conversationId）极易出错，导致 AI 经常“失忆”，无法连贯地回答后续问题。\n- **多端适配繁琐**：为了兼容 iOS、Android 和 Web 端，需要分别处理 WebView 和安全存储（SecureStore）的底层配置，代码冗余度高。\n\n### 使用 react-native-chatgpt 后\n- **纯客户端极速集成**：借助其 100% 客户端特性，团队直接在前端通过 `ChatGptProvider` 包裹应用即可运行，完全省去了后端中间层，当天即完成功能上线。\n- **打字机般流畅反馈**：内置的流式响应支持让文字逐字显现，用户体验与网页版 ChatGPT 一致，显著降低了等待焦虑感。\n- **自动管理对话状态**：工具自动追踪并传递 `conversationId` 和 `messageId`，AI 能精准记住前文语境，实现了真正的智能多轮交互。\n- **开箱即用的跨平台能力**：天然兼容 Expo 及主流原生环境，自动处理了 WebView 和安全存储的依赖配置，一套代码无缝运行于所有目标设备。\n\nreact-native-chatgpt 通过消除后端依赖和简化复杂状态管理，让开发者能以最低成本在移动应用中交付原生级的智能对话体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Frgommezz_react-native-chatgpt_24959935.png","rgommezz","Raúl Gómez","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Frgommezz_652066b1.jpg","React (Native) Expert with 8+ years crafting OSS, comercial and personal projects ⚛️ Knowledge sharer via workshops, talks and articles 🧑‍🏫 ",null,"London","https:\u002F\u002Fraulgomez.io","https:\u002F\u002Fgithub.com\u002Frgommezz",[24,28],{"name":25,"color":26,"percentage":27},"TypeScript","#3178c6",93.7,{"name":29,"color":30,"percentage":31},"JavaScript","#f1e05a",6.3,586,79,"2026-03-22T20:21:57","MIT",2,"","未说明",{"notes":40,"python":38,"dependencies":41},"这是一个 React Native 库，而非独立的 AI 模型运行环境。它通过 WebView 封装 ChatGPT 网页版实现功能，所有计算在 OpenAI 服务器端进行，本地无需 GPU 或大量内存。支持 iOS、Android 和 Web 平台，兼容 Expo（无需 eject）。需要安装 react-native-webview、expo-secure-store（Expo 项目）或额外安装 react-native-vector-icons（裸 React Native 项目）。认证令牌有效期为 7 天，需定期重新登录。注意 OpenAI 后端有速率限制，频繁请求可能返回 429 错误。",[42,43,44],"react-native-webview","expo-secure-store","react-native-vector-icons",[46],"语言模型",[48,49,50,51],"chatbot","chatgpt","react","react-native","ready","2026-03-27T02:49:30.150509","2026-04-20T12:53:49.915361",[56,61,66,71,76,81,86],{"id":57,"question_zh":58,"answer_zh":59,"source_url":60},44905,"可以使用官方的 ChatGPT API Key 吗？","不可以。该库的设计原理是通过 WebView 模拟用户行为（即爬虫方式），不涉及后端服务器转发，因此不支持直接使用官方 `API_KEY`。如需使用官方 API，需要自行搭建后端服务或寻找其他支持 API 直连的客户端库。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F8",{"id":62,"question_zh":63,"answer_zh":64,"source_url":65},44899,"为什么登录后收到 403 Forbidden 错误？","这通常是由于 IP 地址限制问题。建议尝试连接 VPN 后再次运行项目或 Expo Snack 示例。如果问题依旧，请检查您的网络环境是否被 OpenAI 屏蔽。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F5",{"id":67,"question_zh":68,"answer_zh":69,"source_url":70},44900,"如何在 iOS 模拟器上解决登录弹窗内容无法看清的问题？","该问题主要出现在 iOS 模拟器的 WebView 中，导致登录模态框内容不可读。目前社区尚未提供确切的代码修复方案，但确认 Android 模拟器表现正常。建议暂时在真机或 Android 环境下测试登录流程，并关注后续库的更新以修复 iOS WebView 渲染问题。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F7",{"id":72,"question_zh":73,"answer_zh":74,"source_url":75},44901,"如何强制退出登录并重新开始？","库中目前没有内置的登出函数。用户可以通过手动删除存储的 `TOKEN_ACCESS_KEY` 并重新加载应用（例如重新挂载 App.tsx 组件）来实现强制登出效果。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F12",{"id":77,"question_zh":78,"answer_zh":79,"source_url":80},44902,"遇到 \"Unable to resolve @babel\u002Fruntime\u002Fhelpers\u002FinteropRequireDefault\" 报错怎么办？","维护者表示在本地示例项目和 Expo Snack 中均无法复现此问题，这通常与环境配置有关。请确保您的依赖安装完整，尝试清理缓存（如 `expo start -c` 或删除 `node_modules` 后重装），并提供具体的环境版本信息以便进一步排查。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F6",{"id":82,"question_zh":83,"answer_zh":84,"source_url":85},44903,"可以通过该库直接注册新的 ChatGPT 账号吗？","不建议通过该库进行注册。维护者明确说明未测试过通过库内 WebView 创建新账号的流程，且用户反馈注册时会重定向回登录页。强烈建议先通过 OpenAI 官方网站完成账号注册，然后再使用该库进行登录。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F4",{"id":87,"question_zh":88,"answer_zh":89,"source_url":90},44904,"会话过期后出现 403 错误且未自动刷新怎么办？","正常情况下，当应用回到前台时会自动刷新会话（参考源码 `ModalWebView.tsx` 第 96-104 行）。如果遇到 403 错误且未触发刷新，请检查是否正确集成了应用状态监听，并确保在应用获得焦点时调用了相应的刷新逻辑。若问题持续，需提供更多调试细节。","https:\u002F\u002Fgithub.com\u002Frgommezz\u002Freact-native-chatgpt\u002Fissues\u002F10",[],[93,106,114,123,131,139],{"id":94,"name":95,"github_repo":96,"description_zh":97,"stars":98,"difficulty_score":99,"last_commit_at":100,"category_tags":101,"status":52},10095,"AutoGPT","Significant-Gravitas\u002FAutoGPT","AutoGPT 是一个旨在让每个人都能轻松使用和构建 AI 的强大平台，核心功能是帮助用户创建、部署和管理能够自动执行复杂任务的连续型 AI 智能体。它解决了传统 AI 应用中需要频繁人工干预、难以自动化长流程工作的痛点，让用户只需设定目标，AI 即可自主规划步骤、调用工具并持续运行直至完成任务。\n\n无论是开发者、研究人员，还是希望提升工作效率的普通用户，都能从 AutoGPT 中受益。开发者可利用其低代码界面快速定制专属智能体；研究人员能基于开源架构探索多智能体协作机制；而非技术背景用户也可直接选用预置的智能体模板，立即投入实际工作场景。\n\nAutoGPT 的技术亮点在于其模块化“积木式”工作流设计——用户通过连接功能块即可构建复杂逻辑，每个块负责单一动作，灵活且易于调试。同时，平台支持本地自托管与云端部署两种模式，兼顾数据隐私与使用便捷性。配合完善的文档和一键安装脚本，即使是初次接触的用户也能在几分钟内启动自己的第一个 AI 智能体。AutoGPT 正致力于降低 AI 应用门槛，让人人都能成为 AI 的创造者与受益者。",183572,3,"2026-04-20T04:47:55",[102,46,103,104,105],"Agent","插件","开发框架","图像",{"id":107,"name":108,"github_repo":109,"description_zh":110,"stars":111,"difficulty_score":36,"last_commit_at":112,"category_tags":113,"status":52},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",161147,"2026-04-19T23:31:47",[104,102,46],{"id":115,"name":116,"github_repo":117,"description_zh":118,"stars":119,"difficulty_score":120,"last_commit_at":121,"category_tags":122,"status":52},10072,"DeepSeek-V3","deepseek-ai\u002FDeepSeek-V3","DeepSeek-V3 是一款由深度求索推出的开源混合专家（MoE）大语言模型，旨在以极高的效率提供媲美顶尖闭源模型的智能服务。它拥有 6710 亿总参数，但在处理每个 token 时仅激活 370 亿参数，这种设计巧妙解决了大规模模型推理成本高、速度慢的难题，让高性能 AI 更易于部署和应用。\n\n这款模型特别适合开发者、研究人员以及需要构建复杂 AI 应用的企业团队使用。无论是进行代码生成、逻辑推理还是多轮对话开发，DeepSeek-V3 都能提供强大的支持。其独特之处在于采用了无辅助损失的负载均衡策略和多令牌预测训练目标，前者在提升计算效率的同时避免了性能损耗，后者则显著增强了模型表现并加速了推理过程。此外，模型在 14.8 万亿高质量令牌上完成预训练，且整个训练过程异常稳定，未出现不可恢复的损失尖峰。凭借仅需 278.8 万 H800 GPU 小时即可完成训练的高效特性，DeepSeek-V3 为开源社区树立了一个兼顾性能与成本效益的新标杆。",102693,5,"2026-04-20T03:58:04",[46],{"id":124,"name":125,"github_repo":126,"description_zh":127,"stars":128,"difficulty_score":99,"last_commit_at":129,"category_tags":130,"status":52},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[46,105,102,104],{"id":132,"name":133,"github_repo":134,"description_zh":135,"stars":136,"difficulty_score":36,"last_commit_at":137,"category_tags":138,"status":52},8553,"spec-kit","github\u002Fspec-kit","Spec Kit 是一款专为提升软件开发效率而设计的开源工具包，旨在帮助团队快速落地“规格驱动开发”（Spec-Driven Development）模式。传统开发中，需求文档往往与代码实现脱节，导致沟通成本高且结果不可控；而 Spec Kit 通过将规格说明书转化为可执行的指令，让 AI 直接依据明确的业务场景生成高质量代码，从而减少从零开始的随意编码，确保产出结果的可预测性。\n\n该工具特别适合希望利用 AI 辅助编程的开发者、技术负责人及初创团队。无论是启动全新项目还是在现有工程中引入规范化流程，用户只需通过简单的命令行操作，即可初始化项目并集成主流的 AI 编程助手。其核心技术亮点在于“规格即代码”的理念，支持社区扩展与预设模板，允许用户根据特定技术栈定制开发流程。此外，Spec Kit 强调官方维护的安全性，提供稳定的版本管理，帮助开发者在享受 AI 红利的同时，依然牢牢掌握架构设计的主动权，真正实现从“凭感觉写代码”到“按规格建系统”的转变。",88749,"2026-04-17T09:48:14",[46,105,102,104],{"id":140,"name":141,"github_repo":142,"description_zh":143,"stars":144,"difficulty_score":36,"last_commit_at":145,"category_tags":146,"status":52},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[104,46]]