---
title: "Creating components with AI"
date: "2025-12-29T05:28:58+00:00"
summary:
image:
type: "page"
url: "/acquia-source/creating-components-ai"
id: "60b6d2a2-d27e-42a2-b7b2-7c49021bc1ca"
---

Acquia Source customers can use external AI-powered code editors such as Cursor, Claude Code, Replit, or Lovable to quickly create components of a page in Drupal Canvas.

Use the following checklist to create components of a page with AI:

**S.No.**

**Task**

1

[Configure an API client in Acquia Source](#configure-api-client)

2

[Create a local codebase](#create-local-codebase)

3

[Create components with an AI agent](#create-components-with-ai-agent)

Configuring an API client in Acquia Source
------------------------------------------

1.  In a terminal window, run the following command to install the CLI tool:
    
        npm install @drupal-canvas/cli -g
    
2.  [Access your site](/node/69836#access-a-site).
3.  In the left sidebar, click **API** \> **API clients**.
4.  Click **Add API client** to start creating a new client.
    
    If you do not want to create a new client, you can edit an existing client.
    
5.  In the **Label** field, enter a label.
6.  In the **Client ID** field, enter a client ID.
    
    Make a note of the client ID and save it to a secure location.
    
7.  Select the **Client Credentials** checkbox and add `canvas:asset_library` and `canvas:js_component` as scopes.
8.  In the **User** field, configure a user to serve as the author of actions made by this client.
    
    Important
    
    *   Do not use the anonymous user.
    *   The permissions associated with the roles of the user that you configure in this field are ignored for authorization.
    
9.  Save the client to generate credentials.

Creating a local codebase
-------------------------

1.  In a terminal window, run the following command to invoke the latest version of the Drupal Canvas create tool published on npm:
    
        npx @drupal-canvas/create@latest
    
2.  Scaffold a template repository called Nebula.
    
    This repository contains the default UI components for Acquia Source and is located at `Git@github.com:acquia/nebula.git`.
    
3.  Verify that the scaffolded repository contains all the folders from the template repository.
    
    The repository includes the ruler/rules folder, which contains AI instructions written to build code components and provide context and prompts for AI coding agents.
    

Creating components with an AI agent
------------------------------------

1.  From the scaffolded repository, run the following command to apply the Ruler tool with Cursor as the preferred AI coding agent:
    
        npx ruler apply --agents=cursor
    
    The command creates an `agents.md` file compatible with Cursor.
    
2.  Run the following command to open Cursor.
    
        cursor .
    
    Cursor displays all files and folders of the local codebase, which include:
    
    *   Storybook setup that serves as the local development environment
    *   Example component
    *   The env file that connects the new site to the Drupal Canvas CLI tool
    *   The Drupal Canvas CLI tool to synchronize components between the local environment, the Drupal environment, and the Source environment
    *   A Vite plugin to automatically configure the JSON API client for executing requests against the Drupal website, mirroring the in-browser code editor in Drupal Canvas
    *   A Drupal Canvas recommended eslint.config file to validate code against standards required for it to work in Drupal Canvas
3.  In the AI Sidebar of Cursor, type `Build this page: <page URL>`.
    
    `<page URL>` is the URL of the page whose components are to be created in Drupal Canvas.
    
4.  Press **Enter**.
    
    The AI agent builds the components, validates them against the rules defined in the eslint.config file, and fixes any linting errors. 
    
5.  Open the Storybook build in a standalone browser and verify the components.
6.  Switch back to Cursor.
7.  In the AI Sidebar of Cursor, type `Upload all these components to Drupal Canvas`.
    
    The components are created in the new Acquia Source site and are displayed in the Components panel.
    
8.  Do the required changes in the components of the page.