react-native-openai-jsx

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

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:

import { Alert } from 'react-native';
import { Prompt } from 'react-native-openai-jsx';

export default function App(): JSX.Element {
  return (
    <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 official openai 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)

🦄 Configuration

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

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

✌️ License

MIT