react-native-ai を採用する前に見るべき構成と拡張点
Full stack framework for building cross-platform mobile AI apps
ひと目でわかる
- これは何?
- dabit3/react-native-ai はモバイル AI アプリの雛形を npx rn-ai で生成する TypeScript 製フレームワーク。モデル追加のたびにアプリとサーバーの両方を書き換える設計で、その手間と引き換えに何が得られるかを README の範囲で整理する。
- 誰に向いている?
- 既存の OpenAI 系チャット UI をすぐ動かしたい個人開発者や、複数プロバイダのストリーミングを一つの画面にまとめたい小規模チームには向く。逆に、SDK のバージョン追従を自動化したい、あるいはモデル追加を設定ファイルだけで完結させたい場合は、モデルごとにアプリとサーバーの両方を触るこの設計が負担になる。
- 商用利用できる?
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている?
- されています。最後のコミットは 10 日前です。
- 何の言語で書かれている?
- 主に TypeScript です(GitHub の言語統計による)。
回答はプロジェクトの GitHub データ(最終同期:2026年9月16日)と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
rn-ai が生成するもの、しないもの
このプロジェクトは npm パッケージとして既存アプリに組み込むタイプではない。npx rn-ai を実行すると新しいプロジェクトの雛形が生成され、以降はそのコピーを自分で育てる。README の Usage はこの一点しか書いていない。つまり利用者は、フレームワークの更新を npm update で受け取るのではなく、生成時点のコードを出発点として自分で保守する立場に置かれる。アプリ側とサーバー側が一つのリポジトリに同居し、それぞれ npm start と npm run dev で起動する。認証や認可はサーバープロキシを経由させる前提が README に明記されており、クライアントから API キーを直接叩く構成にはなっていない。この分割は、モバイルアプリのビルドに秘密鍵を埋め込まないための素直な判断だと言える。
server ディレクトリが担うプロキシの役割
チャットの経路は server/src/chat にプロバイダごとのファイルを置き、server/src/chat/chatRouter で振り分ける。画像側も同じ形で、server/src/images 配下にプロバイダ別のファイルがあり、server/src/images/imagesRouter がルーティングする。README によれば Gemini の画像生成は server/src/images/gemini.ts が担当し、GEMINI_API_KEY を設定して設定画面から Nano Banana 系のモデルを選ぶ。Express がトピックに挙がっていることからも、このサーバーはストリーミングを中継する薄い層として設計されていると読める。プロバイダを増やす作業は、この層にファイルを一つ足してルーターに登録する作業とほぼ同義である。
モデルを足すときに触るファイルの数
README が示す LLM 追加手順は短くない。アプリ側では constants.ts の MODELS に定義を足したうえで、src/screens/chat.tsx に対して、新モデル用のローカル state の作成、chat() 関数の分岐追加、generateModelReponse 関数の作成、utils.ts の getChatType の更新、そして UI のレンダリング追加という 5 ステップを行う。サーバー側では server/src/chat に新ファイルを作り、chatRouter に登録する。README 自身が「他の既存パスからストリーミングのコードをかなり流用できるはず」と書いているのは、裏を返せばプロバイダごとの差分が型として抽象化されていないことを意味する。画像モデルも同様で、IMAGE_MODELS の更新に加えて src/screens/images.tsx の generate 関数を、入力がテキストか画像か両方かに応じて書き換える必要がある。
テーマ機構は数行で完結する数少ない部分
app/src/theme.ts に既存テーマをスプレッドして name、label、tintColor などのキーを上書きし、ファイル末尾の export に追加すればテーマが増える。README の例では lightTheme を展開してクリスマス用の配色を作っている。5 テーマが同梱されているという記述もあり、UI の見た目を変える作業だけはモデル追加と違って単一ファイルで閉じている。逆に言えば、この気軽さが当てはまるのは配色までで、機能を足す作業はすべて複数ファイルにまたがる。
向かないケース: 設定だけでモデルを切り替えたい場合
この構成の弱点は、モデルの追加や削除がコード変更を伴う点にある。README は削除について「不要なモデルを配列から消すだけ」と書くが、追加はそうはいかない。プロバイダの API 仕様が変わったとき、追従すべき場所は constants.ts、chat.tsx、utils.ts、server 側の該当ファイルとルーターに散らばる。SDK 側でモデル一覧を吸収してくれる設計に慣れた開発者ほど、この分散を冗長と感じるだろう。また README にはレート制限、リトライ、タイムアウト、コスト上限といった運用面の記述が見当たらない。本番トラフィックを捌く前提のフレームワークではなく、動く土台を渡すものとして読むのが妥当である。
比較対象としての Vercel AI SDK
同じ「複数 LLM を一つの UI から扱う」問題に対して、Vercel AI SDK はアプローチが逆である。プロバイダ差分をパッケージ側のアダプタに寄せ、アプリ側はモデル識別子を差し替える程度で済ませる。react-native-ai はプロバイダごとのファイルと分岐を利用者に持たせる代わりに、ストリーミング処理の流れを自分の目で読めて、認証を挟む位置も自由に決められる。どちらが優れているという話ではなく、抽象のどこに差分を閉じ込めるかの選択である。前者は更新が速い代わりに内部が見えにくく、後者は見通しがよい代わりに追従コストを自分で払う。
ライセンスと保守の見取り図
MIT ライセンスなので、生成した雛形を改変して配布することにライセンス上の追加条件は課されない。ただし雛形をコピーして育てる性質上、上流の変更を取り込む経路は自動化されていない。依存パッケージの更新は自分のリポジトリで行う必要があり、その際に chat.tsx や各プロバイダファイルの分岐が壊れていないかを確認する作業が発生する。リリース情報は取得できていないため、上流がどの頻度で更新されているかは本稿では判断できない。採用を決める前に、constants.ts の MODELS と IMAGE_MODELS に現在何が並んでいるか、server/.env.example にどのキーが要求されるかを実際に開いて確認するのが最初の一歩になる。
編集部の結論
既存の OpenAI 系チャット UI をすぐ動かしたい個人開発者や、複数プロバイダのストリーミングを一つの画面にまとめたい小規模チームには向く。逆に、SDK のバージョン追従を自動化したい、あるいはモデル追加を設定ファイルだけで完結させたい場合は、モデルごとにアプリとサーバーの両方を触るこの設計が負担になる。採用前に確認すべきは、constants.ts の MODELS と IMAGE_MODELS の現行定義、server/src/chat 配下のルーター構成、そして server/.env.example に列挙されたキーのうち実際に自前で用意できるものがどれか。
コミュニティノート