{"id":13998571,"url":"https://github.com/cawfree/react-native-openai-jsx","last_synced_at":"2025-04-06T18:32:34.007Z","repository":{"id":65134492,"uuid":"582551603","full_name":"cawfree/react-native-openai-jsx","owner":"cawfree","description":"⚛️ 🧪 🤖 Use OpenAI to generate functioning React Native components!","archived":false,"fork":false,"pushed_at":"2023-01-02T00:40:45.000Z","size":312,"stargazers_count":95,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-22T04:31:51.638Z","etag":null,"topics":["ai","app","chat","components","dynamic","generated","gpt","openai","react-native"],"latest_commit_sha":null,"homepage":"https://twitter.com/cawfree","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-27T07:22:00.000Z","updated_at":"2025-02-26T22:55:46.000Z","dependencies_parsed_at":"2023-02-01T01:30:38.651Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-openai-jsx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-openai-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-openai-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-openai-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-openai-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-openai-jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399888,"owners_count":20932876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","app","chat","components","dynamic","generated","gpt","openai","react-native"],"created_at":"2024-08-09T19:01:47.279Z","updated_at":"2025-04-06T18:32:32.648Z","avatar_url":"https://github.com/cawfree.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-openai-jsx\n⚛️ 🧪 🤖 Use OpenAI to generate functioning [__React Native__](https://reactnative.dev) components! [__See it in action! 🎬__](https://twitter.com/cawfree/status/1603234088776867840)\n\nIt is possible to use [`react-native-openai-jsx`](https://github.com/cawfree/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.\n\nFor example:\n\n```typescript\nimport { Alert } from 'react-native';\nimport { Prompt } from 'react-native-openai-jsx';\n\nexport default function App(): JSX.Element {\n  return (\n    \u003cPrompt\n      extraProps={React.useMemo(() =\u003e ({\n        onPress: (message: string) =\u003e Alert.alert(message),\n      }), [])}\n      prompt={[\n        'Provide a complete example of a React Native View component which contains a big Button in the center with the text \"Press Me\".',\n        'When the Button is pressed, it must call a function prop passed into the component called onPress with the parameter \\\"Hello from OpenAI!\\\".',\n      ].join(' ')}\n    /\u003e\n  );\n}\n```\n\nIt might seem totally crazy, but this actually _works_! By using the [`openai`](https://github.com/openai/openai-node) client library, we can use their sophisticated [__Machine Learning Model__](https://openai.com/blog/chatgpt/) to imagine functional React Native applications for us. At runtime, we can use [`@babel/runtime`](https://github.com/babel/babel/tree/master/packages/babel-runtime) to transpile the auto-generated module into runtime-friendly JavaScript and have this execute on top of a [`react-native-wormhole`](https://github.com/cawfree/react-native-wormhole).\n\n### 🚀 Getting Started\n\nFirst, you'll need to install `react-native-openai-jsx` and `react-native-url-polyfill`:\n\n```shell\nyarn add react-native-openai-jsx react-native-url-polyfill\n```\n\nWhilst 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__](https://beta.openai.com/account/api-keys).\n\n\u003e Note: You'll need `react-native-url-polyfill` to enable compatibility with the official [`openai` __SDK__](https://github.com/openai/openai-node).\n\n\nNext, at the root of your application [__import the polyfills__]() to the entry point of your application, i.e.:\n\n```diff\n+ import 'react-native-url-polyfill/auto';\n\nimport { AppRegistry } from 'react-native';\nimport App from './src/App';\nimport { name as appName } from './app.json';\n\nAppRegistry.registerComponent(appName, () =\u003e App);\n```\n\nThat should be everything!\n\nTo see this all come together, you are free to try out the [`example`](./example) app:\n\n```\ncd example/\nOPENAI_API_KEY=\"\u003cyour-api-key\u003e\" yarn (ios|android|web)\n```\n\n### 🦄 Configuration\n\nThe `\u003cPrompt /\u003e` component exposes all of the interface capabilities to start creating and customizing your own language model [__prompts__](https://en.wikipedia.org/wiki/Prompt_engineering).\n\n| Name                 | Type                    | Description                                                                                                                                                                                                        | Default Value                                                    |\n|----------------------|-------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------|\n| `prompt`             | `string?`               | The text string used to suggest to the machine learning model what application to create.                                                                                                                          | A condition designed to evaluate into an empty `React.Fragment`. |\n| `completionSettings` | `CompletionSettings`    | A [`CreateCompletionRequest`](https://github.com/openai/openai-node/blob/108b63c7bbcbdf3a817d47702bef57b1a0d717da/dist/api.d.ts#L362) object.                                                                      | __Required__                                                     |\n| `style`              | `StyleProp\u003cViewStyle\u003e?` |                                                                                                                                                                                                                    | `undefined`                                                      |\n| `debug`              | `boolean?`              | Used to render errors during transpilation and preview the responses generated by OpenGPT.                                                                                                                         | `false`                                                          |\n| `extraProps`         | `\u003cT\u003e`                   | A custom object you can use to pass into OpenGPT. For example, you can pass a callback function and instruct the machine learning model that it exists as a possible prop.                                         | `{}`                                                             |\n| `Wormhole`           | `React.FC`              | A [`Wormhole`](https://github.com/cawfree/react-native-wormhole). This can be used to include support for additional libraries such as [`react-native-svg`](https://github.com/software-mansion/react-native-svg). | `DefaultWormhole`                                                |\n\nPlease 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.\n\n### ✌️ License\n[__MIT__](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-openai-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-openai-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-openai-jsx/lists"}