Quickly build UI components with AI

Let’s start by creating the React project.

Creating your React project

To create your React project, open your terminal and run the following command:

yarn create vite cody-react --template react-ts

This command initializes a new React project with TypeScript, creating a project folder named cody-react in your current directory.

Next, open the project folder in your VSCode editor. Once it's open, you can proceed to install and configure Cody.

Steps to install and configure Cody

To set up Cody on your VSCode editor, start by installing

Next, you’ll have to

For additional information, you can refer to the

In the Cody commands menu, select Custom Commands > New Custom Command.

Next, select the “ask” mode since you’ll mostly be using the Cody chat.

Choose one or more options for the context Cody should use to generate responses. This should include the Current File, Selected Code, and the Current Directory.

Press Enter to finalize the creation of your custom command. For further information, you can refer to the .

Next, you’ll need to set up your Tailwind CSS theme configuration, which will serve as the design guide for your components. This configuration will include defining colors, padding, and other style properties. For this tutorial, we’ll be using the following color codes: #00CBEC, #A112FF, and #FF5543.

Navigate to your tailwind.config.json file. Use Opt + K (or Alt + K on Windows) to open Cody’s Edit Command interface. Highlight all the content of the file.

After that, review and Accept the changes proposed by Cody.

Alternatively, you can click the Cody icon. If an existing conversation is open, click New Chat to start a new one.

Then click the play icon or press Enter.

Next, click Apply to add the code to the file.

Here is the code generated by Cody:

Be sure to save the changes in the file.

This is how the component would look.

The text input component

The text input component allows users to enter the text on a website or an application.

In your created TextInput.tsx component file, follow the steps illustrated in the first button component example.

The generated code is as follows.

This is the input component designed by Cody.

The tabs component

A tab component organizes high-level content in an application and supports switching between views, data sets, or functional aspects of the application.

In your created Tabs.tsx component file, apply the steps demonstrated in the button component example.

Cody generates the following:

On the chat field, type in @. This brings out a list of files you can select from to add the file as context to your prompt. Select the tailwind.config.js file.

Then press Enter.

Note: You can choose to accept some of the changes, depending on what you want.

Here is the final code update for the button.

This is how the button looks afterward.

Customizing the text input component

Similar to the switch component, follow the steps used in customizing the component, then apply and accept the changes from Cody.

Next, click Quick Fix.

Once that is completed, accept the changes Cody suggested.

You can repeat similar steps for the Progress Bar and the Tabs components.

Here is the progress bar customized look.

Building complex UI component systems

Now that you’ve generated the basic UI components and customized them to match your design system, you can combine these components to create a complete user interface. You can achieve this by referencing the components via their files using the @ key within your prompt.

To demonstrate, let’s create a login and register UI using all the components you created.

Navigate to your App.tsx file and open a new chat in the editor.

Then add the following prompt:

You are an expert in designing UI pages. You are good with react+tailwind+ts. Use the components and images from free sources like Unsplash to design a login and register UI. The login and register should be separate using the Tabs and the progress bar should calibrate when the form is being filled. Once a form field is filled out, the progress should be increased on the progress bar, and the terms and conditions should switch, too.

Next, apply the changes to your App.tsx.

As you can see, the image is broken. You can use Cody to fix it.

Navigate to the <img> tag on the App.tsx file and highlight it.

Here is the final code generated by Cody.

This is how the page looks.

now to build UIs faster with Cody.