Introducing React Native AI
React Native AI is a full stack framework for building cross-platform mobile AI apps
React Native AI is a full stack framework for building cross-platform mobile AI apps supporting LLM real-time / streaming text and chat UIs, image services + natural language to image with multiple models, and image processing.
Check out the social announcement here, and the repo here. Please give it a ⭐️ if you think it’s cool!
Video tutorial is also now available here.
I’ve spent the past few months building and launching various AI experiments and products like RoamAround ($10M valuation, 7 million+ users) and AI Buddy ($1,000+ MRR, 2,000 + users).
During that time I’ve learned a lot about how to piece together everything needed to build and launch successful AI apps, lately with a focus on mobile and launching to the App stores.
What I realized was that the base needed to build most of my ideas was the same, but experimenting took a long time because I needed to rebuild these basic components over and over.
React Native AI came out of my need to have a basic, configurable framework to easily spin up new ideas without having to rebuild all of the basic components from scratch.
Some of these components and features:
Streaming / real-time responses. Handling and debugging these on both the client and the server can be time-consuming.
LLM normalization. The various LLM providers respond in different formats. The idea is to handle these on the server and send back to the client with a consistent interface.
OpenAI Assistants. OpenAI Assistants provide a powerful new way to build on LLMs, but the API for doing so is more complex than using a basic LLM. There needs to be a string of API calls and state management for this to work. Having this all set up and ready to use will save me a lot of time in the future.
Image processing. Dealing with image uploads and downloads, saving to disk on the server and saving to the device, can be complicated and gets time consuming to debug. Having a plug and play interface and utility functions speeds everything up.
Chat UI. Rebuilding components like buttons, text inputs, and chat interfaces is time consuming and tedious. Having a pre-built UI and components for these repeatable UI elements saves a lot of time.
Theming / styling. React Native AI comes with 5 prebuilt themes and makes swapping themes out very simple, by adding just a few lines of code. When launching your app, you can ship with just a single theme or give users the option to switch between themes.
Service providers
React Native AI uses the following services:
OpenAI ChatGPT for 2 types of LLMs as well as OpenAI Assistant, code interpreter, and retrieval
Fal.ai for an array of image models.
Anthropic Claude for 2 types of LLMs
Cohere for 2 types of LLMs including web which gives you access to live, online data
Bytescale for image processing
Other technology
React Native AI is made possible by great open source tech like React Native, Expo, Node.js, and Express.
Getting started
To get started with React Native AI, run the following command:
npx rn-ai
You’ll be prompted to configure your environment variables either at setup or later. You don’t have to set up all environment variables, you only need to enable the services you’d like to try out.
So easy to implement... and can be very cool and beautiful app in the store with access to all the different AI chats in 1 app.
Hello, great tutorials,
this worked with Clause, and Cohere but not with openai models? I get this error.
Thank you
User
TypeError: Cannot read properties of undefined (reading '0')
[1] at /Users/marlonbarriossolano/Desktop/app-mob2/server/dist/chat/gpt.js:73:46
[1] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[1] error: TypeError: Cannot read properties of undefined (reading '0')
[1] at /Users/marlonbarriossolano/Desktop/app-mob2/server/dist/chat/gpt.js:73:46
[1] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)