Repository files navigation

⚛️ 🧪 🤖 Use OpenAI to generate functioningReact Native components!See it in action! 🎬

It is possible to usereact-native-openai-jsx to create real, working React Native applications just by providing some high-level descriptions about what you'd like to see.

For example:

import{Alert}from'react-native';import{Prompt}from'react-native-openai-jsx';exportdefaultfunctionApp():JSX.Element{return(<PromptextraProps={React.useMemo(()=>({onPress:(message:string)=>Alert.alert(message),}),[])}prompt={['Provide a complete example of a React Native View component which contains a big Button in the center with the text "Press Me".','When the Button is pressed, it must call a function prop passed into the component called onPress with the parameter \"Hello from OpenAI!\".',].join(' ')}/>);}

It might seem totally crazy, but this actuallyworks! By using theopenai client library, we can use their sophisticatedMachine Learning Model to imagine functional React Native applications for us. At runtime, we can use@babel/runtime to transpile the auto-generated module into runtime-friendly JavaScript and have this execute on top of areact-native-wormhole.

First, you'll need to installreact-native-openai-jsx andreact-native-url-polyfill:

yarn add react-native-openai-jsx react-native-url-polyfill

Whilst this is downloading, you'll need to create a client API key for OpenAI if you don't already have one. You can find instructions on how to do thishere.

Note: You'll needreact-native-url-polyfill to enable compatibility with the officialopenaiSDK.

Next, at the root of your applicationimport the polyfills to the entry point of your application, i.e.:

+ import 'react-native-url-polyfill/auto';import { AppRegistry } from 'react-native';import App from './src/App';import { name as appName } from './app.json';AppRegistry.registerComponent(appName, () => App);

That should be everything!

To see this all come together, you are free to try out theexample app:

cd example/OPENAI_API_KEY="<your-api-key>" yarn (ios|android|web)

The<Prompt /> component exposes all of the interface capabilities to start creating and customizing your own language modelprompts.

Please do not forget, in order to haveany success with this library whatsoever youmust inform the machine learning model that you are trying to create a React Native application as part of your prompt.

MIT