Fix #133 Add React Native Support

.changeset/tame-beds-shake.md

@@ -0,0 +1,6 @@
+---
+'@openai/agents-realtime': minor
+'@openai/agents-core': minor
+---
+
+Add React Native platform support

README.md

@@ -41,6 +41,7 @@ Explore the [`examples/`](examples/) directory to see the SDK in action.
 - Node.js 22 or later
 - Deno
 - Bun
+- React Native
 
 Experimental support:
 

docs/src/content/docs/guides/troubleshooting.mdx

@@ -10,6 +10,7 @@ The OpenAI Agents SDK is supported on the following server environments:
 - Node.js 22+
 - Deno 2.35+
 - Bun 1.2.5+
+- React Native 0.79+
 
 ### Limited support
 

docs/src/content/docs/guides/voice-agents/quickstart.mdx

@@ -113,6 +113,7 @@ import thinClientExample from '../../../../../../examples/docs/voice-agents/thin
 From here you can start designing and building your own voice agent. Voice agents include a lot of the same features as regular agents, but have some of their own unique features.
 
 - Learn how to give your voice agent:
+
   - [Tools](/openai-agents-js/guides/voice-agents/build#tools)
   - [Handoffs](/openai-agents-js/guides/voice-agents/build#handoffs)
   - [Guardrails](/openai-agents-js/guides/voice-agents/build#guardrails)

packages/agents-core/package.json

@@ -69,6 +69,11 @@
         "types": "./dist/shims/shims-node.d.ts",
         "default": "./dist/shims/shims-node.mjs"
       },
+      "react-native": {
+        "require": "./dist/shims/shims-react-native.js",
+        "types": "./dist/shims/shims-react-native.d.ts",
+        "default": "./dist/shims/shims-react-native.mjs"
+      },
       "require": {
         "types": "./dist/shims/shims-node.d.ts",
         "default": "./dist/shims/shims-node.js"
@@ -89,8 +94,11 @@
   },
   "dependencies": {
     "@openai/zod": "npm:[email protected] - 3.25.67",
+    "@ungap/structured-clone": "^1.3.0",
     "debug": "^4.4.0",
-    "openai": "^5.10.1"
+    "openai": "^5.10.1",
+    "events": "^3.3.0",
+    "react-native-uuid": "^2.0.3"
   },
   "peerDependencies": {
     "zod": "3.25.40 - 3.25.67"
@@ -121,7 +129,8 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "zod": "3.25.40 - 3.25.67"
+    "zod": "3.25.40 - 3.25.67",
+    "@types/ungap__structured-clone": "^1.2.0"
   },
   "files": [
     "dist"

packages/agents-core/src/shims/shims-react-native.ts

@@ -0,0 +1,104 @@
+/// <reference lib="dom" />
+export { EventEmitter, EventEmitterEvents } from './interface';
+import type { EventEmitterEvents, Timeout, Timer } from './interface';
+
+import { EventEmitter as NodeEventEmitter } from 'events';
+import structuredClone from '@ungap/structured-clone';
+import uuid from 'react-native-uuid';
+
+if (!('structuredClone' in globalThis)) {
+  // @ts-expect-error - This is the recommended approach from ungap/structured-clone
+  globalThis.structuredClone = structuredClone;
+}
+export const randomUUID = (): string => uuid.v4();
+
+export function loadEnv(): Record<string, string | undefined> {
+  return {};
+}
+
+export class ReactNativeEventEmitter<
+  Events extends EventEmitterEvents = Record<string, any[]>,
+> extends NodeEventEmitter {
+  override on<K extends keyof Events & (string | symbol)>(
+    type: K,
+    listener: (...args: Events[K]) => void,
+  ): this {
+    // Node's typings accept string | symbol; cast is safe.
+    return super.on(type as string | symbol, listener);
+  }
+
+  override off<K extends keyof Events & (string | symbol)>(
+    type: K,
+    listener: (...args: Events[K]) => void,
+  ): this {
+    return super.off(type as string | symbol, listener);
+  }
+
+  override emit<K extends keyof Events & (string | symbol)>(
+    type: K,
+    ...args: Events[K]
+  ): boolean {
+    return super.emit(type as string | symbol, ...args);
+  }
+
+  override once<K extends keyof Events & (string | symbol)>(
+    type: K,
+    listener: (...args: Events[K]) => void,
+  ): this {
+    return super.once(type as string | symbol, listener);
+  }
+}
+
+export { ReactNativeEventEmitter as RuntimeEventEmitter };
+
+// Streams – placeholders (unused by the SDK on RN)
+export const Readable = class {};
+export const ReadableStream = globalThis.ReadableStream;
+export const ReadableStreamController =
+  globalThis.ReadableStreamDefaultController;
+export const TransformStream = globalThis.TransformStream;
+
+export class AsyncLocalStorage {
+  #ctx: unknown = null;
+
+  run<T>(store: T, fn: () => unknown) {
+    this.#ctx = store;
+    return fn();
+  }
+  getStore<T>() {
+    return this.#ctx as T;
+  }
+  enterWith<T>(store: T) {
+    this.#ctx = store;
+  }
+}
+
+export function isBrowserEnvironment(): boolean {
+  return true;
+}
+
+export function isTracingLoopRunningByDefault(): boolean {
+  return false;
+}
+
+/* MCP not supported on mobile; export browser stubs */
+export { MCPServerStdio, MCPServerStreamableHttp } from './mcp-server/browser';
+
+class RNTimer implements Timer {
+  setTimeout(cb: () => void, ms: number): Timeout {
+    const id: any = setTimeout(cb, ms);
+    // RN timers don’t expose ref/unref; shim them
+    id.ref ??= () => id;
+    id.unref ??= () => id;
+    id.hasRef ??= () => true;
+    id.refresh ??= () => id;
+    return id;
+  }
+
+  clearTimeout(id: Timeout | string | number | undefined) {
+    clearTimeout(id as number);
+  }
+}
+
+const timer = new RNTimer();
+export { timer };

packages/agents-openai/src/openaiChatCompletionsModel.ts

@@ -67,7 +67,7 @@ export class OpenAIChatCompletionsModel implements Model {
     const output: protocol.OutputModelItem[] = [];
     if (response.choices && response.choices[0]) {
       const message = response.choices[0].message;
-      
+
       if (
         message.content !== undefined &&
         message.content !== null &&

packages/agents-realtime/package.json

@@ -33,6 +33,11 @@
         "types": "./dist/shims/shims-browser.d.ts",
         "default": "./dist/shims/shims-browser.mjs"
       },
+      "react-native": {
+        "require": "./dist/shims/shims-react-native.js",
+        "types": "./dist/shims/shims-react-native.d.ts",
+        "default": "./dist/shims/shims-react-native.mjs"
+      },
       "node": {
         "require": "./dist/shims/shims-node.js",
         "types": "./dist/shims/shims-node.d.ts",
@@ -79,5 +84,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "peerDependencies": {
+    "react-native-webrtc": "^124.0.5"
+  }
 }

packages/agents-realtime/src/openaiRealtimeWebRtc.ts

@@ -1,6 +1,10 @@
 /// <reference lib="dom" />
 
-import { isBrowserEnvironment } from '@openai/agents-core/_shims';
+import {
+  isBrowserEnvironment,
+  mediaDevices as shimMediaDevices,
+  RTCPeerConnection as RTCPeerConnectionCtor,
+} from '@openai/agents-realtime/_shims';
 import {
   RealtimeTransportLayer,
   RealtimeTransportLayerConnectOptions,
@@ -94,7 +98,7 @@ export class OpenAIRealtimeWebRTC
   #muted = false;
 
   constructor(private readonly options: OpenAIRealtimeWebRTCOptions = {}) {
-    if (typeof RTCPeerConnection === 'undefined') {
+    if (typeof RTCPeerConnectionCtor === 'undefined') {
       throw new Error('WebRTC is not supported in this environment');
     }
     super(options);
@@ -166,7 +170,7 @@ export class OpenAIRealtimeWebRTC
 
         const connectionUrl = new URL(baseUrl);
 
-        let peerConnection: RTCPeerConnection = new RTCPeerConnection();
+        let peerConnection: RTCPeerConnection = new RTCPeerConnectionCtor();
         const dataChannel = peerConnection.createDataChannel('oai-events');
 
         this.#state = {
@@ -219,19 +223,19 @@ export class OpenAIRealtimeWebRTC
         });
 
         // set up audio playback
-        const audioElement =
-          this.options.audioElement ?? document.createElement('audio');
-        audioElement.autoplay = true;
-        peerConnection.ontrack = (event) => {
-          audioElement.srcObject = event.streams[0];
-        };
+        if (isBrowserEnvironment()) {
+          const audioElement =
+            this.options.audioElement ?? document.createElement('audio');
+          audioElement.autoplay = true;
+          peerConnection.ontrack = (event) => {
+            audioElement.srcObject = event.streams[0];
+          };
+        }
 
         // get microphone stream
         const stream =
           this.options.mediaStream ??
-          (await navigator.mediaDevices.getUserMedia({
-            audio: true,
-          }));
+          (await shimMediaDevices.getUserMedia({ audio: true }));
         peerConnection.addTrack(stream.getAudioTracks()[0]);
 
         if (this.options.changePeerConnection) {

packages/agents-realtime/src/shims/shims-browser.ts

@@ -5,3 +5,10 @@ export function isBrowserEnvironment(): boolean {
   return true;
 }
 export const useWebSocketProtocols = true;
+
+export const RTCPeerConnection = globalThis.RTCPeerConnection;
+export const RTCIceCandidate = globalThis.RTCIceCandidate;
+export const RTCSessionDescription = globalThis.RTCSessionDescription;
+export const MediaStream = globalThis.MediaStream;
+export const MediaStreamTrack = globalThis.MediaStreamTrack;
+export const mediaDevices = navigator.mediaDevices;

packages/agents-realtime/src/shims/shims-node.ts

@@ -3,3 +3,15 @@ export function isBrowserEnvironment(): boolean {
   return false;
 }
 export const useWebSocketProtocols = false;
+
+export const RTCPeerConnection =
+  undefined as unknown as typeof globalThis.RTCPeerConnection;
+export const RTCIceCandidate =
+  undefined as unknown as typeof globalThis.RTCIceCandidate;
+export const RTCSessionDescription =
+  undefined as unknown as typeof globalThis.RTCSessionDescription;
+export const MediaStream =
+  undefined as unknown as typeof globalThis.MediaStream;
+export const MediaStreamTrack =
+  undefined as unknown as typeof globalThis.MediaStreamTrack;
+export const mediaDevices = undefined as unknown as MediaDevices;

packages/agents-realtime/src/shims/shims-react-native.ts

@@ -0,0 +1,24 @@
+import {
+  RTCPeerConnection,
+  RTCIceCandidate,
+  RTCSessionDescription,
+  MediaStream,
+  MediaStreamTrack,
+  mediaDevices,
+  registerGlobals,
+} from 'react-native-webrtc';
+
+registerGlobals();
+
+export const WebSocket = global.WebSocket;
+export const isBrowserEnvironment = (): boolean => false;
+export const useWebSocketProtocols = true;
+
+export {
+  RTCPeerConnection,
+  RTCIceCandidate,
+  RTCSessionDescription,
+  MediaStream,
+  MediaStreamTrack,
+  mediaDevices,
+};

packages/agents-realtime/src/shims/shims-workerd.ts

@@ -3,3 +3,15 @@ export function isBrowserEnvironment(): boolean {
   return false;
 }
 export const useWebSocketProtocols = true;
+
+export const RTCPeerConnection =
+  undefined as unknown as typeof globalThis.RTCPeerConnection;
+export const RTCIceCandidate =
+  undefined as unknown as typeof globalThis.RTCIceCandidate;
+export const RTCSessionDescription =
+  undefined as unknown as typeof globalThis.RTCSessionDescription;
+export const MediaStream =
+  undefined as unknown as typeof globalThis.MediaStream;
+export const MediaStreamTrack =
+  undefined as unknown as typeof globalThis.MediaStreamTrack;
+export const mediaDevices = undefined as unknown as MediaDevices;