Quickly build UI components with AI

Meta: Learn how to quickly build and customize UI components with AI. Save time on tedious tasks and focus on engaging design.

Building UI components usually means writing a lot of code from scratch, fixing minor bugs, and working closely with designers to bring static designs to life. It’s always time-consuming, with you manually handling every detail, from layout to performance tweaks.

AI is now changing how you can approach building UI elements. Instead of spending hours on repetitive tasks, you can use AI tools to quickly build and refine your UI components.

In this guide, you’ll learn how to build and customize UI elements, create style guides, and develop more complex UIs using AI. By the end, you'll see how tools like Cody reduce the time and effort involved in your UI development.

Prerequisites

To follow along with this tutorial, you’ll need the following:

• Visual Studio Code (VSCode)
• Fundamental knowledge of React and TailwindCSS
• Node.js installed

Once these are in place, you'll need to set up the development environment.

Setting up the environment

You’ll need to set up a React project, install Cody on your VSCode editor, and use Cody to configure TailwindCSS. This setup will serve as your development environment. Check out this GitHub repository to see the full project you'll be building.

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 Cody’s VSCode extension.

Next, you’ll have to sign up to be able to use Cody on your VSCode. Select your preferred sign-up method to continue and complete the account creation flow.

For additional information, you can refer to the Cody documentation.

To improve your workflow and avoid the need to rewrite prompts multiple times, utilize Cody's custom commands. This will allow you to apply the same prompts across all the components you create, saving you time and effort.

Let's set up some of Cody's custom commands.

Setting up the Cody commands

To create custom commands in your workspace, follow these steps:
First, open the VS Code Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac). Type Cody Menu: Custom Commands and select it.

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

Enter a descriptive name for your new custom command, such as ui-components-creator.

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

After that, enter the instructions that Cody will use when executing the command. You'll be creating two commands, and here are the detailed instructions for each:

• For the ui-components-creator command, use the following prompt:
  You are an expert in React+Tailwind+TS UI component design. Design the component. Note: Do not use template literals for tailwind classes.

• For the ui-components-customizer command, use the following prompt:
  You are an expert in React+Tailwind+TS component design. Customize the component to follow the design system defined in the tailwind.config.js file, create variants based on sizes and colors, and also add things like the hover and active states. Note: Do not use template literals for tailwind classes.

For this project, the ui-components-creator command will be used to generate the basic UI components, while the ui-components-customizer command will be used to customize these components to align with the design system.

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.

Since you’re setting up the command for just this workspace, select the User Settings option.

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

Here is how your custom commands should look in your VSCode workspace settings:

// .vscode/cody.json
{
   "ui-components-creator": {
     "prompt": "You are an expert in React+Tailwind+TS UI component design. Design the component. Note: Do not use template literals for tailwind classes.",
     "context": {
        "selection": true,
        "currentFile": true,
        "currentDir": true
     },
     "mode": "ask"
  },
  "ui-component-customizer": {
     "prompt": "You are an expert in React+Tailwind+TS component design. Customize the component to follow the design system defined in the tailwind.config.js file, create variants based on sizes and colors, and also add things like the hover and active states. Note: Do not use template literals for tailwind classes.",
     "context": {
       "selection": true,
       "currentFile": true,
       "currentDir": true,
    },
    "mode": "ask"
  }
}

Next, let’s set up Tailwind CSS in your development environment.

Setting up Tailwind CSS for your development environment

To set up Tailwind CSS on the project, you'll need to install Tailwind CSS and its peer dependencies. This can be done by running the command.

yarn install -D tailwindcss postcss autoprefixer

With the dependencies installed, generate the Tailwind configuration files. This is easily done by executing the command below:

npx tailwindcss init -p

This command will create both tailwind.config.js and postcss.config.js files in your project.

To ensure Tailwind can remove unused styles in production, open the tailwind.config.js file and specify the paths to all your template files. Your configuration should look something like this:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, you need to add Tailwind’s directives to your CSS. Create a CSS file in the src directory, for example, src/index.css, and include the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import this CSS file into your React application by adding import './index.css'; to your src/index.js or src/index.tsx file.

For more detailed information, you can refer to the Tailwind CSS documentation.

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.

Next, enter the following prompt:

Update the Tailwind configuration to include the colors #00CBEC, #A112FF, and #FF5543, along with custom fonts, spacing, and other design systems elements like border-radius, box shadows, and breakpoints.

Then click Submit.

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

Once you’ve successfully set up tailwind on your project, let’s create the UI components.

Creating basic UI components

A good UI is built with components like buttons, switches, text inputs, progress bars, tabs, and many more. These elements are the core of a UI design system and shape the user experience.

