Unable to resolve "ai/react" in React Native

[timothymiller]

I am trying to use the following code in React Native:

import { useCompletion } from 'ai/react'

const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion()

Behavior

It throws this exception when starting the app:

Unable to resolve "ai/react"

Is this package supported in React environments? Or only Next.js?

[Death666Machine]

Also experiencing this issue.

[karaggeorge]

Might have to enable https://reactnative.dev/blog/2023/06/21/package-exports-support#enabling-package-exports-beta

/react is a package export field, defined here

[karaggeorge]

Looking a bit more into it, even if the package resolution is fixed, it doesn't seem to work with React Native yet because this package uses streams, and RN hasn't yet implemented streams for their fetch API

[sebnun]

Looks like now there is a fetch implementation that support streams in React Native
https://github.com/react-native-community/fetch

Would it be possible to use this with ai/react ?

[MaxLeiter]

@sebnun I gave it a quick try and couldn't make it work, but it may be possible.

[MaxLeiter]

As this isn't really a problem with the ai ibrary, I'm going to convert it to a discussion.

[shiroyasha9]

Any update on this?

[ekimcem]

This will be needed a lot in the near future

[codybrouwers]

I was able to find workarounds for both the exports issue and streaming.

Enabling unstable_enablePackageExports in my Metro config didn't fix being able to import ai/react so instead I just use:
import { useChat } from 'ai/react/dist'

and then to fix TypeScript types created a type declaration file:

// ai.d.ts
declare module 'ai/react/dist' {
  export * from 'ai/react';
}

Fixing streams requires installing some polyfills and using react-native-fetch-api.

react-native-polyfill-globals can do a lot of the heavy lifting for you but I opted to install the polyfill packages myself and make a few changes:

• Use react-native-fast-encoder instead of text-encoding
• Only polyfill TextDecoder because as of React Native 0.74.1 TextEncoder is added to Hermes (commit)
• Ensure reactNative: { textStreaming: true } is included in all fetch requests.
  • ⚠️ this could cause performance issues on fetch requests that don't need streaming so keep that in mind.

// index.js or whatever the root of your app is

import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctions';
import TextEncoder from 'react-native-fast-encoder';
import { ReadableStream } from 'web-streams-polyfill';
import { fetch, Headers, Request, Response } from 'react-native-fetch-api';

polyfillGlobal('ReadableStream', () => ReadableStream);
polyfillGlobal('TextDecoder', () => TextEncoder);
polyfillGlobal(
  'fetch',
  () =>
    (...args) =>
      fetch(args[0], { ...args[1], reactNative: { textStreaming: true } }),
);
polyfillGlobal('Headers', () => Headers);
polyfillGlobal('Request', () => Request);
polyfillGlobal('Response', () => Response);

The only remaining issue I'm encountering is the first chunk of the stream is always 515 bytes and then the rest flow in as expected. This causes a delay in showing data until a bunch pops in and the rest of the stream continues. Still investigating why this is happening.

[aretrace]

@iarickvigasi @codybrouwers @nucleartide @AntoineKM @karaggeorge

Could y'all try out this solution (feedback is welcomed, especially for ai/react and android usage):
👉 https://gist.github.com/aretrace/bcb0777c2cfd2b0b1d9dcfb805fe2838

[biendou]

Hello react-native-fast-encoder doesn't have support for the new architecture on IOS @aretrace what could me the way to solve this?

[aretrace]

@biendou my solution should work for the new architecture. follow all the steps exactly, let me know if anything goes wrong.

[shivankkunwar]

I am facing this issue on my Next.js app, it should work properly I am not even working on react-native

[aretrace]

Expo now has a fetch implementation that supports streaming (https://docs.expo.dev/versions/latest/sdk/expo/#expofetch-api).
I believe @lgrammel mentioned that you can dependency inject a custom fetch implementation for useChat (https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat#fetch). Perhaps I will rewrite my solution using this new way.

[nucleartide]

Hey folks, first of all I love what the Vercel AI SDK has to offer, and I'm excited to try it on a nights-and-weekends project idea.

However, I've been trying to set up the AI SDK in React Native, using Expo Router (as recommended by the official docs). The problem that I run into is TransformStream needing to be polyfilled, which I don't have free time to resolve:

So would I be correct in saying that the Vercel AI SDK is solely designed for web at the moment?

I'd be happy to just use Next.js, then figure out a way to convert that Next.js app into a mobile app later — perhaps by using Capacitor as recommended elsewhere online. I'm also aware that React Server Components will be brought to React Native at some point, so perhaps at that point this AI library will also "just work".

Thoughts? Just curious about what y'all would recommend as a starting point.

[lgrammel]

@nucleartide i've just released a new version that supports custom fetch functions in useChat, useCompletion, useAssistant, and useObject. You can set them with the fetch option. please let me know if that resolves the issue

[nucleartide]

@lgrammel Wow amazing! I can check it out tonight as usual :)

[lgrammel]

@nucleartide did it work out?

[AntoineKM]

@nucleartide did it work out?

still doeesnt work on my side

[evangordo]

Any update on this?

[amarinsam]

Has anyone gotten the Vercel AI SDK to work by returning full responses back, rather than streaming them?