Use Custom Component Libraries

Websites generated by AIGNE WebSmith are constructed from a library of pre-designed visual elements called components. While WebSmith includes a standard set of components, you can define and manage a custom component library using a Pages Kit project. This allows for tailored designs and functionalities specific to your needs.

This section explains how to use the component pull command to synchronize your local component library with the one defined in your Pages Kit project.

Overview of the Component Library#

A custom component library is a collection of standardized, reusable page elements tailored for your project. When you generate a website, WebSmith will use your custom components to build the pages, ensuring brand consistency and unique layouts.

Keeping your local library synchronized is important for two main reasons:

1. Access to New Designs: As new visual components are designed and added to your Pages Kit project, pulling them into your local library makes them available for the AI to use.
2. Bug Fixes and Improvements: Updates may contain improvements or fixes to existing components, enhancing the quality and appearance of your website.

Syncing Your Custom Library#

The aigne web component pull command fetches the latest version of the component library from a specific URL provided by your Pages Kit project.

Command Syntax#

To pull the latest components, use the following command structure:

aigne web component pull --url <your_component_pull_url>

You can also use the alias comp:

aigne web comp pull --url <your_component_pull_url>

Parameters#

The Update Process#

Updating your component library is a straightforward but important process. Follow these steps carefully.

Step 1: Run the Pull Command#

Execute the command with the specific URL provided by your Pages Kit project.

aigne web component pull --url "https://your-pages-kit/api/projects/your-project-id/components/pull?secret=your-secret&hash=your-hash"

The tool will connect to the URL and download the latest component library definition.

Step 2: Review the Changes#

After a successful download, WebSmith will display a summary of the changes. It will show a comparison between your existing library and the new one, detailing the number of "atomic" (basic) and "composite" (complex) components.

An example of the output might look like this:

✅ Pull Components successfully (not saved yet)!
📊 New Components Statistics:
  🔹 Atomic components: 10 (9 → 10)
    • LogoV1 - A component to display a heading and a list of logos...
    • RichText - A RichText component primarily displays the title...
    • NewFeatureCard - A brand new card for features...
  🧩 Composite components: 22 (22 → 22)
    • Logo Wall - Structure - Optional section title...
    • User Review - Structure (top → bottom) - Review Content/Quote...

This summary allows you to verify the incoming changes before they are applied.

Step 3: Confirm the Update#

WebSmith will then prompt you for confirmation before making any permanent changes to your local files.

Do you want to update (save) the built-in components file? (y/N)

• Press y and Enter to proceed with the update.
• Press n or Enter to cancel the operation. No changes will be made.

Step 4: Re-generate Your Website#

If you confirm the update, WebSmith will perform two critical actions:

1. Save the New Library: It overwrites your local builtin-component-library.yaml file with the new version.
2. Clear Generated Content: To ensure your website is rebuilt correctly with the new components, it will delete all previously generated page files from your workspace and output directories.

Once the process is complete, you will see a confirmation message and a reminder for the next step.

💾 New components saved.
🧹 Cleaned previous generated content.
🚀 Next: please run below command to re-generate pages:

  `aigne web generate`

You must now run the generate command to create your website pages using the updated component library.

Summary#

The component pull command is the standard procedure for keeping your local environment's visual building blocks in sync with your custom Pages Kit repository. The process involves pulling the latest library, reviewing the changes, confirming the update, and finally, re-generating your website to apply the new components.

For more information on creating pages, proceed to the Create Website section.