Traditionally, creating these components involves manually writing the code, which can be time-consuming, especially when handling multiple components. Cody simplifies this by generating code for a component directly within your project.

You’ll build the following components:

• Button: Allows users to perform actions by clicking.
• Switch: This lets users toggle between different states.
• Text input: Allows users to enter text.
• Progress bar: Shows the progress of an operation.
• Tabs: Organizes high-level content.

To build these components with Cody, start by creating a dedicated components directory. Then, create a .tsx file for each component, such as Switch.tsx or TextInput.tsx. Let's begin by creating the button component.

Creating the button component

Here’s how to create a button component with Cody:

Note: The steps for creating this button can be used to create other UI elements.

After creating your Button.tsx file, open a new Cody chat by right-clicking on the code editor, selecting the Cody option from the menu, and choosing New Chat in Editor.

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

Next, click the Prompts and select the ui-components-creator option on the palette.

Then click the play icon or press Enter.

Cody will then generate the required code for the component, which you can review.

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

Then click Accept to accept the modifications made 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 switch component

The switch component lets users toggle between different states on your website or your application. It's a straightforward way to turn features or settings on and off, with clear visual feedback showing the current state.
Once you have created your Switch.tsx component file, follow the same steps used when creating the button component.

This is the react component code generated by Cody:

Here is how the component is going to 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 progress bar component

A progress bar component shows that the application has received a user's request and is moving closer to carrying out a requested action from that user.
In the ProgressBar.tsx you created, replicate the procedures shown in the initial button component example.

See the code example generated by Cody:

This generates the output:

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:

Customizing your UI components

A consistent design enhances user experience. Customizing your components to follow a design pattern is crucial for achieving this consistency. Here's how to do it using Cody.

The button component

A button component for a design system must have variants such as size and color. Let's get Cody to do this. Since you’ve created the prompt to handle the customization request, all you need to do is follow the following steps:

First, open the Button.tsx component file. Then, open a New Chat in Editor by following the previously highlighted steps.

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.

Next, click Prompts and select the ui-components-customizer option.

Then press Enter.

Review the generated code, apply the changes, and accept them.

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 switch component

To customize the switch component, first, open the Switch.tsx file so Cody can add it to its prompt context. Then, start a new chat by following the same steps you used earlier when customizing the buttons.
Just like with the button customization, add the tailwind.config.js file to the chat's context, then select the ui-component-customizer command from the prompts.
Cody will generate this:

Here is the final look of the switch component.

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.

After applying and accepting the code changes, you’ll notice that on line 3, there is a typescript error. You can use Cody to rectify this.

To do this, hover over the underlined error to display the menu.

Next, click Quick Fix.

Then click Ask Cody to Fix.

Once that is completed, accept the changes Cody suggested.

Here is the final result.

Also, here is the final output of the modifications.

You can repeat similar steps for the Progress Bar and the Tabs components.
Here is the progress bar customized look.

And here is the new tab component.

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.

Next, add all your component files and the tailwind.config.json file in the chat section.

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.

After applying and accepting the changes, save the file, and then on your terminal, run the following command to start your application.

npm run dev

This starts the react development server at localhost.

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.

Use the Opt + K command (on Mac) or the Alt + K command (on Windows) to bring out Cody’s Edit Code interface. Then, enter the following prompt.

Replace the src with "https://images.pexels.com/photos/27582545/pexels-photo-27582545/free-photo-of-neon-lights.jpeg"

Next, accept and save the changes.

Here is the final code generated by Cody.

This is how the page looks.

Watch the video to see the Login and Register screen designed by Cody using the components.

Now that you have completed the UI, you can enhance it further by adding more context to your prompt to specify how you want your UI to look. Feel free to experiment with different prompts that you come up with.

Final thoughts

Throughout this article, you've seen how Cody can transform how you build UI components, from basic buttons to complex, dynamic systems. Cody handles the heavy lifting so you can focus on crafting good UI/UX designs. Whether you’re customizing components or managing complex UI systems, Cody provides the tools to make the process faster and more efficient.

Now, it's your turn to put these capabilities into practice. Here are a few ideas to get you started:

• E-commerce product page: Create a responsive product page with a carousel, product details, and an "Add to Cart" button.
• Dashboard interface: Build a dashboard with interactive charts, data tables, and navigation tabs.
• Form validation: Design a multi-step form with real-time validation and progress indicators.
• Landing page: Develop a landing page with a hero section, feature highlights, and a call-to-action button.

Experiment with these projects and see how Cody can assist you in building faster and improving your development workflow. Sign up now to build UIs faster with Cody.