Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat (docs): add polyfill section to expo guide #4706

Merged
merged 1 commit into from
Feb 5, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions content/docs/02-getting-started/07-expo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,46 @@ This multi-step approach allows the model to gather information and use it to pr

This simple example demonstrates how tools can expand your model's capabilities. You can create more complex tools to integrate with real APIs, databases, or any other external systems, allowing the model to access and process real-world data in real-time. Tools bridge the gap between the model's knowledge cutoff and current information.

## Polyfills

Several functions that are internally used by the AI SDK might not available in the Expo runtime depending on your configuration and the target platform.

You can use the following polyfills to ensure that the AI SDK works as expected:

```ts filename="polyfills.js"
import { Platform } from 'react-native';
import structuredClone from '@ungap/structured-clone';

if (Platform.OS !== 'web') {
const setupPolyfills = async () => {
const { polyfillGlobal } = await import(
'react-native/Libraries/Utilities/PolyfillFunctions'
);

const { TextEncoderStream, TextDecoderStream } = await import(
'@stardazed/streams-text-encoding'
);

if (!('structuredClone' in global)) {
polyfillGlobal('structuredClone', () => structuredClone);
}

polyfillGlobal('TextEncoderStream', () => TextEncoderStream);
polyfillGlobal('TextDecoderStream', () => TextDecoderStream);
};

setupPolyfills();
}

export {};
```

Then at your root `_layout.tsx`, import it at the top like this:

```ts filename="_layout.tsx"
import '@/polyfills';
```

## Where to Next?

You've built an AI chatbot using the AI SDK! From here, you have several paths to explore:
Expand Down
Loading