Create Reusable UI Components with Gemini CLI

How to Create Reusable UI Components with Gemini CLI

In this tutorial, you will learn how to leverage the Gemini CLI to refactor existing code within your project. Specifically, we will guide you through the process of extracting repetitive UI elements, such as card components, into reusable components. This not only reduces code duplication but also makes your codebase more maintainable and organized. We will cover how to prompt the Gemini CLI to create new component files, update existing pages to use these components, and verify the changes.

Prerequisites

• A project set up with a framework that supports component-based architecture (e.g., React, Vue, Angular).
• The Gemini CLI installed and configured for your project.
• A version control system (like Git) in use, with a new branch created for this task.
• Familiarity with your project’s file structure, particularly where components are typically stored and where the code to be refactored resides.

Steps

1. Prepare Your Project

   Before making any changes with the Gemini CLI, it’s crucial to ensure your project is in a safe state. Switch to a new, descriptive branch in your version control system (e.g., git checkout -b gemini/card-component). This allows you to easily discard any unwanted changes without affecting your main codebase. Additionally, create a dedicated folder for new UI components, typically within your app or src directory (e.g., app/components). This organization helps keep your project tidy.

2. Identify Code for Refactoring

   Locate the section of your codebase that contains the repetitive UI elements you want to turn into components. In this example, we are targeting card components within the pages/index.js (or equivalent) file. Scroll through the file to find the repeated template structures for feature cards and combo cards. Having this file open will help the Gemini CLI understand the context and the exact code to extract.

3. Formulate the Gemini CLI Prompt

   Open your Gemini CLI chat window. Construct a clear and specific prompt that instructs the AI on what you want to achieve. The prompt should include:

   • The location and description of the current code (e.g., “In the homepage there’s currently three feature cards and three combo cards”).
   • The desired action (e.g., “Can you extract the templates or styles of these two types of cards into reusable UI components?”).
   • The desired names for the new components (e.g., “called feature card and combo card”).
   • The target directory for the new components (e.g., “They should be made in the app components directory”).
   • The instruction to update the original file (e.g., “Then update the homepage to use these card components in the places they’re needed.”).

   A sample prompt would look like this:

   In the homepage there's currently three feature cards and three combo cards. Can you extract the templates or styles of these two types of cards into reusable UI components called feature card and combo card? They should be made in the app components directory. Then update the homepage to use these card components in the places they're needed.

4. Execute the Prompt and Grant Permissions

   Paste your prompt into the Gemini CLI and press Enter. The CLI may ask for permission to create new directories or modify files. Review these requests carefully. For directory creation, you might see an option to “Allow this once” or “Allow always.” For this task, allowing directory creation is necessary. Choose the appropriate permission level. The CLI will then proceed to generate the new components and update the existing file.

   Tip: Always review permission requests. While convenience is helpful, security and understanding what the AI is doing are paramount.

5. Review Generated Code and Components

   Once the Gemini CLI has finished, meticulously examine the changes. Navigate to the new components (e.g., app/components/FeatureCard.js and app/components/ComboCard.js) and inspect their code. Verify that the templates have been correctly extracted and that the components accept necessary props (like title, description, tags, icon slots) as expected. Then, go back to the original file (e.g., pages/index.js) and confirm that the old, duplicated code has been replaced with instances of the new components.

   Expert Note: Don’t blindly trust AI-generated code. Always perform a code review. Check for potential bugs, adherence to your project’s coding standards, and efficiency. Sometimes, you might need to manually tweak the generated code or provide follow-up prompts for revisions.

6. Test the Changes in the Browser

   After reviewing the code, run your project and navigate to the relevant page in your browser (e.g., the homepage). Visually inspect the UI to ensure that the cards are rendered correctly and look identical to how they did before the refactoring. This step confirms that the component extraction and usage were successful without altering the user interface’s appearance or functionality.

7. Commit Your Changes

   If you are satisfied with the results, it’s time to commit your work. Open your source control panel (e.g., Git panel in your IDE). You can use the Gemini CLI or Copilot to help generate a commit message. For instance, you might prompt it to “Create a commit message for extracting card components.” Once you have a suitable message, stage your changes, commit them, and push the branch to your remote repository.

   Warning: Regularly committing your changes, especially after successful AI-assisted refactoring, helps maintain a clear history and makes it easier to revert if necessary.

Conclusion

You have successfully used the Gemini CLI to extract repetitive UI code into reusable components and update your application to utilize them. This process significantly reduces code duplication and improves the maintainability of your project. Remember that AI is a powerful tool for code generation and refactoring, but always supplement its output with your own review and testing to ensure quality and correctness.

Source: Gemini CLI Tutorial #3 – Making Code Changes (YouTube)