Generate React CLI + OpenAi
Tags: react, nextjs, openai
Published: 2022-12-20 15:52:30

---
title: Generate React CLI + OpenAi
published: true
description: OpenAI is being incorporated with GRC, a tool for generating components, and will allow for the intelligent generation of components by describing them using the --describe flag. The integration will start simple but there are plans for future improvements to enhance the developer experience.
tags: React, NextJs, OpenAi
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk1x9oa8gimr3740slpj.png
---

## [Generate React CLI](https://github.com/arminbro/generate-react-cli/tree/alpha) 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](https://github.com/arminbro/generate-react-cli/issues).

### 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:

```sh
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 🤯:

```jsx
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.

```sh
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:

```jsx
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](https://twitter.com/arminbro).