react-native-openai-jsx v0.1.0
react-native-openai-jsx
โ๏ธ ๐งช ๐ค Use OpenAI to generate functioning React Native components!
It is possible to use react-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:
<Prompt
extraProps={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 actually works! By using the openai
client library, we can use their sophisticated Machine 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 a react-native-wormhole
.
๐ Getting Started
First, you'll need to install react-native-openai-jsx
and react-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 this here.
Note: You'll need
react-native-url-polyfill
to enable compatibility with the officialopenai
SDK.
Next, at the root of your application import 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 the example
app:
cd example/
OPENAI_API_KEY="<your-api-key>" yarn (ios|android|web)
โ๏ธ License
1 year ago