{"id":22412719,"url":"https://github.com/juliegibbs/react-native-ai","last_synced_at":"2026-04-12T13:52:16.316Z","repository":{"id":236817799,"uuid":"793209244","full_name":"JulieGibbs/react-native-ai","owner":"JulieGibbs","description":"Full stack framework for building cross-platform mobile AI apps","archived":false,"fork":false,"pushed_at":"2024-04-28T18:19:35.000Z","size":7349,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T08:47:05.626Z","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/JulieGibbs.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":"2024-04-28T18:19:19.000Z","updated_at":"2024-04-29T02:37:56.000Z","dependencies_parsed_at":"2024-04-28T19:39:03.903Z","dependency_job_id":null,"html_url":"https://github.com/JulieGibbs/react-native-ai","commit_stats":null,"previous_names":["juliegibbs/react-native-ai"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulieGibbs%2Freact-native-ai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulieGibbs%2Freact-native-ai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulieGibbs%2Freact-native-ai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulieGibbs%2Freact-native-ai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JulieGibbs","download_url":"https://codeload.github.com/JulieGibbs/react-native-ai/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245774161,"owners_count":20669919,"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":["ai","cross-platform","express","llm","react","react-native","streaming"],"created_at":"2024-12-05T14:10:04.776Z","updated_at":"2026-04-12T13:52:11.284Z","avatar_url":"https://github.com/JulieGibbs.png","language":"TypeScript","funding_links":[],"categories":[],"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## 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%2Fjuliegibbs%2Freact-native-ai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliegibbs%2Freact-native-ai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliegibbs%2Freact-native-ai/lists"}