Generate React CLI integration with OpenAI (Alpha release)

Well, the time has come to incorporate OpenAI with GRC.

I had a chance to experiment with OpenAI's latest GPT-3 natural language model, and I was super impressed by its capabilities. You can read more about OpenAI by visiting their site: https://openai.com/.

If you've been using GRC, you already know about its component generation capabilities using its internal templates or the custom ones you provide.

With the help of OpenAI, we can now generate our components intelligently by describing them using the new --describe flag, or -d for short.

The plan for this alpha integration will start simple, but I have a few good ideas coming in the near future (and I'm hoping to hear some of yours) on how we can use OpenAI with GRC to improve the developer experience.

Please remember that this release is still early, and you will run into bugs. So, please report any bugs or issues here.

Okay, let's get started.

1. If you don't have one, you must create an OpenAI account: https://openai.com/api/.
2. You'll need to obtain a secret API key from OpenAI. You can do so by visiting https://beta.openai.com/account/api-keys.
3. Once you have your API key, you'll need to create a .env.local file in your react project and store it as a variable as OPENAI_API_KEY. Please be sure not to share the key or push it to version control, as it is private.

GRC will pass the key to OpenAI to communicate with the API on your behalf. You will see the usage reflected on your OpenAI account here: https://beta.openai.com/account/usage.

GRC uses the DaVinci language model, so you can check out their pricing here: https://openai.com/api/pricing/.

Let's generate our first component using OpenAI:

npx generate-react-cli@alpha c Counter -d "Create a counter component that increments by one when I click on the increment button"

GRC should have created a Counter component that looks something like this 🤯:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Counter.css';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="Counter" data-testid="Counter">
      <h2> The count is: {count} </h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Counter.propTypes = {};

Counter.defaultProps = {};

export default Counter;

OpenAI will do its best to generate the component following the instructions provided in the --describe flag while using the patterns supplied from the internal or custom component templates.

Okay, let's try another one.

npx generate-react-cli@alpha c GlobalNav -d "Create a navbar component with 1 logo named 'GRC' and 3 links: 'Home', 'About', 'Contact'"

and here's the output in src/components/GlobalNav/GlobalNav.js:

import React from 'react';
import PropTypes from 'prop-types';
import './GlobalNav.css';

const GlobalNav = () => (
  <div className="GlobalNav" data-testid="GlobalNav">
    <a href="#">GRC</a>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>
);

GlobalNav.propTypes = {};

GlobalNav.defaultProps = {};

export default GlobalNav;

That's a wrap. I hope this integration will allow us to generate React components more efficiently, and we can still go in and make the necessary adjustments.

Again, please provide any feedback if you have any, and I would love to see some of the components that you generate with GRC+OpenAI.

Please share them with me on Twitter @arminbro.