{"id":13594470,"url":"https://github.com/dabit3/react-native-ai","last_synced_at":"2025-11-17T15:10:43.815Z","repository":{"id":209467730,"uuid":"713045475","full_name":"dabit3/react-native-ai","owner":"dabit3","description":"Full stack framework for building cross-platform mobile AI apps","archived":false,"fork":false,"pushed_at":"2024-11-21T22:02:40.000Z","size":7300,"stargazers_count":1191,"open_issues_count":10,"forks_count":163,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-10-16T20:23:35.518Z","etag":null,"topics":["ai","cross-platform","express","llm","react","react-native","streaming"],"latest_commit_sha":null,"homepage":"https://nader.codes","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/dabit3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-01T18:16:40.000Z","updated_at":"2025-10-16T08:15:38.000Z","dependencies_parsed_at":"2024-11-23T14:10:50.227Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/react-native-ai","commit_stats":{"total_commits":86,"total_committers":4,"mean_commits":21.5,"dds":"0.046511627906976716","last_synced_commit":"e72fd88fcf42785342d8ac05633f8ba6f1acd176"},"previous_names":["dabit3/react-native-ai"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/dabit3/react-native-ai","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-ai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-ai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-ai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-ai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/react-native-ai/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-ai/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284903786,"owners_count":27082112,"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","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ai","cross-platform","express","llm","react","react-native","streaming"],"created_at":"2024-08-01T16:01:34.091Z","updated_at":"2025-11-17T15:10:43.797Z","avatar_url":"https://github.com/dabit3.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Ceasefire Now](https://badge.techforpalestine.org/default)](https://techforpalestine.org/learn-more)\n\n# React Native AI\n\nFull stack framework for building cross-platform mobile AI apps supporting LLM real-time / streaming text and chat UIs, image services and natural language to images with multiple models, and image processing.\n\n![React Native AI](https://i.imgur.com/AOOgBM0.png)\n\n\u003e Check out the video tutorial [here](https://www.youtube.com/watch?v=zf3NnTU5pr4)\n\n## Features\n\n- LLM support for [OpenAI](https://openai.com/) ChatGPT, [Anthropic](https://anthropic.com) Claude, [Cohere](https://cohere.com/), Cohere Web, [Gemini](https://makersuite.google.com), and [Mistral](https://mistral.ai/)\n- An array of image models provided by [Fal.ai](https://www.fal.ai/)\n- Real-time / streaming responses from all providers\n- OpenAI Assistants including code interpreter and retrieval\n- Server proxy to easily enable authentication and authorization with auth provider of choice.\n- Theming (comes out of the box with 5 themes) - easily add additional themes with just a few lines of code.\n- Image processing with [ByteScale](https://bytescale.com/)\n\n![React Native AI Preview](https://i.imgur.com/D4LIVal.png)\n\n## Usage\n\nGenerate a new project by running:\n\n```sh\nnpx rn-ai\n```\n\nNext, either configure your environment variables with the CLI, or do so later.\n\n### Running the app\n\nChange into the app directory and run:\n\n```sh\nnpm start\n```\n\n### Running the server\n\nChange into the server directory and run:\n\n```sh\nnpm run dev\n```\n\n### Environment variables\n\nThe server environment variables are available in `server/.env.example`. If already not present, update this file name to `.env` and configure server environment variables.\n\n## Theming\n\nTo add a new theme, open `app/src/theme.ts` and add a new theme with the following configuration:\n\n```ts\nconst christmas = {\n  // extend an existing theme or start from scratch\n  ...lightTheme,\n  name: 'Christmas',\n  label: 'christmas',\n  tintColor: '#ff0000',\n  textColor: '#378b29',\n  tabBarActiveTintColor: '#378b29',\n  tabBarInactiveTintColor: '#ff0000',\n  placeholderTextColor: '#378b29',\n}\n```\n\nAt the bottom of the file, export the new theme:\n\n```ts\nexport {\n  lightTheme, darkTheme, hackerNews, miami, vercel, christmas\n}\n```\n\n![React Native AI Themes](https://i.imgur.com/7Gser4F.png)\n\n## Configuring LLM Models\n\nHere is how to add new or remove existing LLM models.\n\n### In the app\n\nYou can add or configure a model by updating `MODELS` in `constants.ts`.\n\nFor removing models, just remove the models you do not want to support.\n\nFor adding models, once the model definition is added to the `MODELS` array, you should update `src/screens/chat.tsx` to support the new model:\n\n1. Create local state to hold new model data\n2. Update `chat()` function to handle new model type\n3. Create `generateModelReponse` function to call new model\n4. Update `getChatType` in `utils.ts` to configure the LLM type that will correspond with your server path.\n5. Render new model in UI\n\n```tsx\n{\n  chatType.label.includes('newModel') \u0026\u0026 (\n    \u003cFlatList\n      data={newModelReponse.messages}\n      renderItem={renderItem}\n      scrollEnabled={false}\n    /\u003e\n  )\n}\n```\n\n### On the server\n\nCreate a new file in the `server/src/chat` folder that corresponds to the model type you created in the mobile app. You can probably copy and re-use a lot of the streaming code from the other existing paths to get you started.\n\nNext, update `server/src/chat/chatRouter` to use the new route.\n\n## Configuring Image Models\n\nHere is how to add new or remove existing Image models.\n\n### In the app\n\nYou can add or configure a model by updating `IMAGE_MODELS` in `constants.ts`.\n\nFor removing models, just remove the models you do not want to support.\n\nFor adding models, once the model definition is add to the `IMAGE_MODELS` array, you should update `src/screens/images.tsx` to support the new model.\n\nMain consideration is input. Does the model take text, image, or both as inputs?\n\nThe app is configured to handle both, but you must update the `generate` function to pass the values to the API accordingly.\n\n### On the server\n\n#### Fal.ai\n\nIn `server/src/images/fal`, update the handler function to take into account the new model.\n\n#### Other API providers\n\nCreate a new file in `server/src/images/modelName`, update the handler function to handle the new API call.\n\nNext, update `server/src/images/imagesRouter` to use the new route.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-native-ai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Freact-native-ai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-native-ai/lists"}